/* ==========================================================================
   Weerbaarheidsdashboard NL
   Civiele palet: diep blauw-grijs + helder civic-blauw accent + signaalkleuren.
   Donker is standaard; een licht thema (voor beleidsgebruik) via data-theme.
   ========================================================================== */

:root {
  --text-xs: clamp(0.7rem, 0.66rem + 0.2vw, 0.78rem);
  --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
  --text-base: clamp(0.92rem, 0.88rem + 0.2vw, 1rem);
  --text-lg: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  --text-xl: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;

  /* Signaalkleuren (Likert 1..5) — identiek in beide thema's */
  --score-1: #c4334a; --score-2: #e36b3a; --score-3: #e2b53a;
  --score-4: #8cb84d; --score-5: #3fa57a;
  --color-risk: #d44a4a;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px;
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);

  --font-body: 'Raleway', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', monospace;

  --topbar-h: 80px;
  --bottombar-h: 92px;
  --banner-h: 30px;
}

/* ---- Donker thema (standaard) — NewWorks petrol ---- */
[data-theme='dark'] {
  --color-bg: #0c1f26;            /* NewWorks donker petrol */
  --color-surface: #102a32;
  --color-surface-2: #163740;
  --color-surface-3: #1d434d;
  --color-border: #244a54;
  --color-border-strong: #356470;
  --color-divider: #173640;
  --color-text: #f1f5f6;          /* ijsblauw wit */
  --color-text-muted: #9fb8bf;
  --color-text-faint: #6e8a92;
  --color-primary: #34b6da;       /* teal, opgehelderd voor donker */
  --color-primary-hover: #5fcdea;
  --color-primary-soft: rgba(52, 182, 218, 0.14);
  --color-secondary: #c46fd6;     /* AI-AT paars, opgehelderd */
  --color-secondary-soft: rgba(196, 111, 214, 0.14);
  --map-bg: #08161c;
  --on-primary: #04212a;
  --overlay-bg: rgba(12, 31, 38, 0.92);
}

/* ---- Licht thema — zandbeige/ijsblauw ---- */
[data-theme='light'] {
  --color-bg: #eaf0f1;            /* ijsblauw tint */
  --color-surface: #ffffff;
  --color-surface-2: #f1f5f6;     /* ijsblauw wit */
  --color-surface-3: #e6eef0;
  --color-border: #d2dfe2;
  --color-border-strong: #b5c8cd;
  --color-divider: #e3ebed;
  --color-text: #0c1f26;          /* petrol */
  --color-text-muted: #4f6670;
  --color-text-faint: #7c949c;
  --color-primary: #1189b1;       /* NewWorks blauw-teal */
  --color-primary-hover: #0f7a9e;
  --color-primary-soft: rgba(17, 137, 177, 0.10);
  --color-secondary: #872b97;     /* AI-AT donker paars */
  --color-secondary-soft: rgba(135, 43, 151, 0.10);
  --map-bg: #ccd8da;
  --on-primary: #ffffff;
  --overlay-bg: rgba(255, 255, 255, 0.94);
  --shadow-md: 0 4px 12px rgba(12, 31, 38, 0.10);
  --shadow-lg: 0 12px 32px rgba(12, 31, 38, 0.16);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  overflow: hidden;
}

img, svg { display: block; max-width: 100%; }
button { cursor: pointer; background: none; border: none; color: inherit; font: inherit; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }

/* ---- Test/concept banner ---- */
.testbanner {
  height: var(--banner-h);
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, var(--color-primary-soft), var(--color-primary-soft) 12px, transparent 12px, transparent 24px);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.7rem; letter-spacing: 0.02em; text-align: center; padding: 0 var(--space-4);
  flex-shrink: 0;
}

/* ==========================================================================
   Topbar
   ========================================================================== */
.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.brand { display: flex; align-items: center; gap: var(--space-3); color: var(--color-primary); }
.brand-text { display: flex; flex-direction: column; color: var(--color-text); }
.brand-title { font-family: var(--font-body); font-weight: 800; font-size: var(--text-lg); letter-spacing: -0.01em; }
.brand-dot { color: var(--color-secondary); font-weight: 800; }
.brand-sub { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.01em; }

.gebied-form {
  display: flex; align-items: flex-end; gap: var(--space-2);
  flex: 1; max-width: 860px; margin: 0 var(--space-4);
}
.gebied-field { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.gebied-field-rol { flex: 0 0 180px; }
.gebied-field-soort { flex: 0 0 150px; }
.gebied-field-radius { flex: 0 0 84px; }
.lbl-hint { color: var(--color-text-faint); text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Scheidingslijn tussen 'wie kijkt' (rol) en 'wat' (gebied) */
.form-divider { width: 1px; align-self: stretch; background: var(--color-border); margin: 4px var(--space-1) 0; }

/* Gebied-groep met Regio/Locatie-schakelaar */
.area-group { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.area-head { display: flex; align-items: center; gap: var(--space-2); }
.area-head-label { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); }
.area-toggle { display: inline-flex; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.area-mode { padding: 2px 12px; font-size: 0.68rem; font-family: var(--font-mono); letter-spacing: 0.04em; color: var(--color-text-muted); }
.area-mode:hover { color: var(--color-text); }
.area-mode.active { background: var(--color-primary); color: var(--on-primary); }
.area-fields { display: flex; align-items: flex-end; gap: var(--space-2); }
.area-fields[hidden] { display: none; }
.gebied-field label {
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint);
}
.gebied-field input, .gebied-field select {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: var(--text-sm); font-family: var(--font-mono);
  outline: none; min-height: 38px;
}
.gebied-field select { font-family: var(--font-body); cursor: pointer; }
.gebied-field input:focus, .gebied-field select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.topbar-right { display: flex; align-items: center; gap: var(--space-4); }

/* Buttons */
.btn {
  background: var(--color-surface-3); color: var(--color-text);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  padding: 9px 16px; font-size: var(--text-sm); font-weight: 600;
  font-family: var(--font-mono); letter-spacing: 0.03em;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  transition: all 160ms; min-height: 38px;
}
.btn:hover:not(:disabled) { border-color: var(--color-primary); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn-primary { background: var(--color-primary); color: var(--on-primary); border-color: var(--color-primary); }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--on-primary); }
.btn-ghost { background: transparent; border-color: var(--color-border); padding: 9px 12px; }
.btn-spinner {
  width: 14px; height: 14px; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.meta { display: flex; gap: var(--space-5); }
.meta-item { display: flex; flex-direction: column; align-items: flex-end; }
.meta-label { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); }
.meta-value { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; }
.index-value { color: var(--color-primary); font-weight: 600; font-size: var(--text-base); }

/* Options menu */
.options { position: relative; }
.options-menu {
  position: absolute; top: 46px; right: 0; z-index: 1200;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; min-width: 200px; overflow: hidden;
}
.options-menu[hidden] { display: none; }
.options-menu button, .options-menu a {
  text-align: left; padding: 10px 14px; font-size: var(--text-sm); color: var(--color-text);
  border-bottom: 1px solid var(--color-divider);
}
.options-menu button:hover, .options-menu a:hover { background: var(--color-surface-2); }

/* ==========================================================================
   Layout
   ========================================================================== */
.layout {
  display: grid; grid-template-columns: 480px 1fr;
  height: calc(100vh - var(--topbar-h) - var(--bottombar-h) - var(--banner-h));
}

.left-tabs { display: flex; background: var(--color-surface-2); border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
.left-tab {
  flex: 1; min-width: 0; padding: var(--space-3) 6px; font-size: 0.66rem;
  font-family: var(--font-mono); letter-spacing: 0.02em; line-height: 1.2;
  text-align: center; overflow-wrap: break-word; hyphens: auto;
  color: var(--color-text-muted); border-bottom: 2px solid transparent; transition: all 160ms;
}
.left-tab:hover { color: var(--color-text); }
.left-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); background: var(--color-surface); }

.left-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.left-pane[hidden] { display: none; }

.panel { background: var(--color-bg); overflow: hidden; display: flex; flex-direction: column; }
.panel-left { border-right: 1px solid var(--color-border); background: var(--color-surface); display: flex; flex-direction: column; }
.panel-right { position: relative; background: var(--color-surface-2); }

.panel-header { padding: var(--space-4) var(--space-5) var(--space-3); border-bottom: 1px solid var(--color-divider); }
.panel-header h2 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
.panel-sub { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.5; }

.panel-footer {
  padding: var(--space-3) var(--space-5); font-size: var(--text-xs); color: var(--color-text-muted);
  border-top: 1px solid var(--color-divider); background: var(--color-surface-2);
}
.panel-footer strong { color: var(--color-text); }

/* ==========================================================================
   Dimensielijst (links)
   ========================================================================== */
.dim-list { list-style: none; overflow-y: auto; flex: 1; padding: var(--space-2) 0; }
.dim-card {
  padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-divider);
  cursor: pointer; transition: background 160ms; position: relative;
}
.dim-card:hover { background: var(--color-surface-2); }
.dim-card.active { background: var(--color-surface-3); border-left: 3px solid var(--color-primary); padding-left: calc(var(--space-5) - 3px); }

.dim-row1 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.dim-title { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: var(--text-sm); }
.dim-icon {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff; font-weight: 700;
}
.dim-num {
  font-family: var(--font-mono); font-size: 0.66rem; color: var(--color-primary);
  background: var(--color-primary-soft); padding: 2px 6px; border-radius: var(--radius-sm); letter-spacing: 0.04em;
}
.dim-name { line-height: 1.25; }

.likert { display: flex; gap: 3px; align-items: center; flex-shrink: 0; }
.likert-pip { width: 14px; height: 8px; background: var(--color-surface-3); border: 1px solid var(--color-border-strong); border-radius: 2px; }
.likert-pip.filled { background: var(--pip-color, var(--color-primary)); border-color: transparent; }
.likert-score { margin-left: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; }

.dim-label { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); display: flex; align-items: center; gap: 6px; }
.dim-chevron { margin-left: auto; transition: transform 160ms; color: var(--color-text-faint); }
.dim-card.active .dim-chevron { transform: rotate(180deg); }

.dim-details { margin-top: var(--space-3); display: none; font-size: var(--text-xs); color: var(--color-text); }
.dim-card.active .dim-details { display: block; }
.dim-details h4 {
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint);
  margin: var(--space-3) 0 var(--space-1); font-weight: 600;
}
.dim-details h4:first-child { margin-top: 0; }
.dim-details ul { list-style: none; padding: 0; }
.dim-details li { position: relative; padding-left: var(--space-4); margin: var(--space-1) 0; line-height: 1.45; }
.dim-details li::before { content: ''; position: absolute; left: var(--space-2); top: 0.5em; width: 4px; height: 4px; background: var(--score-5); border-radius: 50%; }
.dim-details .kwets li::before { background: var(--color-risk); }

/* Officiële verankering (veiligheidsbelangen + vitale processen) */
.vk-belangen { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--space-2); }
.vk-belang { font-size: 0.64rem; background: var(--color-primary-soft); color: var(--color-primary); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 2px 8px; }
.vk-proc-label { font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-faint); margin: 4px 0 2px; }
.vk-proc { list-style: none; padding: 0; }
.vk-proc li { display: flex; align-items: center; gap: 6px; padding: 3px 0; line-height: 1.35; border: none; }
.vk-proc li::before { display: none; }
.vk-proc-naam { flex: 1; }
.vk-klasse { flex: 0 0 auto; font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700; color: #fff; width: 26px; text-align: center; border-radius: 3px; padding: 1px 0; }
.vk-A { background: var(--color-risk); }            /* A-vitaal = grootste gevolgen */
.vk-B { background: #e2935a; }                       /* B-vitaal */
.vk-AB { background: #d4663a; }
.vk-x { background: var(--color-text-faint); }
.vk-dept { flex: 0 0 auto; font-size: 0.6rem; color: var(--color-text-muted); font-family: var(--font-mono); }
.vk-note { font-size: var(--text-xs); color: var(--color-text-muted); font-style: italic; margin-top: var(--space-2); padding-left: var(--space-3); border-left: 2px solid var(--color-risk); line-height: 1.45; }

/* ==========================================================================
   Kaart
   ========================================================================== */
.map-tabs { display: flex; background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 0 var(--space-3); gap: var(--space-1); flex-shrink: 0; }
.tab { padding: var(--space-3) var(--space-4); font-size: var(--text-xs); font-family: var(--font-mono); letter-spacing: 0.04em; color: var(--color-text-muted); border-bottom: 2px solid transparent; transition: all 160ms; }
.tab:hover { color: var(--color-text); }
.tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.map-wrap { position: relative; flex: 1; min-height: 0; }
#map { position: absolute; inset: 0; background: var(--map-bg); }

.map-readout { background: var(--color-surface); border-top: 1px solid var(--color-border); padding: var(--space-3) var(--space-5); flex-shrink: 0; }
.map-readout h3 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); margin-bottom: var(--space-1); }
.map-readout p { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.55; }

.layer-pad {
  position: absolute; top: var(--space-3); right: var(--space-3);
  background: var(--overlay-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); z-index: 500; font-size: var(--text-xs);
  backdrop-filter: blur(8px); max-width: 220px; box-shadow: var(--shadow-md);
}
.layer-pad-title { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-2); padding-bottom: var(--space-1); border-bottom: 1px solid var(--color-border); }
.layer-pad label { display: flex; align-items: center; gap: var(--space-2); padding: 2px 0; cursor: pointer; color: var(--color-text-muted); }
.layer-pad label:hover { color: var(--color-text); }
.layer-pad input[type='checkbox'] { width: 12px; height: 12px; accent-color: var(--color-primary); }

.legend {
  position: absolute; bottom: var(--space-3); left: var(--space-3);
  background: var(--overlay-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); z-index: 500; font-size: var(--text-xs);
  backdrop-filter: blur(8px); max-width: 240px; box-shadow: var(--shadow-md);
}
.legend-title { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-2); }
.legend-row { display: flex; align-items: center; gap: var(--space-2); padding: 2px 0; color: var(--color-text-muted); }
.legend-swatch { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(127,127,127,0.2); }
.legend-line { width: 18px; height: 0; border-top: 2px solid var(--color-text-muted); flex-shrink: 0; }
.legend-line.dashed { border-top-style: dashed; }

.mode-caption {
  position: absolute; top: var(--space-3); left: 60px;
  background: var(--overlay-bg); border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); z-index: 500; font-size: var(--text-xs);
  max-width: 360px; color: var(--color-text-muted); backdrop-filter: blur(8px); box-shadow: var(--shadow-md);
}
.mode-caption strong { color: var(--color-text); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.68rem; display: block; margin-bottom: 2px; }

/* ==========================================================================
   Bottombar
   ========================================================================== */
.bottombar { height: var(--bottombar-h); background: var(--color-surface); border-top: 1px solid var(--color-border); overflow-y: auto; flex-shrink: 0; }
.bottombar-inner { padding: var(--space-3) var(--space-6); font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.5; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); height: 100%; }
.bottombar-text { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 0; }
.bottombar-inner strong { color: var(--color-text); }
.disclaimer { color: var(--color-text-faint); font-style: italic; }
.bottombar-logos { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; }
.bottombar-logos .logo-label { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); }
.bottombar-logos .logo-link { display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.95); padding: 6px 10px; border-radius: var(--radius-sm); height: 42px; transition: transform 160ms; }
.bottombar-logos .logo-link:hover { transform: translateY(-1px); }
.bottombar-logos .logo-link img { max-height: 30px; width: auto; }

/* ==========================================================================
   Leaflet overrides
   ========================================================================== */
.leaflet-container { background: var(--map-bg); font-family: var(--font-body); }
.leaflet-control-attribution { background: var(--overlay-bg) !important; color: var(--color-text-faint) !important; font-size: 0.62rem !important; padding: 2px 6px !important; }
.leaflet-control-attribution a { color: var(--color-text-muted) !important; }
.leaflet-control-zoom a { background: var(--color-surface-2) !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important; }
.leaflet-control-zoom a:hover { background: var(--color-surface-3) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.leaflet-popup-content { margin: var(--space-3) var(--space-4); font-size: var(--text-xs); line-height: 1.5; }
.leaflet-popup-content h4 { font-size: var(--text-sm); margin-bottom: 4px; color: var(--color-primary); }
.leaflet-popup-content .pop-meta { color: var(--color-text-muted); font-family: var(--font-mono); font-size: 0.68rem; margin-top: 4px; }

.marker-pin {
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 11px; color: #fff;
  border-radius: 50%; border: 2px solid rgba(0,0,0,0.35); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.marker-pin.risico { border-radius: 3px; width: 24px; height: 24px; }
.marker-label { position: absolute; white-space: nowrap; color: var(--color-text); font-size: 0.7rem; font-family: var(--font-mono); text-shadow: 0 0 4px var(--color-bg), 0 0 4px var(--color-bg), 0 0 4px var(--color-bg); pointer-events: none; transform: translate(14px, -8px); }

/* ==========================================================================
   Handelingsperspectief (links, tab 2)
   ========================================================================== */
section.left-pane[data-pane='handeling'],
section.left-pane[data-pane='governance'],
section.left-pane[data-pane='oto'],
section.left-pane[data-pane='documentatie'],
section.left-pane[data-pane='baselines'],
section.left-pane[data-pane='cer'] { overflow-y: auto; }
.handeling-form { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-divider); flex-shrink: 0; }
.handeling-label { display: block; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: var(--space-2); font-weight: 600; }
.handeling-form textarea {
  width: 100%; background: var(--color-surface-2); border: 1px solid var(--color-border);
  color: var(--color-text); border-radius: var(--radius-sm); padding: var(--space-3);
  font-size: var(--text-sm); font-family: var(--font-body); resize: vertical; outline: none; min-height: 120px; line-height: 1.5;
}
.handeling-form textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.handeling-hint { font-size: var(--text-xs); color: var(--color-text-faint); margin: var(--space-2) 0 var(--space-3); line-height: 1.5; }
.handeling-hint span { color: var(--color-text-muted); }

.handeling-output { padding: var(--space-4) var(--space-5); font-size: var(--text-xs); }
.handeling-output[hidden] { display: none; }

.hp-bluf {
  background: linear-gradient(135deg, var(--color-primary-soft), transparent);
  border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5);
}
.hp-bluf-label { display: inline-block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-1); }
.hp-bluf p { font-size: var(--text-sm); color: var(--color-text); line-height: 1.5; font-weight: 500; }

.hp-section { margin-bottom: var(--space-5); }
.hp-section h3 { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-2); font-family: var(--font-mono); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.hp-section h3 .ico { font-size: 0.9rem; }

.hp-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--space-3); }
.hp-dl dt { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-faint); padding-top: 2px; }
.hp-dl dd { color: var(--color-text); line-height: 1.5; }

.hp-table { display: flex; flex-direction: column; gap: var(--space-2); }
.hp-row { display: flex; gap: var(--space-3); background: var(--color-surface-2); border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-3); }
.hp-tag { flex: 0 0 auto; align-self: flex-start; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; color: #fff; padding: 3px 7px; border-radius: var(--radius-sm); letter-spacing: 0.04em; white-space: nowrap; }
.hp-cells { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.hp-cell { font-size: var(--text-xs); line-height: 1.5; color: var(--color-text); }
.hp-cell-label { display: block; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 2px; font-weight: 600; }

.hp-list { list-style: none; padding: 0; }
.hp-list li { position: relative; padding-left: var(--space-4); margin-bottom: var(--space-2); line-height: 1.5; color: var(--color-text); }
.hp-list li::before { content: ''; position: absolute; left: var(--space-2); top: 0.55em; width: 4px; height: 4px; background: var(--color-primary); border-radius: 50%; }

.hp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 1280px) { .hp-grid { grid-template-columns: 1fr; } }

/* OTO-blok (Opleiden, Trainen, Oefenen) */
.hp-oto { background: var(--color-surface-2); border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.oto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: var(--space-2); }
@media (max-width: 1280px) { .oto-grid { grid-template-columns: 1fr; } }
.oto-col { background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.oto-col h5 { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-1); }
.oto-col ul { list-style: none; padding: 0; }
.oto-col li { font-size: var(--text-xs); line-height: 1.45; margin-bottom: 4px; padding-left: 12px; position: relative; }
.oto-col li::before { content: '·'; position: absolute; left: 2px; color: var(--color-primary); }

/* Burgerparticipatie-blok */
.hp-burger { background: var(--color-surface-2); border: 1px solid var(--color-divider); border-left: 3px solid var(--score-5); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }

/* Prioriteit/urgentie */
.hp-prioriteit { background: var(--color-surface-2); border: 1px solid var(--color-divider); border-left: 3px solid var(--color-primary); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.hp-prioriteit-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.hp-prioriteit-head h3 { margin-bottom: 0; }
.hp-pill { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; color: #fff; padding: 3px 10px; border-radius: var(--radius-full); letter-spacing: 0.06em; text-transform: uppercase; }
.hp-prioriteit p { font-size: var(--text-xs); color: var(--color-text); margin-bottom: var(--space-2); line-height: 1.5; }
.hp-actions { padding-left: var(--space-5); margin-top: var(--space-2); }
.hp-actions li { margin-bottom: 4px; line-height: 1.5; color: var(--color-text); font-size: var(--text-xs); }

/* ==========================================================================
   Analyses: 7 baselines (NAVO) & Sector (CER)
   ========================================================================== */
.analyse-run { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-divider); }
.analyse-hint { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-3); line-height: 1.5; }
.analyse-output { padding: var(--space-4) var(--space-5); }
.analyse-output[hidden] { display: none; }
.an-headline { font-size: var(--text-sm); color: var(--color-text); line-height: 1.55; margin-bottom: var(--space-3); padding: var(--space-3); background: var(--color-primary-soft); border-left: 3px solid var(--color-primary); border-radius: var(--radius-sm); }
.an-cards { display: flex; flex-direction: column; gap: var(--space-2); }
.an-card { border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface); }
.an-card summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); cursor: pointer; list-style: none; }
.an-card summary::-webkit-details-marker { display: none; }
.an-card[open] summary { border-bottom: 1px solid var(--color-divider); }
.an-num { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; color: var(--color-primary); background: var(--color-primary-soft); border-radius: var(--radius-sm); padding: 2px 6px; flex-shrink: 0; }
.an-icon { flex-shrink: 0; font-size: 0.85rem; }
.an-title { flex: 1; min-width: 0; font-size: var(--text-xs); font-weight: 600; color: var(--color-text); line-height: 1.35; }
.an-body { padding: var(--space-3); font-size: var(--text-xs); color: var(--color-text); }
.an-body p { line-height: 1.55; margin-bottom: var(--space-2); }
.an-body h4 { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); margin: var(--space-3) 0 var(--space-1); }
.an-body ul { padding-left: var(--space-5); }
.an-body li { line-height: 1.5; margin-bottom: 3px; }
.an-takeaways { margin-top: var(--space-4); border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-3); background: var(--color-surface-2); }
.an-takeaways h4 { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: var(--space-2); }
.an-takeaways ul { padding-left: var(--space-5); font-size: var(--text-xs); }
.an-takeaways li { line-height: 1.5; margin-bottom: 4px; }
.an-disclaimer { margin-top: var(--space-3); font-size: 0.62rem; color: var(--color-text-faint); line-height: 1.5; }

/* ==========================================================================
   Bestuurlijk netwerk (whole-of-government)
   ========================================================================== */
.governance-view { padding: var(--space-4) var(--space-5); }
.gov-layer {
  position: relative; border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); background: var(--color-surface-2);
  transition: all 160ms;
}
.gov-layer::after {
  content: ''; position: absolute; left: 50%; bottom: -9px; width: 1px; height: 8px; background: var(--color-border-strong);
}
.gov-layer:last-child::after { display: none; }
.gov-layer.active { border-color: var(--color-primary); border-left: 3px solid var(--color-primary); background: var(--color-primary-soft); }
.gov-layer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.gov-layer-title { font-weight: 600; font-size: var(--text-sm); }
.gov-layer-badge { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint); }
.gov-layer.active .gov-layer-badge { color: var(--color-primary); }
.gov-layer-role { margin-top: 4px; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.45; }
.gov-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--space-2); }
.gov-tag { font-size: 0.66rem; background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: var(--radius-full); padding: 2px 8px; color: var(--color-text-muted); }
.gov-note { font-size: var(--text-xs); color: var(--color-text-faint); line-height: 1.5; margin-top: var(--space-3); border-top: 1px solid var(--color-divider); padding-top: var(--space-3); }

/* --- Governance sub-secties: netwerkkaarten + plannen ------------------- */
.gov-section { margin-bottom: var(--space-5); }
.gov-section + .gov-section { border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.gov-sec-head { margin-bottom: var(--space-3); }
.gov-sec-head h3 { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.01em; }
.gov-sec-sub { display: block; font-size: 0.68rem; color: var(--color-text-faint); line-height: 1.45; margin-top: 2px; }

/* filter-chips */
.nk-filter { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: var(--space-3); }
.nk-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.03em;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  color: var(--color-text-muted); border-radius: var(--radius-full);
  padding: 3px 9px; cursor: pointer; transition: all 140ms;
}
.nk-chip:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.nk-chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.nk-chip-n { font-size: 0.56rem; opacity: 0.7; }
.nk-chip.active .nk-chip-n { opacity: 0.9; }

/* netwerkkaart-cards (native <details>) */
.nk-list { display: flex; flex-direction: column; gap: 6px; }
.nk-card {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; text-align: left;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  background: var(--color-surface-2); padding: var(--space-2) var(--space-3);
  cursor: pointer; transition: all 140ms; font: inherit; color: inherit;
}
.nk-card:hover { border-color: var(--color-primary); background: var(--color-surface); }
.nk-cardmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nk-dept { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.03em; color: var(--color-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nk-open { color: var(--color-primary); font-size: 0.8rem; flex: none; }
.nk-num {
  flex: none; width: 22px; height: 22px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700;
  background: var(--color-primary-soft); color: var(--color-primary);
}
.nk-num-x { background: var(--color-secondary-soft, var(--color-primary-soft)); color: var(--color-secondary, var(--color-primary)); }
.nk-titel { font-size: var(--text-sm); font-weight: 600; line-height: 1.25; }
.nk-dims { display: inline-flex; gap: 3px; flex: none; }
.nk-dim { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.nk-body { padding: 0 var(--space-3) var(--space-3); font-size: var(--text-xs); }
.nk-oms { color: var(--color-text-muted); line-height: 1.5; margin-bottom: var(--space-2); }
.nk-row { display: grid; grid-template-columns: 92px 1fr; gap: var(--space-2); padding: 4px 0; border-top: 1px solid var(--color-divider); line-height: 1.45; }
.nk-lbl { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-faint); padding-top: 1px; }
.nk-actoren { margin: 0; padding-left: 15px; color: var(--color-text-muted); }
.nk-actoren li { margin-bottom: 1px; }
.nk-wetten { display: flex; flex-wrap: wrap; gap: 4px; }
.nk-wet { font-size: 0.62rem; background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: var(--radius-sm); padding: 1px 6px; color: var(--color-text-muted); }
.nk-link { display: inline-block; margin-top: var(--space-2); font-family: var(--font-mono); font-size: 0.62rem; color: var(--color-primary); text-decoration: none; }
.nk-link:hover { text-decoration: underline; }

/* plannen & profielen */
.pp-group { margin-bottom: var(--space-3); }
.pp-group h4 { font-size: var(--text-xs); font-weight: 700; color: var(--color-text); margin-bottom: 6px; letter-spacing: 0.02em; }
.pp-sub { margin-bottom: var(--space-2); }
.pp-sub-h { display: block; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-faint); margin: var(--space-2) 0 4px; }
.pp-item {
  display: flex; align-items: baseline; gap: var(--space-2); text-decoration: none;
  padding: 6px 9px; margin-bottom: 4px; border-radius: var(--radius-sm);
  background: var(--color-surface-2); border: 1px solid var(--color-divider);
  transition: all 140ms;
}
.pp-item:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.pp-item-t { flex: 1; font-size: var(--text-xs); font-weight: 600; color: var(--color-text); line-height: 1.35; }
.pp-item-m { font-size: 0.6rem; color: var(--color-text-faint); font-family: var(--font-mono); }
.pp-arrow { color: var(--color-primary); font-size: 0.7rem; flex: none; }

/* --- Netwerkkaart: schema-knop + schematische weergave (modal) --------- */
.nk-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.nk-schema-btn {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.03em;
  background: var(--color-primary-soft); color: var(--color-primary);
  border: 1px solid var(--color-primary); border-radius: var(--radius-sm);
  padding: 5px 10px; cursor: pointer; transition: all 140ms;
}
.nk-schema-btn:hover { background: var(--color-primary); color: #fff; }

.nks-modal { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.nks-modal[hidden] { display: none; }
.nks-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); }
.nks-card {
  position: relative; width: 100%; max-width: 640px; max-height: 88vh; display: flex; flex-direction: column;
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.nks-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-3); border-bottom: 1px solid var(--color-border); }
.nks-kicker { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 4px; }
.nks-head h2 { font-size: var(--text-lg); line-height: 1.25; }
.nks-x { background: transparent; border: none; color: var(--color-text-muted); font-size: 26px; line-height: 1; cursor: pointer; flex: none; }
.nks-x:hover { color: var(--color-text); }
.nks-scroll { overflow-y: auto; padding: var(--space-4) var(--space-5) var(--space-5); }
.nks-oms { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.55; margin-bottom: var(--space-3); }
.nks-coord {
  display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
  background: var(--color-primary-soft); border: 1px solid var(--color-primary);
  border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: var(--space-4); font-size: var(--text-sm);
}
.nks-coord-lbl { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); }
.nks-laddertitle { font-size: var(--text-xs); font-weight: 700; margin-bottom: var(--space-2); }
.nks-laddertitle span { font-weight: 400; color: var(--color-text-faint); }

/* ladder: pijl links + gestapelde niveau-banden */
.nks-ladder { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.nks-arrow { flex: none; width: 26px; position: relative; border-radius: var(--radius-full); background: linear-gradient(to top, var(--color-surface-3, var(--color-surface-2)), var(--color-primary)); }
.nks-arrow::before { content: '▲'; position: absolute; top: -2px; left: 50%; transform: translateX(-50%); color: var(--color-primary); font-size: 11px; }
.nks-arrow span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-90deg); white-space: nowrap; font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.nks-bands { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.nks-band { border: 1px solid var(--color-divider); border-left: 3px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--color-surface-2); }
.nks-band-internationaal { border-left-color: var(--color-secondary, #872B97); }
.nks-band-nationaal { border-left-color: var(--color-primary); }
.nks-band-regionaal { border-left-color: #4aa3d4; }
.nks-band-lokaal { border-left-color: #8cb84d; }
.nks-band-uitvoerend { border-left-color: var(--color-text-faint); }
.nks-band.has-coord { background: var(--color-primary-soft); }
.nks-band-lbl { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nks-coord-tag { color: var(--color-primary); font-weight: 700; }
.nks-band-actors { display: flex; flex-wrap: wrap; gap: 5px; }
.nks-actor { font-size: var(--text-xs); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 3px 8px; color: var(--color-text); line-height: 1.35; }
.nks-opschaling { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.55; background: var(--color-surface-2); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: var(--space-3); }
.nks-opschaling strong { color: var(--color-text); }
.nks-metagrid { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-3); }
.nks-metarow { display: grid; grid-template-columns: 92px 1fr; gap: var(--space-2); font-size: var(--text-xs); align-items: start; }
.nks-dims { display: flex; flex-wrap: wrap; gap: 4px; }
.nks-dimchip { font-size: 0.6rem; background: transparent; border: 1px solid; border-radius: var(--radius-full); padding: 1px 8px; }
@media (max-width: 600px) { .nks-metarow { grid-template-columns: 1fr; gap: 2px; } .nks-arrow span { font-size: 0.5rem; } }

/* --- Netwerkdiagram (SVG) — vaste 'lichte kaart'-palet, thema-onafhankelijk */
.nks-diagram { background: #f3f5f6; border: 1px solid #d7dee0; border-radius: var(--radius-md); padding: 6px; margin-bottom: var(--space-2); overflow-x: auto; }
.nks-svg { display: block; width: 100%; height: auto; min-width: 480px; }
.nks-svg-band { fill: #8a9aa0; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.08em; }
.nks-svg-lbl { fill: #16262b; font-family: var(--font-body); font-size: 10px; font-weight: 600; text-anchor: middle; }
.nks-svg-coord { fill: #1189b1; font-family: var(--font-mono); font-size: 8px; font-weight: 700; text-anchor: middle; }
.nks-node ellipse { stroke: #cf8a2e; stroke-width: 1; }
.nks-node.ext ellipse { stroke: #aeb9bc; }
.nks-node.coord ellipse { stroke: #1189b1; stroke-width: 2.5; }
.nks-e-afstemming { stroke: #2f6fb0; stroke-width: 1.3; stroke-dasharray: 5 3; fill: none; }
.nks-e-maatregel { stroke: #7a3f9c; stroke-width: 1.5; fill: none; }
.nks-mk-b { fill: #2f6fb0; }
.nks-mk-p { fill: #7a3f9c; }
.nks-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 0.66rem; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.nks-leg { display: inline-flex; align-items: center; gap: 6px; }
.nks-leg-line { width: 22px; height: 0; border-top: 2px solid #2f6fb0; display: inline-block; }
.nks-leg-line.afstemming { border-top-style: dashed; border-color: #2f6fb0; }
.nks-leg-line.maatregel { border-color: #7a3f9c; }
.nks-leg-dot { width: 13px; height: 11px; border-radius: 50%; background: #e6a042; display: inline-block; }
.nks-leg-dot.coord { border: 2px solid #1189b1; }
.nks-bron { font-size: 0.66rem; color: var(--color-text-faint); line-height: 1.5; margin-bottom: var(--space-3); }
.nks-bron a { color: var(--color-primary); text-decoration: none; }
.nks-bron a:hover { text-decoration: underline; }

/* --- OTO: scenariogenerator + methodieken -------------------------------- */
.oto-controls { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; }
.oto-controls label { font-size: var(--text-xs); color: var(--color-text-muted); }
.oto-controls select { flex: 1; background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text); border-radius: var(--radius-sm); padding: 7px 10px; font-family: var(--font-body); font-size: var(--text-sm); }
.oto-output { margin-top: var(--space-4); }
.oto-output[hidden] { display: none; }
.oto-sc-head { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-2); margin-bottom: var(--space-3); }
.oto-sc-head h3 { font-size: var(--text-md, 1rem); font-weight: 700; line-height: 1.25; }
.oto-sc-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.oto-export { display: flex; gap: 5px; flex: none; }
.oto-exp-btn { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.02em; background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text-muted); border-radius: var(--radius-sm); padding: 4px 8px; cursor: pointer; white-space: nowrap; transition: all 140ms; }
.oto-exp-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.oto-sc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.oto-sc-meta span { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-primary); background: var(--color-primary-soft); border-radius: var(--radius-full); padding: 2px 9px; }
.oto-sc-meta .oto-meta-methode { background: var(--color-primary); color: #fff; }
.oto-block { margin-bottom: var(--space-3); }
.oto-block h4 { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 6px; }
.oto-block ul { margin: 0; padding-left: 18px; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text); }
.oto-block li { margin-bottom: 3px; }
.oto-block p { font-size: var(--text-sm); line-height: 1.55; color: var(--color-text); }
.oto-table-wrap { overflow-x: auto; }
.oto-injects { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.oto-injects th { text-align: left; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-faint); padding: 4px 8px; border-bottom: 1px solid var(--color-border); }
.oto-injects td { padding: 5px 8px; border-bottom: 1px solid var(--color-divider); vertical-align: top; line-height: 1.4; }
.oto-inj-t { font-family: var(--font-mono); color: var(--color-primary); white-space: nowrap; }
.oto-inj-p { font-family: var(--font-mono); font-size: 0.56rem; color: var(--color-text-faint); text-transform: uppercase; white-space: nowrap; }
.oto-bob-fase { border-left: 3px solid var(--color-primary); background: var(--color-surface-2); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 6px; }
.oto-bob-h { font-weight: 700; font-size: var(--text-sm); margin-bottom: 4px; }
.oto-bob-fase ul { margin: 0; padding-left: 16px; font-size: var(--text-xs); line-height: 1.5; }
.oto-tip { margin-top: 5px; font-size: var(--text-xs); color: var(--color-text-muted); }
.oto-tip span { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-faint); margin-right: 4px; }
.oto-disclaimer { font-size: var(--text-xs); color: var(--color-text-faint); font-style: italic; border-top: 1px solid var(--color-divider); padding-top: var(--space-2); }
.oto-repo { margin-top: var(--space-5); border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.oto-cards { display: flex; flex-direction: column; gap: 8px; }
.oto-card { border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface-2); padding: var(--space-3); }
.oto-card-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 5px; }
.oto-cat { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; border-radius: var(--radius-full); padding: 2px 8px; flex: none; }
.oto-naam { font-weight: 600; font-size: var(--text-sm); }
.oto-oms { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.5; margin-bottom: 5px; }
.oto-wanneer { font-size: var(--text-xs); color: var(--color-text); line-height: 1.45; }
.oto-wanneer span { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-faint); margin-right: 4px; }
.oto-doel { font-size: var(--text-xs); font-weight: 600; color: var(--color-text); margin-bottom: 4px; }
.oto-bron { display: inline-block; margin-top: 6px; font-family: var(--font-mono); font-size: 0.6rem; color: var(--color-primary); text-decoration: none; }
.oto-bron:hover { text-decoration: underline; }

/* aanbieders */
#oto-aanbieders { display: flex; flex-direction: column; gap: 8px; }
.oto-aanbieder { display: block; text-decoration: none; border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface-2); padding: var(--space-3); transition: all 140ms; }
.oto-aanbieder:hover { border-color: var(--color-primary); background: var(--color-surface); }
.oto-aanbieder-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.oto-aanbieder-naam { font-weight: 600; font-size: var(--text-sm); color: var(--color-text); }
.oto-aanbieder-niveau { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-faint); white-space: nowrap; }
.oto-aanbieder-rol { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.5; margin: 4px 0 5px; }
.oto-aanbieder-link { font-family: var(--font-mono); font-size: 0.6rem; color: var(--color-primary); }

/* --- Documentatie per regio -------------------------------------------- */
.rd-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.rd-toggle { flex: none; }
.rd-search { flex: 1; min-width: 160px; background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text); border-radius: var(--radius-sm); padding: 7px 10px; font-family: var(--font-body); font-size: var(--text-sm); outline: none; }
.rd-search:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.rd-count { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: var(--space-2); }
.rd-cards { display: flex; flex-direction: column; gap: 6px; }
.rd-card { border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface-2); padding: var(--space-2) var(--space-3); }
.rd-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: 5px; }
.rd-naam { font-weight: 600; font-size: var(--text-sm); }
.rd-prov { font-size: 0.62rem; color: var(--color-text-faint); white-space: nowrap; }
.rd-links { display: flex; flex-wrap: wrap; gap: 5px; }
.rd-links a { font-family: var(--font-mono); font-size: 0.62rem; color: var(--color-primary); text-decoration: none; background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: var(--radius-sm); padding: 3px 8px; transition: all 140ms; }
.rd-links a:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }

/* ==========================================================================
   Loading overlay + tour
   ========================================================================== */
.loading-overlay { position: absolute; inset: 0; background: var(--overlay-bg); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.loading-overlay[hidden] { display: none; }
.loading-card { background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); text-align: center; box-shadow: var(--shadow-lg); max-width: 340px; }
.loading-spinner { width: 32px; height: 32px; border: 3px solid var(--color-border-strong); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.9s linear infinite; margin: 0 auto var(--space-3); }
.loading-title { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--color-text); margin-bottom: 4px; letter-spacing: 0.03em; }
.loading-sub { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.5; }

.tour-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.tour-overlay[hidden] { display: none; }
.tour-card { background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); max-width: 460px; box-shadow: var(--shadow-lg); }
.tour-step { font-size: var(--text-sm); line-height: 1.6; color: var(--color-text); margin-bottom: var(--space-4); }
.tour-step strong { color: var(--color-primary); }
.tour-actions { display: flex; justify-content: flex-end; gap: var(--space-3); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) { .layout { grid-template-columns: 400px 1fr; } }
@media (max-width: 1000px) {
  .gebied-field-rol { flex: 0 0 150px; }
  .meta { display: none; }
}
@media (max-width: 900px) {
  body { overflow: auto; }
  .topbar { flex-wrap: wrap; height: auto; padding: var(--space-3); }
  .gebied-form { order: 3; flex-basis: 100%; flex-wrap: wrap; margin: var(--space-2) 0 0; }
  .layout { grid-template-columns: 1fr; height: auto; }
  .panel-left { border-right: none; border-bottom: 1px solid var(--color-border); max-height: 60vh; }
  .panel-right { height: 80vh; }
}