/* ═══════════════════════════════════════════════════════════════
   Coen Design System — Componenten (v2)
   Leesbare classnames, semantic tokens, uitgebreide componentset.
   Laadt NA tokens.css en base.css.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   OPPERVLAKKEN — card, surface-glass
   ═══════════════════════════════════════════════════════════════ */

/* Coen's stijlkeuze: platte kaarten met alleen een subtiele border —
   geen schaduw. Matcht MijnCRM tabel-rijen. Hover geeft border-emphasis,
   geen elevation. Apps die wel elevation willen kunnen .card-elevated
   gebruiken (zie hieronder). */
.card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}
.card:hover { border-color: var(--border-strong); }

/* Opt-in: kaart met schaduw — alleen waar elevation echt nodig is
   (modals, drop-overlays). */
.card-elevated {
  box-shadow: var(--shadow-sm);
}
.card-elevated:hover { box-shadow: var(--shadow-md, var(--shadow-sm)); }

/* Utility: card met direct padding (zonder aparte header/body) */
.card-padded { padding: var(--sp-5); }

.card-header {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  font-weight: var(--fw-semi);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.card-header h3 {
  margin: 0;
  font-size: var(--fs-md, 0.95rem);
  font-weight: var(--fw-semi);
  color: var(--text-primary);
}
.card-body { padding: var(--sp-5); }
.card-footer {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-subtle);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
}

/* Glass-variant (optioneel, voor apps met gradient-achtergrond) */
.surface-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-card);
}

/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════════════════ */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.page-header h1,
.page-header h2 { font-size: var(--fs-xl); font-weight: var(--fw-semi); }
.page-header p  { color: var(--text-muted); font-size: var(--fs-xs); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════
   KNOPPEN
   ═══════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: 0 var(--sp-4);
  height: var(--h-btn);
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-normal),
              color var(--transition-normal),
              border-color var(--transition-normal),
              opacity var(--transition-normal);
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn .mi  { font-size: 16px; line-height: 1; }
.btn svg  { width: 14px; height: 14px; flex-shrink: 0; }

/* Varianten */
.btn-primary {
  background: var(--accent);
  color: var(--text-inverse);
}
.btn-primary:hover:not(:disabled) { opacity: .88; }

.btn-secondary {
  background: var(--surface);
  color: var(--text-secondary);
  border-color: var(--border-subtle);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px dashed rgba(0, 0, 0, .15);
  font-size: var(--fs-xs);
}
.btn-ghost:hover:not(:disabled) { color: var(--text-secondary); }

.btn-danger {
  background: var(--danger);
  color: var(--text-inverse);
}
.btn-danger:hover:not(:disabled) { opacity: .88; }

/* Maten */
.btn-sm { height: var(--h-btn-sm); padding: 0 var(--sp-2); font-size: var(--fs-xs); }
.btn-md { height: var(--h-btn-md); }
.btn-lg { height: var(--h-btn-lg); padding: 0 var(--sp-5); font-size: var(--fs-sm); }

/* Icon-only */
.btn-icon {
  width: 28px; height: 28px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none;
  color: var(--text-muted);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.btn-icon:hover { background: var(--surface-sunken); color: var(--text-primary); }
.btn-icon svg   { width: 14px; height: 14px; display: block; }

/* ═══════════════════════════════════════════════════════════════
   FORMULIEREN
   ═══════════════════════════════════════════════════════════════ */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}
.field label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}
.field input,
.field select,
.field textarea {
  height: var(--h-input);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-input);
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--fs-sm);
  outline: none;
  transition: border-color var(--transition-fast);
}
.field textarea { height: auto; min-height: 80px; resize: vertical; padding-top: var(--sp-2); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--border-accent); }
.field input:disabled,
.field select:disabled,
.field textarea:disabled { background: var(--surface-subtle); color: var(--text-muted); cursor: not-allowed; }

/* Toelichting onder een label of kop. Bewust --fs-sm en niet --fs-xs: dit is
   lopende tekst die gelezen moet worden, geen badge. Op --fs-xs (11,2px) week het
   af van MijnCRM en Jugoo Dash, die hier allebei rond de 13px zitten. */
.field-hint { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-muted); }
.field-error { font-size: var(--fs-xs); color: var(--fg-danger); }

/* Twee-kolom rij */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

/* ═══════════════════════════════════════════════════════════════
   BADGES, PILLS, TAGS
   ═══════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: var(--fw-semi);
  letter-spacing: .2px;
  border-radius: var(--radius-badge);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  white-space: nowrap;
}
.badge-success { background: var(--bg-success); color: var(--fg-success); }
.badge-warning { background: var(--bg-warning); color: var(--fg-warning); }
.badge-info    { background: var(--bg-info);    color: var(--fg-info); }
.badge-danger  { background: var(--bg-danger);  color: var(--fg-danger); }

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: var(--fw-semi);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-secondary);
}
.pill-success { background: var(--bg-success); color: var(--fg-success); }
.pill-warning { background: var(--bg-warning); color: var(--fg-warning); }
.pill-info    { background: var(--bg-info);    color: var(--fg-info); }
.pill-danger  { background: var(--bg-danger);  color: var(--fg-danger); }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: var(--fw-medium);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   ALERT — inline statusboodschap
   ═══════════════════════════════════════════════════════════════ */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  border: 1px solid transparent;
}
.alert .mi { flex-shrink: 0; margin-top: 1px; }
.alert-info    { background: var(--bg-info);    color: var(--fg-info);    border-color: var(--blue-100); }
.alert-success { background: var(--bg-success); color: var(--fg-success); border-color: var(--green-100); }
.alert-warning { background: var(--bg-warning); color: var(--fg-warning); border-color: var(--amber-100); }
.alert-danger  { background: var(--bg-danger);  color: var(--fg-danger);  border-color: var(--danger-100); }

/* ═══════════════════════════════════════════════════════════════
   LAYOUT — sidebar + main
   ═══════════════════════════════════════════════════════════════ */

.sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-sidebar);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Groepskopje boven een reeks items — CRM, TEAM, FINANCIEEL */
.nav-label {
  padding: 18px 20px 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-tertiary);
  user-select: none;
}

/* Menu-item. Hover en actief zijn dezelfde pil in twee tinten; de tekst
   wordt donkerder, niet blauw, en alleen het icoon krijgt het accent.
   Actief staat op 500 — zwaarder dan dat gaat schreeuwen. */
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1px var(--sidebar-item-gap);
  padding: 8px 12px;
  border-radius: var(--sidebar-item-radius);
  color: var(--sidebar-text);
  font-size: 0.9rem;
  font-weight: var(--fw-regular);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-item:hover  { background: var(--sidebar-hover);  color: var(--sidebar-text-active); }
.nav-item.active {
  background: var(--sidebar-active);
  color: var(--sidebar-text-active);
  font-weight: var(--fw-medium);
}
.nav-item .mi    { font-size: 20px; flex-shrink: 0; color: var(--sidebar-icon); transition: color var(--transition-fast); }
.nav-item:hover .mi,
.nav-item.active .mi { color: var(--sidebar-icon-active); }
.nav-item svg    { width: 18px; height: 18px; flex-shrink: 0; color: var(--sidebar-icon); }
.nav-item:hover svg,
.nav-item.active svg { color: var(--sidebar-icon-active); }
.nav-item:focus-visible { outline: 2px solid var(--sidebar-text-active); outline-offset: -2px; }

/* Telling achter een item: grijs als het niets bijzonders is, accent op het
   actieve item, groen wanneer er iets te doen valt (.nav-badge.let-op). */
.nav-badge {
  margin-left: auto;
  min-width: 18px;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(0,0,0,.06);
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  line-height: 14px;
  text-align: center;
}
.nav-item.active .nav-badge { background: var(--accent); color: var(--text-inverse); }
.nav-badge.let-op           { background: var(--groen-action); color: var(--text-inverse); }
.nav-badge:empty            { display: none; }

.main {
  margin-left: var(--sidebar-width);
  flex: 1;
  padding: var(--sp-6) var(--sp-7);
  min-height: 100vh;
}

/* ─── Sidebar — uitgebreide sub-componenten ─────────────────────
   Brand-block bovenaan, section-dividers tussen nav-groepen,
   footer met user-card + logout. Apps mogen specifieke kleuren/
   sizes overriden zonder de basis-structuur kapot te maken. */

.sidebar-brand {
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
}
.sidebar-brand h1 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.sidebar-brand span {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.sidebar-nav {
  flex: 1;
  padding: var(--sp-3) 0;
  overflow-y: auto;
}

/* Groepskopje in de nav — gelijk aan .nav-label. De witruimte scheidt de
   groepen; een lijn erbij maakt het menu onrustig. */
.sidebar-section {
  padding: 18px 20px 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-tertiary);
  user-select: none;
}

/* nav-item icon-slot + active-indicator (border-left).
   Bovenop de basis .nav-item uit het LAYOUT-blok hierboven. */
.nav-item .nav-icon {
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-item .nav-icon .icon { font-size: 20px; color: var(--sidebar-icon); transition: color var(--transition-fast); }
.nav-item:hover .nav-icon .icon,
.nav-item.active .nav-icon .icon { color: var(--sidebar-icon-active); }

/* .nav-badge staat in het LAYOUT-blok hierboven — niet nog eens hier. */

.sidebar-footer {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.sidebar-user .user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  object-fit: cover;  /* werkt voor <img class="user-avatar"> ook */
}
.sidebar-user .user-info { flex: 1; min-width: 0; }
.sidebar-user .user-name {
  color: var(--text-primary);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user .user-role {
  font-size: 11px;
  color: var(--text-muted);
}

.sidebar-logout {
  background: none;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--sp-1);
  display: flex;
  align-items: center;
  transition: color var(--transition-fast);
}
.sidebar-logout:hover { color: var(--danger); }

/* ═══════════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════════ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

.modal {
  background: var(--surface);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-xl);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-header {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.modal-header h3 { font-size: var(--fs-md); font-weight: var(--fw-semi); }
.modal-body   { padding: var(--sp-5); overflow-y: auto; flex: 1; }
.modal-footer {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  background: var(--surface-subtle);
}

/* ═══════════════════════════════════════════════════════════════
   DROPDOWN
   ═══════════════════════════════════════════════════════════════ */

.dropdown {
  position: absolute;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--sp-1);
  z-index: var(--z-dropdown);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.dropdown-item:hover { background: var(--surface-sunken); }
.dropdown-item.danger { color: var(--fg-danger); }
.dropdown-divider {
  height: 1px;
  margin: var(--sp-1) 0;
  background: var(--border-subtle);
}

/* ═══════════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════════ */

.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--sp-5);
}

.tab {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tab:hover { color: var(--text-primary); }
.tab.active {
  color: var(--text-accent);
  border-bottom-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════════════════════ */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.table th,
.table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}
.table th {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  background: var(--surface-subtle);
}
.table tbody tr { transition: background var(--transition-fast); }
.table tbody tr:hover { background: var(--surface-subtle); }
.table tbody tr:last-child td { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════════
   TOOLTIP — minimalistische implementatie (CSS only)
   Gebruik <span class="tooltip" data-tip="Tekst">Hover me</span>
   ═══════════════════════════════════════════════════════════════ */

.tooltip { position: relative; cursor: help; }
.tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: var(--fs-xs);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: var(--z-tooltip);
}
.tooltip:hover::after { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   AVATAR
   ═══════════════════════════════════════════════════════════════ */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  overflow: hidden;
  flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.avatar-md { width: 32px; height: 32px; }
.avatar-lg { width: 40px; height: 40px; font-size: var(--fs-sm); }
.avatar-xl { width: 64px; height: 64px; font-size: var(--fs-md); }

/* ═══════════════════════════════════════════════════════════════
   SKELETON — loading placeholder
   ═══════════════════════════════════════════════════════════════ */

@keyframes skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-subtle) 25%,
    var(--surface-sunken) 50%,
    var(--surface-subtle) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite linear;
  border-radius: var(--radius-sm);
  display: block;
}
.skeleton-text  { height: 12px; margin-bottom: 8px; }
.skeleton-title { height: 20px; width: 60%; margin-bottom: 12px; }
.skeleton-block { height: 120px; border-radius: var(--radius-md); }

/* ═══════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════ */

.toast {
  position: fixed;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-toast);
  max-width: 90vw;
}
.toast-success { background: var(--green); }
.toast-warning { background: var(--amber); color: var(--text-primary); }
.toast-info    { background: var(--blue); }
.toast-danger  { background: var(--danger); }

/* ═══════════════════════════════════════════════════════════════
   PA-LAYOUT — Tab-page bouwstenen (PostAds dashboard)
   ═══════════════════════════════════════════════════════════════
   Canonieke layout-classes voor tab-pages. Bedoeld om inline-style
   spaghetti in tab-renders te vervangen. Vier patronen:
     - .pa-page-header    titel-rij + acties
     - .pa-kpi-strip      strip met KPI-tegels
     - .pa-data-table     grid-row tabel (header + rows)
     - .pa-section-label  kleine grijze sectie-titel
   ─────────────────────────────────────────────────────────────── */

:root {
  /* Tab-page border-tinten — vervangt #ECECEF / #F4F4F5 / #F0F0F2 dwalers */
  --pa-border-card:    #ECECEF;  /* outer card / KPI-strip border */
  --pa-border-divider: #F0F0F2;  /* tile-divider, header-onderkant */
  --pa-border-row:     #F4F4F5;  /* row-scheidingslijn in tabellen */
  --pa-bg-table-head:  #FBFBFC;  /* tabel header-rij achtergrond */
  --pa-text-label:     #71717A;  /* KPI-labels, section-labels, header-cells */
  --pa-text-meta:      #A1A1AA;  /* sub-text, header-cells (zwakker) */
  --pa-text-value:     #18181B;  /* KPI-waarden, primaire data */
}

/* ── 1. Page-header — titel-rij van een tab ── */
.pa-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
  flex-wrap: wrap;
}
.pa-page-header__title {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--pa-text-value);
}
.pa-page-header__subtitle {
  font-size: 13px;
  color: var(--pa-text-meta);
  font-weight: 500;
}
.pa-page-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── 2. KPI-strip — horizontale tegel-rij ── */
.pa-kpi-strip {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--pa-border-card);
  border-radius: 12px;
  margin-bottom: 18px;
  overflow: hidden;
}
.pa-kpi-tile {
  flex: 1;
  padding: 15px 20px;
  border-right: 1px solid var(--pa-border-divider);
  min-width: 0;
}
.pa-kpi-tile:last-child { border-right: 0; }
.pa-kpi-tile__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.7px;
  color: var(--pa-text-label);
  text-transform: uppercase;
}
.pa-kpi-tile__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--pa-text-value);
  margin-top: 9px;
}
.pa-kpi-tile__meta {
  font-size: 11px;
  color: var(--pa-text-meta);
  margin-top: 4px;
}
/* Variants */
.pa-kpi-tile--primary .pa-kpi-tile__value { color: var(--accent); }
.pa-kpi-tile--danger  .pa-kpi-tile__value { color: #DC2626; }

/* ── 3. Data-tabel — grid-row layout (ruim 12px/16px) ── */
.pa-data-table {
  background: #fff;
  border: 1px solid #E8E8EC;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 18px;
  --pa-cols: 1fr;          /* override per use: style="--pa-cols: minmax(280px,2fr) 110px 90px" */
}
.pa-data-table__head,
.pa-data-table__row {
  display: grid;
  grid-template-columns: var(--pa-cols);
  column-gap: 16px;        /* zonder gap raken aangrenzende kolommen elkaar:
                              een rechts uitgelijnde numerieke cel plakt dan
                              tegen de links uitgelijnde cel ernaast. */
  align-items: center;
  padding: 13px 16px;
}
.pa-data-table__head {
  background: var(--pa-bg-table-head);
  border-bottom: 1px solid var(--pa-border-divider);
  padding: 12px 16px;
}
.pa-data-table__row {
  border-bottom: 1px solid var(--pa-border-row);
}
.pa-data-table__row:last-child { border-bottom: 0; }
.pa-data-table__row:hover { background: #FAFAFB; }

.pa-data-table__head-cell {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--pa-text-meta);
  text-transform: uppercase;
}
.pa-data-table__head-cell--right { text-align: right; }

.pa-data-table__cell {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--pa-text-value);
  min-width: 0;
}
.pa-data-table__cell--num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 500;
  color: var(--pa-text-value);
  text-align: right;
}
.pa-data-table__cell--num-soft {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: #3F3F46;
  text-align: right;
}
.pa-data-table__cell-meta {
  font-size: 11.5px;
  color: var(--pa-text-meta);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 4. Section-label — kleine grijze header boven een sectie ── */
.pa-section-label {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pa-text-label);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.pa-section-label--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Telling direct naast de titel in plaats van aan de rechterrand: "Devices · 10.650
   sessies". Hoort bij de kop en niet bij de overkant van het scherm — op een brede
   tabel zweeft een space-between-badge los van waar hij over gaat. */
.pa-section-label--inline {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Een sectiekop mag een icoon dragen, zoals in het dash. Op 13px kop is de
   standaard 20px-glyph te zwaar; 16px staat op dezelfde optische lijn als de tekst. */
.pa-section-label .mi {
  font-size: 16px;
  color: var(--pa-text-label);
}


/* ═══════════════════════════════════════════════════════════════
   PAGE-HEADER + TAB-NAV — universele topbar-structuur voor alle apps
   Layout: cream page-header met breadcrumb + titel + status + acties,
   witte tab-nav strip er direct onder, en een grijs lijntje eronder.
   Herbruikbaar in Jugoo Dash, MijnCRM, Attentiecoach.
   ═══════════════════════════════════════════════════════════════ */

.pa-page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  min-height: 64px;
  background: transparent;
  /* Achtergrond bewust neutraal — de tab-nav strip er direct onder
     vormt de natuurlijke scheidingslijn.
     Gebruik .pa-page-header--flush als je 'm plakt aan een sidebar
     of tegen de viewport-rand. */
}
.pa-page-header--flush {
  border-top: 0;
}

/* Breadcrumb/back-strip binnen de header. */
.pa-page-crumbs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--pa-text-meta, #71717A);
  min-width: 0;
}
.pa-page-crumb {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.pa-page-crumb:hover { color: var(--pa-text-value, #18181B); }
.pa-page-crumb-sep {
  color: var(--pa-text-meta, #A1A1AA);
  font-size: 11px;
}
.pa-page-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--pa-text-value, #18181B);
  letter-spacing: -0.01em;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.pa-page-title-meta {
  font-size: 13px;
  color: var(--pa-text-meta, #71717A);
  font-weight: 400;
  margin-left: 4px;
}

/* Tab-nav die direct onder de header hangt. Sluit visueel aan door
   de grijze border-bottom als lijn eronder. */
.pa-page-nav {
  display: flex;
  gap: 0;
  padding: 0 24px;
  background: var(--surface, #FFFFFF);
  border-bottom: 1px solid var(--border-subtle, #E8EAED);
  margin-bottom: 24px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.pa-page-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--pa-text-meta, #71717A);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: -1px;
  font-family: inherit;
  white-space: nowrap;
  transition: color var(--transition-fast, 150ms), border-color var(--transition-fast, 150ms);
}
.pa-page-nav-item:hover {
  color: var(--pa-text-value, #18181B);
}
.pa-page-nav-item.is-active {
  color: var(--pa-blue, var(--accent, #2A6FDB));
  border-bottom-color: var(--pa-blue, var(--accent, #2A6FDB));
  font-weight: 600;
}
.pa-page-nav-item .icon,
.pa-page-nav-item .material-symbols-rounded {
  font-size: 16px;
  color: inherit;
}


/* ═══════════════════════════════════════════════════════════════
   SERVICE PITCH — sales-hero voor niet-gekoppelde diensten.
   Split layout: tekst links (met Fraunces heading), foto rechts.
   Herbruikbaar op elke tab waar een dienst nog aangeboden kan worden.
   ═══════════════════════════════════════════════════════════════ */

.pa-service-pitch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 48px 32px;
  background: #fff;
}
.pa-service-pitch__content {
  max-width: 520px;
}
.pa-service-pitch__title {
  font-family: 'Fraunces', 'Georgia', serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #18181B;
  margin: 0 0 20px;
}
.pa-service-pitch__subtitle {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 500;
  color: #27272A;
  margin: 0 0 32px;
  max-width: 480px;
}
.pa-service-pitch__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: #18181B;
  text-decoration: none;
}
.pa-service-pitch__cta:hover .pa-service-pitch__cta-arrow {
  transform: translateX(4px);
}
.pa-service-pitch__cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #b4d3ba;
  color: #18181B;
  transition: transform 0.2s ease;
}
.pa-service-pitch__cta-arrow .material-symbols-rounded {
  font-size: 20px;
}
.pa-service-pitch__visual {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #F4F4F5;
}
.pa-service-pitch__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Utility: marketing-heading kan ook los gebruikt worden. */
.pa-marketing-heading {
  font-family: 'Fraunces', 'Georgia', serif;
  font-optical-sizing: auto;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #18181B;
}

@media (max-width: 900px) {
  .pa-service-pitch {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 20px;
  }
  .pa-service-pitch__title { font-size: 32px; }
}

/* Upload-varianten van de service-pitch visual. */
.pa-service-pitch__visual { position: relative; }
.pa-service-pitch__upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  border: 2px dashed #D4D4D8;
  border-radius: 16px;
  color: #71717A;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  font-size: 14px;
}
.pa-service-pitch__upload:hover {
  border-color: #18181B;
  color: #18181B;
  background: #FAFAFA;
}
.pa-service-pitch__edit {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  color: #18181B;
  transition: background 0.2s;
}
.pa-service-pitch__edit:hover {
  background: #fff;
}
/* ─── Funnel ──────────────────────────────────────────────────────────────
   Een keten van stappen met pijlen ertussen. De trechtervorm zit in de
   afnemende breedte: elke stap is smaller dan de vorige, zodat je in één
   oogopslag ziet dat het werk zich vernauwt naar één resultaat.

   Gebruik: .pa-funnel > (.pa-funnel__stap + .pa-funnel__pijl)*
*/
.pa-funnel {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Alle stappen even breed.
   De eerste opzet liet de kaarten versmallen om een trechter te suggereren. Dat
   werkte tegen de inhoud: een keten van acht stappen heeft achteraan de meeste
   invoervelden en vooraan de minste, dus precies waar de ruimte nodig was, was hij
   weg. Gemeten op de contentketen: 22 keuzelijsten die hun tekst afkapten.
   De volgorde blijkt al uit de nummers en de pijlen ertussen. */
.pa-funnel__stap {
  width: 100%;
  /* Op een breed scherm loopt een kaart anders door tot 1100 pixels, en dan moet
     je oog te ver reizen tussen het label links en de keuzelijst rechts. 960 is
     breed genoeg voor de langste optietekst en smal genoeg om te scannen. */
  max-width: 960px;
  background: var(--surface, var(--wit));
  border: 1px solid var(--border-subtle, var(--divider-soft));
  border-radius: var(--radius);
  padding: var(--sp-4);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.pa-funnel__stap:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-strong, var(--grijs-300));
}


/* Toestand van een stap in een lopende run */
.pa-funnel__stap--klaar  { border-color: var(--groen, #16a34a); }
.pa-funnel__stap--bezig  { border-color: var(--accent); box-shadow: var(--focus-ring, 0 0 0 3px var(--accent-light)); }
.pa-funnel__stap--fout   { border-color: var(--rood, #dc2626); }
.pa-funnel__stap--wacht  { opacity: 0.55; }

.pa-funnel__kop {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.pa-funnel__nummer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--surface-sunken, var(--grijs-100));
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}

.pa-funnel__stap--klaar .pa-funnel__nummer {
  background: var(--groen-light, var(--green-100));
  color: var(--groen, #16a34a);
}
.pa-funnel__stap--bezig .pa-funnel__nummer {
  background: var(--accent-light);
  color: var(--accent);
}
.pa-funnel__stap--fout .pa-funnel__nummer {
  background: var(--rood-light, var(--bg-danger));
  color: var(--rood, #dc2626);
}

.pa-funnel__titel {
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
}

.pa-funnel__meta {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* Wat de stap oplevert en wat hij leest */
.pa-funnel__stroom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-left: calc(28px + var(--sp-3));
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.pa-funnel__artefact {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-badge);
  background: var(--surface-sunken, var(--grijs-100));
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-default);
}

.pa-funnel__artefact--levert {
  background: var(--accent-light);
  color: var(--accent);
}

/* De pijl tussen twee stappen */
.pa-funnel__pijl {
  /* Zelfde begrenzing als een stap, anders centreert de pijl in een bredere kolom
     en staat hij naast de kaarten in plaats van eronder. */
  max-width: 960px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--sp-6);
  color: var(--grijs-300, var(--text-tertiary));
  line-height: 1;
}

.pa-funnel__pijl .mi { font-size: 20px; }

.pa-funnel__pijl--klaar { color: var(--groen, #16a34a); }

/* Koppelingen binnen een funnelstap: per variabele van de agent kies je welk
   eerder artefact hem voedt. Geen JSON typen. */
/* ─── Type-labels ─────────────────────────────────────────────────────────
   Eén woordenschat voor de bouwstenen van een AI-organisatie. Overal dezelfde
   kleur voor hetzelfde type, zodat je leert lezen wat waar hoort:

     agent      wie doet het
     skill      wat die kan
     framework  volgens welke methodiek
     kennis     op basis waarvan
     artefact   wat eruit komt
*/
.pa-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-badge);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  white-space: nowrap;
}

.pa-tag__soort {
  font-weight: var(--fw-regular);
  opacity: 0.7;
}

.pa-tag--agent     { background: var(--accent-light);              color: var(--accent); }
.pa-tag--skill     { background: var(--groen-light, #dcfce7);      color: var(--groen-action, #15803d); }
.pa-tag--framework { background: var(--geel-light, #fef3c7);       color: #92400e; }
.pa-tag--kennis    { background: var(--blue-100, #dbeafe);         color: #1e40af; }
.pa-tag--artefact  {
  background: var(--surface-sunken, var(--grijs-100));
  color: var(--text-default);
  font-family: var(--font-mono);
}

/* Wanneer een agent nog niets ontleed heeft: geen leegte maar een aanwijzing. */
.pa-tag--onontleed {
  background: transparent;
  border: 1px dashed var(--border-subtle, var(--divider-soft));
  color: var(--text-tertiary);
  font-weight: var(--fw-regular);
}

/* Rij met labels onder een stap of kaart */
.pa-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

/* ── Leesbare uitvoer ────────────────────────────────────────────────────────
   Modeluitvoer is machineleesbaar: JSON met een schema, of markdown. Voor een
   mens is dat werk. Deze patronen tonen dezelfde inhoud als een leesbaar blad,
   met een schakelaar terug naar de ruwe vorm — want die blijft de waarheid.

   .pa-uitvoer          omhulsel met de schakelaar rechtsboven
   .pa-veld             één veld: label boven, waarde eronder
   .pa-veld__label      de veldnaam, leesbaar gemaakt
   .pa-prose            gerenderde markdown
   .pa-ruw              de onbewerkte tekst                                    */

.pa-uitvoer { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Bewust in de normale stroom en niet absoluut gepositioneerd: zweeft hij, dan
   ligt hij over het eerste veld van de uitvoer heen. */
.pa-uitvoer__schakelaar {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-1);
}

.pa-uitvoer__knop {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: var(--radius);
  padding: var(--sp-1) var(--sp-2);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
}

.pa-uitvoer__knop:hover { color: var(--text); }

.pa-uitvoer__knop[aria-pressed='true'] {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}

.pa-velden {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.pa-veld {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.pa-veld__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pa-veld__waarde {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
}

/* Een lijst van korte waarden leest als opsomming, niet als lopende tekst. */
.pa-veld__lijst {
  margin: 0;
  padding-left: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.pa-veld__lijst li { margin-bottom: var(--sp-1); }

/* Een genest object: label-waardeparen, ingesprongen tegen een lijn. */
.pa-veld__sub {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--border);
}

.pa-veld__subrij {
  display: grid;
  grid-template-columns: minmax(90px, 22%) 1fr;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.pa-veld__subrij dt { color: var(--text-muted); }
.pa-veld__subrij dd { margin: 0; white-space: pre-wrap; }

.pa-veld__leeg { color: var(--text-muted); font-style: italic; }

/* Gerenderde markdown. Bewust smal gehouden: koppen, tekst, lijsten, tabellen,
   code. Genoeg voor modeluitvoer, en niet meer dan dat.                       */
.pa-prose {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text);
}

.pa-prose > :first-child { margin-top: 0; }
.pa-prose > :last-child  { margin-bottom: 0; }

.pa-prose h1, .pa-prose h2, .pa-prose h3, .pa-prose h4 {
  margin: var(--sp-5) 0 var(--sp-2);
  line-height: 1.3;
}

.pa-prose h1 { font-size: var(--fs-h3); }
.pa-prose h2 { font-size: var(--fs-md); }
.pa-prose h3,
.pa-prose h4 { font-size: var(--fs-sm); color: var(--text-muted); }

.pa-prose p  { margin: 0 0 var(--sp-3); }
.pa-prose ul, .pa-prose ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); }
.pa-prose li { margin-bottom: var(--sp-1); }

.pa-prose code {
  background: var(--surface-sunken, rgba(0,0,0,.04));
  border-radius: 4px;
  padding: 1px 4px;
  font-size: .92em;
}

.pa-prose pre {
  background: var(--surface-sunken, rgba(0,0,0,.04));
  border-radius: var(--radius);
  padding: var(--sp-3);
  overflow-x: auto;
  margin: 0 0 var(--sp-3);
}

.pa-prose pre code { background: none; padding: 0; }

.pa-prose blockquote {
  margin: 0 0 var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--border);
  color: var(--text-muted);
}

/* Tabellen komen veel voor in modeluitvoer en zijn vaak breed. */
.pa-prose__tabelwrap { overflow-x: auto; margin: 0 0 var(--sp-3); }

.pa-prose table { border-collapse: collapse; width: 100%; font-size: var(--fs-xs); }

.pa-prose th, .pa-prose td {
  border: 1px solid var(--border);
  padding: var(--sp-2);
  text-align: left;
  vertical-align: top;
}

.pa-prose th { background: var(--surface-sunken, rgba(0,0,0,.04)); font-weight: 600; }

.pa-ruw {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-xs);
  line-height: 1.5;
  margin: 0;
}

/* Label met een schakelaar ernaast, boven een veld. */
.pa-veldkop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-1);
}

.pa-veldkop label { margin-bottom: 0; }

/* Het voorbeeld staat op de plek van het tekstvak en houdt dus dezelfde hoogte,
   anders springt de pagina bij het omschakelen. */
.pa-voorbeeld {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--sp-4);
  min-height: 320px;
  max-height: 60vh;
  overflow-y: auto;
}

/* ── Verticale paginastapeling ───────────────────────────────────────────────
   Een pagina is een reeks secties onder elkaar met vaste tussenruimte. Zonder
   dit staan opeenvolgende .card-blokken tegen elkaar aan, want een kaart heeft
   zelf geen marge; die hoort van de container te komen.

   Zet .pa-stack op .main, of op elke container die secties onder elkaar zet.
   Gebruik .pa-stack--ruim waar de secties zwaarder zijn en meer lucht vragen. */

.pa-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.pa-stack--krap { gap: var(--sp-3); }
.pa-stack--ruim { gap: var(--sp-7); }

/* Een topbar die tot de randen doorloopt regelt zijn eigen onderrand via de
   gap; een extra margin-bottom zou dubbelop zijn. */
.pa-stack > .topbar { margin-bottom: 0; }

/* ── Keuzeveld: selectievakje of keuzerondje met label ───────────────────────
   Zonder dit patroon zet je een checkbox in een .field, en die is een flex-kolom:
   het vakje komt dan boven het label te staan en wordt over de volle breedte
   uitgerekt. Hier staan ze naast elkaar, met een klikbaar label.

   <label class="pa-keuze">
     <input type="checkbox"> Meteen publiceren
   </label>                                                                    */

.pa-keuze {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text);
  cursor: pointer;
}

.pa-keuze input[type='checkbox'],
.pa-keuze input[type='radio'] {
  flex: none;              /* niet meerekken met de labelbreedte */
  width: auto;             /* de .field-regel zet inputs op 100% */
  margin: 0;
  margin-top: 0.15em;      /* optisch op de eerste regel tekst */
  accent-color: var(--accent);
  cursor: pointer;
}

/* Toelichting onder de keuze, ingesprongen tot onder het label. */
.pa-keuze__hint {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Het contract boven een keten: wat er van buiten moet komen voordat hij kan
   draaien. Staat los van de stappen zelf, want het is een eigenschap van het
   geheel en niet van een stap. */
.pa-contract {
  /* Zelfde breedte als de stappen eronder: het contract hoort bij die keten en
     een blok dat breder is dan de rest leest als iets anders. */
  max-width: 960px;
  margin-bottom: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface-subtle);
}

.pa-contract h4 {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-h4);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Het sluitstuk onder een keten: wat er aan het eind uit komt. Zelfde blok als het
   invoercontract erboven, maar met een accentrand aan de linkerkant zodat begin en
   eind van de trechter van elkaar te onderscheiden zijn zonder te lezen. */
.pa-contract--slot {
  border-left: 3px solid var(--accent);
}
.pa-contract > .field-hint { display: block; margin-bottom: var(--sp-3); }

/* De tabel erin heeft zijn eigen rand en achtergrond al; binnen dit blok is dat
   een kader in een kader. */
.pa-contract .pa-data-table { margin-bottom: 0; }

/* Wat een stap doet, in gewone taal. Boven de artefacten, want dat is de vraag
   die je als eerste stelt: wat gebeurt hier eigenlijk. */
.pa-funnel__watgebeurt {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
}

/* Een koppeling waarbij het artefact anders heet dan de variabele. Toegestaan en
   soms de bedoeling, maar het vermelden waard omdat je het anders niet ziet. */
.pa-funnel__afwijking {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-style: italic;
}

/* De kop van een stap: nummer, wat er gebeurt, en de knoppen om te verplaatsen.
   De omschrijving staat hier en niet onder de agentkeuze, want dat is waar je
   voor komt kijken; met welke agent het gebeurt is het antwoord daarna. */
.pa-funnel__wat { flex: 1; min-width: 0; }
.pa-funnel__wat .pa-funnel__watgebeurt { margin: 0; }

/* Zo breed als de langste agentnaam vraagt, niet zo breed als de kaart. */
/* ── Velden van een stap ─────────────────────────────────────────────────────
   Eén raster voor alles wat je in een stap instelt: label links, bediening
   rechts, alles op dezelfde linkerrand.

   Hiervoor had elke regel zijn eigen indeling. Gemeten op de contentketen:
   labels op drie verschillende posities (17, 57 en 57 pixels), invoervelden op
   drie andere (56, 101 en 159), en twee lettertypes in dezelfde kolom.        */

.pa-funnel__velden {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin: var(--sp-3) 0;
}

/* Alle labels gelijk: één lettertype, één grootte, rechts uitgelijnd tegen de
   bediening aan. Ook de variabelenamen, die eerder in monospace stonden; twee
   lettertypes in dezelfde kolom leest als een vergissing, hoe technisch de naam
   ook is. */
.pa-funnel__label {
  justify-self: end;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-normal);
  text-align: right;
}

/* De bediening staat boven, de toelichting eronder. Naast elkaar zetten duwt het
   invoerveld korter, en dan heeft elke regel een andere rechterrand terwijl de
   linkerrand wel klopt. Dat leest als scheef, ook al is het dat maar half. */
.pa-funnel__bediening {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-1);
  min-width: 0;
}

/* Wat achter een veld hoort, op een eigen regel eronder. */
.pa-funnel__bediening > .pa-tags,
.pa-funnel__bediening > .pa-funnel__leest,
.pa-funnel__bediening > .pa-funnel__afwijking { margin-left: 2px; }

.pa-funnel__bediening select,
.pa-funnel__bediening input { margin: 0; }

/* Een keuzelijst vult de kolom. Zonder dit neemt hij zijn eigen inhoudsbreedte,
   en dan kapt de gekozen tekst af terwijl er ruimte naast staat. */
.pa-funnel__bediening > select,
.pa-funnel__bediening > input { width: 100%; }

/* De agentkeuze groeit mee als alle andere keuzelijsten, zodat elk veld in de
   kolom dezelfde linker- én rechterrand heeft.
   Eerst stond hier een vaste breedte zodat de type-labels ernaast pasten. Dat
   brak op de langste agentnaam ("Cogoo — Ownership en kannibalisatie", 281 pixels
   bij een minimum van 260), en max-content hielp niet: een browser rekent dat voor
   een select uit zonder het pijltje mee te tellen. De labels wikkelen nu gewoon naar
   de regel eronder, en dat leest beter dan een kolom met ongelijke randen. */
/* Geen aparte breedte meer voor de agentkeuze: elk veld in de kolom is even
   breed. Eerder stond hier een vaste maat zodat de type-labels ernaast pasten, en
   die brak op de langste agentnaam. Ze staan nu eronder. */

.pa-funnel__artefact--levert {
  font-family: var(--font-mono);
  color: var(--accent);
}

.pa-funnel__leest {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ── Schema: veldnaam + omschrijving ──────────────────────────────────────
   Wat een object opslaat, als rij per veld: technische naam in mono, ernaast
   in gewone taal wat erin staat. Geen tabel — pa-data-table is voor lijsten
   van veel gelijksoortige rijen, dit is een vaste, korte opsomming per object. */

.pa-schema {
  background: var(--surface-sunken, var(--surface));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
}

.pa-schema__rij {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--border-subtle);
  align-items: baseline;
}
.pa-schema__rij:first-child { border-top: none; }

.pa-schema__veld {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pa-schema__uitleg {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-normal);
}

/* ─── Lead — samenvatting direct onder een paginakop ───────────────
   Eén of twee zinnen die zeggen waar de pagina over gaat, groter dan body maar
   geen kop. Staat los boven de kaarten, niet erin: het gaat over het geheel. */
.pa-lead {
  max-width: 68ch;
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}
.pa-lead .leeg { color: var(--text-muted); font-style: italic; }