/* ============================================================
   App layout: sidebar + topbar + content
   ============================================================ */
.norma-app {
  display: grid;
  grid-template-columns: var(--sidebar-w, 180px) 1fr;
  height: 100vh;
  height: 100dvh;   /* iOS Safari: 100vh rekent de adresbalk mee → schema viel weg */
  overflow: hidden;
}
.norma-app.is-collapsed { grid-template-columns: 56px 1fr; }
.norma-app.topbar-only  { grid-template-columns: 1fr; }

.norma-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg);
}

/* ============================================================
   Sidebar
   ============================================================ */
.norma-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 14px 10px 12px;
  gap: 12px;
}

.norma-sidebar-top { padding: 4px 6px 6px; display: flex; flex-direction: column; gap: 14px; }
.norma-new-btn {
  display: flex; align-items: center; gap: 8px;
  min-height: 38px;
  width: 100%;
  padding: 9px 12px;
  background: var(--c-chambray);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, transform .08s;
}
.norma-new-btn:hover { background: var(--c-chambray-600); }
.norma-new-btn:active { transform: translateY(0.5px); }
.norma-new-btn .kbd {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85);
  font-size: 10px;
}
/* ── Ingeklapte sidebar: alle iconen exact 36×36, gecentreerd ── */
.norma-sidebar.is-collapsed { padding: 14px 10px 12px; }
.norma-sidebar.is-collapsed .norma-sidebar-top { padding: 0; align-items: center; gap: 8px; }
.norma-sidebar.is-collapsed .norma-logo { flex-direction: column; align-items: center; gap: 8px; }
.norma-sidebar.is-collapsed .norma-logo-mark { width: 36px; height: 36px; border-radius: 8px; }
.norma-sidebar.is-collapsed .norma-logo-mark svg { width: 22px; height: 22px; }
.norma-sidebar.is-collapsed .norma-new-collapsed { width: 36px; height: 36px; }
.norma-sidebar.is-collapsed .norma-nav { align-items: center; gap: 4px; }
.norma-logo { display: flex; align-items: center; gap: 10px; }
.norma-logo-mark {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 6px;
  flex-shrink: 0;
}
.norma-logo-text {
  font-family: var(--ff-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}
.norma-logo-sub { font-size: 10px; color: var(--ink-3); font-family: var(--ff-mono); margin-top: 2px; }

.norma-sidebar-nav { display: flex; flex-direction: column; gap: 1px; }
.norma-sidebar-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }

.norma-nav-item {
  display: flex; align-items: center; gap: 10px;
  height: 32px; padding: 0 10px;
  border: none; background: transparent;
  border-radius: 6px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.norma-nav-item:hover { background: var(--surface-2); color: var(--ink); }
.norma-nav-item.is-disabled,
.norma-nav-item:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.norma-nav-item.is-disabled:hover { background: transparent; color: var(--ink-3); }
.norma-nav-item.is-active {
  background: var(--c-tussock-50);
  color: #6B5500;
  box-shadow: inset 2px 0 0 var(--c-tussock);
}
.norma-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.norma-nav-item.is-disabled .norma-nav-badge { display: none; }
.norma-nav-item.is-disabled:hover .norma-nav-badge { display: inline-flex; }
.norma-nav-badge {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--c-chambray);
  color: white;
}
.norma-sidebar.is-collapsed .norma-nav-item { justify-content: center; padding: 0; width: 36px; height: 36px; border-radius: 8px; }

.norma-user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.norma-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-chambray);
  color: white;
  font-size: 11px;
  font-weight: 600;
  display: grid; place-items: center;
  flex-shrink: 0;
  font-family: var(--ff-mono);
}
.norma-avatar.sm { width: 22px; height: 22px; font-size: 10px; }
.norma-avatar.xs { width: 18px; height: 18px; font-size: 9px; }

/* ── Zijbalk navy: samen met de kopbalk één donker kader, de werkruimte blijft licht. ── */
.norma-sidebar { background: #0B1B33; border-right-color: #0B1B33; }
.norma-sidebar .norma-logo-text { color: #fff; }
/* Logo-band op de hoogte van de topbalk: samen één doorlopende kopbalk (kleuren: zie Donkerblauwe kopbalk onderaan). */
.norma-sidebar .norma-logo { height: 60px; margin: -18px -17px 0 -16px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.norma-sidebar.is-collapsed .norma-logo { margin: -14px -11px 0 -10px; padding: 0; justify-content: center; align-self: stretch; }
.norma-sidebar .norma-new-btn, .norma-sidebar .norma-nav-item.norma-new-collapsed { background: #E9A800; color: #0B1B33; }
.norma-sidebar .norma-new-btn:hover, .norma-sidebar .norma-nav-item.norma-new-collapsed:hover { background: #F2B705; color: #0B1B33; }
.norma-sidebar .norma-nav-item { color: #A9BCD6; }
.norma-sidebar .norma-nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.norma-sidebar .norma-nav-item.is-disabled, .norma-sidebar .norma-nav-item.is-disabled:hover { background: transparent; color: rgba(169,188,214,.45); }
.norma-sidebar .norma-nav-item.is-active { background: rgba(255,255,255,.10); color: #fff; box-shadow: inset 2px 0 0 #E9A800; }
.norma-sidebar .norma-nav-badge { background: rgba(255,255,255,.10); color: #A9BCD6; }
.norma-sidebar .norma-user { border-top-color: rgba(255,255,255,.12); }
.norma-sidebar .norma-user-info { color: #fff; }
.norma-sidebar .norma-logout-btn { color: #A9BCD6; }
/* Instellingen en profiel staan op het bureaublad rechts in de topbalk; in de zijbalk alleen op de telefoon. */
.norma-sidebar-account { display: none; }
.norma-topbar-account { display: flex; align-items: center; gap: 6px; margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--line); }
.norma-topbar-account .norma-user { border-top: 0; margin: 0; padding: 0 0 0 4px; }
.norma-user-info { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; line-height: 1.2; }
.norma-user-info .dc-badge-link, .norma-user-info .up-sidebar-btn { margin-top: 0; }
/* Profielafbeelding kiezen: in de topbalk klapt het venster onder de avatar open. */
.norma-topbar-account .avatar-pop { position: absolute; top: calc(100% + 12px); right: 0; left: auto; bottom: auto; }
.norma-topbar-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--c-chambray); cursor: pointer; }
.norma-topbar-icon:hover { background: var(--surface-2); color: var(--c-chambray-600); }
.norma-sidebar .norma-logout-btn:hover { background: rgba(255,255,255,.08); color: #fff; }

.norma-editor .norma-outline { background: #fff; border-right-color: #DCE3EC; }
.norma-outline .norma-outline-head { background: #fff; }
.norma-outline .norma-outline-row:hover { background: rgba(19,41,75,.06); }
.norma-outline .norma-outline-row.is-active { background: #EEF2F8; box-shadow: none; }
/* ============================================================
   Topbar
   ============================================================ */
.norma-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  min-height: 60px;
}
.norma-crumb { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); font-family: var(--ff-mono); }
.norma-h1 { margin: 2px 0 0; font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.norma-crumbline { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 16px; line-height: 1.2; color: var(--ink-3); white-space: nowrap; }
.norma-crumbline > span { flex: 0 4 auto; min-width: 24px; overflow: hidden; text-overflow: ellipsis; } /* opdrachtgever/nummer korten eerst in */
.norma-crumbline .norma-h1 { margin: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }

.norma-topbar-search {
  display: flex; align-items: center; gap: 8px;
  height: 34px;
  flex: 0 1 380px;
  padding: 0 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.norma-topbar-search:focus-within { border-color: var(--c-chambray); background: var(--surface); }
.norma-search-input { border: none; background: transparent; flex: 1; min-width: 0; outline: none; font-size: 13px; }
/* Zoekbalk in de kopbalk (projecten + uitleg). */
.norma-zoek { position: relative; flex: 1 1 320px; max-width: 760px; min-width: 150px; margin-left: auto; }
.norma-topbar.is-editor .norma-zoek { margin-left: 0; } /* begint op de lijn van het schema */
/* In het schema is de titel even breed als het overzicht: alleen de projectnaam (opdrachtgever en nummer in de tooltip). */
.norma-topbar.is-editor .norma-crumbline > span, .norma-topbar.is-editor .norma-crumbline > svg { display: none; }
.norma-zoek .norma-topbar-search { width: 100%; color: var(--ink-3); }
.norma-zoek-catch { position: fixed; inset: 0; z-index: 60; }
.norma-zoek-pop { position: absolute; top: calc(100% + 6px); left: 0; width: max(100%, 420px); z-index: 61; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-4); box-shadow: var(--sh-3); padding: 6px; max-height: 70vh; overflow: auto; }
.norma-zoek-item { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; font: inherit; color: var(--ink); }
.norma-zoek-item.is-actief { background: var(--surface-2); }
.norma-zoek-soort { font-size: 10.5px; font-weight: 600; color: var(--c-chambray); background: var(--c-chambray-50); border-radius: 5px; padding: 2px 6px; align-self: center; }
.norma-zoek-titel { font-weight: 600; font-size: 13px; align-self: center; }
.norma-zoek-tekst { grid-column: 2; font-size: 12px; color: var(--ink-3); line-height: 1.45; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.norma-zoek-tekst.is-open { display: block; }
.norma-zoek-leeg { padding: 12px; font-size: 12.5px; color: var(--ink-3); }

.norma-feedback { position: relative; }
.norma-exportmenu { position: relative; }
.norma-exportmenu-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 4000;
  width: 300px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 10px 32px rgba(20, 22, 30, 0.14);
  padding: 5px; display: flex; flex-direction: column; gap: 2px;
}
.norma-exportmenu-pop button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; padding: 9px 11px; border: none; background: transparent;
  border-radius: 7px; cursor: pointer; text-align: left; font: inherit; color: var(--ink);
}
.norma-exportmenu-pop button:hover { background: var(--surface-2); }
.norma-exportmenu-pop button b { font-size: 12.5px; }
.norma-exportmenu-pop button span { font-size: 11px; color: var(--ink-3); }
.norma-feedback-btn { background: #F5C400; border-color: #F5C400; color: var(--ink); }
.norma-feedback-btn:hover { background: #E0B300; border-color: #E0B300; }
.norma-feedback-overlay { position: fixed; inset: 0; z-index: 60; background: transparent; }
.norma-feedback-pop {
  position: absolute; top: 38px; right: 0; z-index: 61;
  width: 320px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,0.14); padding: 12px;
}
.norma-feedback-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px;
}
.norma-feedback-sub { font-size: 12px; color: var(--ink-3); margin-bottom: 10px; }
.norma-feedback-textarea {
  width: 100%; resize: vertical; min-height: 80px;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px;
  font-size: 12.5px; font-family: inherit; outline: none; box-sizing: border-box;
}
.norma-feedback-textarea:focus { border-color: var(--c-chambray); box-shadow: 0 0 0 3px var(--c-chambray-50); }
.norma-feedback-sent { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ok); padding: 10px 0; }
.norma-feedback-err { font-size: 11.5px; color: var(--err); margin-top: 6px; }
.icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: none; background: transparent;
  color: var(--ink-3); border-radius: 6px; cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.chip {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  border-radius: 999px; padding: 5px 10px; font-size: 11.5px; cursor: pointer;
  white-space: nowrap;
}
.chip.is-on { background: var(--c-chambray-50); border-color: var(--c-chambray); color: var(--c-chambray); }

.norma-calc-status {
  display: flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px;
  background: var(--ok-50);
  color: var(--ok);
  border-radius: var(--r-2);
  font-size: 12px;
}
.norma-calc-status .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.dot.ok   { background: var(--ok); }
.dot.warn { background: var(--c-tussock); }
.dot.err  { background: var(--err); }

/* ============================================================
   Editor
   ============================================================ */
.norma-editor {
  flex: 1;
  display: grid;
  grid-template-columns: 224px 1fr;
  min-height: 0;
  overflow: hidden;
}
.norma-col-resizer {
  cursor: col-resize;
  background: var(--line);
  transition: background .12s;
  position: relative;
}
.norma-col-resizer:hover, .norma-col-resizer:active { background: var(--c-chambray); }
.norma-col-resizer::after { content: ""; position: absolute; inset: 0 -4px; }

/* Library rail */
.norma-lib {
  display: flex; flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--line);
  min-height: 0;
}
.norma-lib-tabs { display: flex; padding: 8px 8px 0; gap: 2px; border-bottom: 1px solid var(--line); }
.norma-lib-tab {
  background: transparent;
  border: none;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--ink-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.norma-lib-tab.is-active { color: var(--ink); border-bottom-color: var(--c-chambray); font-weight: 500; }

.norma-lib-search {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 12px 4px;
  padding: 0 10px;
  height: 28px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.norma-lib-input { border: none; background: transparent; outline: none; font-size: 12px; flex: 1; min-width: 0; }

.norma-lib-group { padding: 6px 10px 10px; }
.norma-lib-grouptitle {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 8px 4px 6px;
}
.norma-lib-items { display: flex; flex-direction: column; gap: 1px; }
.norma-lib-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 6px;
  border: none;
  background: transparent;
  border-radius: 5px;
  text-align: left;
  cursor: grab;
  width: 100%;
}
.norma-lib-item:hover { background: var(--surface-2); }
.norma-lib-item:active { cursor: grabbing; }
.norma-lib-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--surface-sunken);
  border-radius: 4px;
  color: var(--ink-2);
}
.norma-lib-label { font-size: 12.5px; }
.norma-lib-hint { font-size: 10px; color: var(--ink-3); }

.norma-lib-foot {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

/* Canvas */
.norma-canvas {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--surface-sunken);
}
/* Zoom zwevend rechtsonder op het schema (de aparte balk boven het schema is weg). */
.norma-canvas { position: relative; }
.norma-zoom-float { position: absolute; right: 22px; bottom: 44px; z-index: 5; display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 14px rgba(11,27,51,.10); }
.kb-sheet .analysis-undo { display: none; } /* telefoon: analysepaneel zonder ongedaan/opnieuw */
.analysis-undo { flex: none; padding-right: 10px; margin-right: 2px; border-right: 1px solid var(--line); }
.norma-outline-head .norma-doc-title { min-width: 0; font-size: 13px; background: none; border: 0; padding: 0; height: auto; gap: 8px; }
.norma-outline-head .norma-doc-title-text { font-weight: 600; }
.norma-doc-title {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px;
  background: var(--bg);
  border-radius: var(--r-2);
  font-size: 13px;
}
.norma-segment {
  display: flex;
  background: var(--bg);
  padding: 2px;
  border-radius: var(--r-2);
  border: 1px solid var(--line-soft);
}
.norma-segment.sm { padding: 1px; }
.norma-segment button {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px;
  font-size: 11.5px;
  background: transparent;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  color: var(--ink-2);
}
.norma-segment button:hover { color: var(--ink); }
.norma-segment button.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--sh-1);
}

.norma-canvas-area {
  flex: 1;
  overflow: auto;
  scrollbar-gutter: stable; /* voorkomt zoom-oscillatie: scrollbar aan/uit verandert de breedte niet meer */
  position: relative;
}

/* Centreren met auto-marges i.p.v. justify-content: center — een schema dat breder is dan het
   vlak valt dan niet links buiten het scrollbare gebied. */
.norma-diagram-wrap { padding: 24px; min-width: min-content; display: flex; justify-content: flex-start; align-items: flex-start; }
.norma-diagram { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); border-radius: 4px; display: block; margin: 0 auto; flex: none; }

/* SVG text classes */
.dg-label        { font-family: var(--ff-mono); font-size: 9.5px; fill: var(--ink-2); }
.dg-label-sub    { font-family: var(--ff-mono); font-size: 9px;   fill: var(--ink-3); }
.dg-label-strong { font-family: var(--ff-mono); font-size: 10.5px; fill: var(--ink);  font-weight: 600; }
.dg-tag          { font-family: var(--ff-mono); font-size: 11px;  fill: var(--c-chambray); font-weight: 600; text-anchor: middle; }
.dg-tag-sub      { font-family: var(--ff-mono); font-size: 9px;   fill: var(--ink-3); text-anchor: middle; }
.dg-status-inline { font-family: var(--ff-mono); font-size: 8.5px; font-weight: 600; }
.dg-chip-text    { font-family: var(--ff-sans); font-size: 10.5px; font-weight: 600; }
.dg-legend       { font-family: var(--ff-mono); font-size: 9px; fill: var(--ink-4); letter-spacing: 0.06em; }

.dg-feeder { transition: opacity .15s; }
.dg-feeder.is-selected text.dg-label-strong { fill: var(--c-chambray); }

/* Status bar (bottom of canvas) */
.norma-status-bar {
  display: flex; align-items: center; gap: 16px;
  padding: 6px 16px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-2);
  min-height: 32px;
}

/* ============================================================
   Inspector
   ============================================================ */
.norma-inspector {
  display: flex; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line);
  min-height: 0;
}

/* Inspector als popup (rechter kolom verwijderd — klik opent popup) */
.np-inspector-pop {
  width: min(440px, 94vw);
  height: auto;
  max-height: 90vh;
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,0.32);
  display: flex; flex-direction: column;
  animation: np-pop .2s cubic-bezier(.2,.9,.3,1.1);
}
.np-inspector-pop .norma-inspector {
  border-left: none;
  flex: 0 1 auto; min-height: 0;
}
/* Compacte variant in de popup: alles net wat strakker zodat bv. de
   trafo-popup zonder scrollen past. */
.np-inspector-pop .norma-inspector-header { padding: 8px 14px; }
.np-inspector-pop .norma-section { padding: 8px 14px; }
.np-inspector-pop .norma-section-title { margin-bottom: 5px; }
.np-inspector-pop .norma-section-grid { gap: 5px 10px; }
.np-inspector-pop .nf-input, .np-inspector-pop .nf-seg { height: 24px; }
.np-inspector-pop .nf-field { gap: 2px; }
.np-inspector-pop .nf-stat { padding: 4px 8px; }
.np-inspector-pop .nf-stat-value { font-size: 13px; }
.np-inspector-pop .insp-foot { padding: 8px 14px 10px; margin-top: 0; }
.np-inspector-pop .norma-fields { padding: 2px 0 8px; }
.norma-inspector-header {
  display: flex; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.norma-inspector-tag {
  display: inline-flex; align-items: center; justify-content: center;
  height: 22px; padding: 0 8px;
  background: var(--c-chambray);
  color: white;
  border-radius: 4px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
}
.norma-inspector-title { font-size: 15px; font-weight: 600; line-height: 1.25; }

.norma-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--line);
}
.norma-banner.ok   { background: var(--ok-50);   color: var(--ok); }
.norma-banner.warn { background: var(--warn-50); color: var(--c-tussock-600); }
.norma-banner.err  { background: var(--err-50);  color: var(--err); }
.norma-banner b { font-weight: 600; }

.norma-tabs {
  display: flex;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.norma-tab {
  position: relative;
  background: transparent;
  border: none;
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--ink-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.norma-tab:hover { color: var(--ink); }
.norma-tab.is-active { color: var(--c-chambray); border-bottom-color: var(--c-chambray); font-weight: 500; }
.norma-tab-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-tussock); margin-right: 4px; vertical-align: middle;
}

.norma-inspector-body { flex: 1; overflow-y: auto; }
.bus-templates { display: flex; flex-wrap: wrap; gap: 6px; }
.bus-tmpl-btn {
  font: inherit; font-size: 11px; font-weight: 500;
  padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); cursor: pointer; color: var(--ink-2);
  transition: background .12s, border-color .12s;
}
.bus-tmpl-btn:hover { background: var(--c-chambray-50); border-color: var(--c-chambray); color: var(--c-chambray); }
.norma-inspector-footer {
  display: flex; gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

.norma-fields { padding: 4px 0 16px; }
.norma-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.norma-section:last-child { border-bottom: none; }
.norma-section-title {
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 10px; font-weight: 500;
}
.norma-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.norma-metric { display: flex; flex-direction: column; gap: 2px; }
.norma-metric.is-big { grid-column: 1 / -1; }
.norma-metric-label { font-size: 11px; color: var(--ink-3); }
.norma-metric-value { font-size: 14px; font-weight: 600; line-height: 1.2; }
.norma-metric.is-big .norma-metric-value { font-size: 22px; }
.norma-metric-unit { font-size: 11px; color: var(--ink-3); font-family: var(--ff-mono); margin-left: 2px; }
.norma-metric.is-ok .norma-metric-value { color: var(--ok); }
.norma-metric.is-warn .norma-metric-value { color: var(--c-tussock-600); }
.norma-metric.is-err .norma-metric-value { color: var(--err); }

.norma-utilbar { display: flex; flex-direction: column; gap: 4px; }
.norma-bar-track {
  position: relative;
  height: 6px;
  background: var(--surface-sunken);
  border-radius: 3px;
  overflow: visible;
}
.norma-bar-track.sm { height: 4px; }
.norma-bar-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: var(--c-chambray);
  border-radius: 3px;
  transition: width .3s;
}
.norma-bar-marker {
  position: absolute; top: -2px; bottom: -2px;
  width: 1.5px;
  background: var(--ink-2);
  transform: translateX(-1px);
}
.norma-bar-cap {
  position: absolute; right: -2px; top: 8px;
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--ink-3);
}

.norma-fineprint { font-size: 11px; color: var(--ink-3); grid-column: 1 / -1; margin-top: 4px; }

.norma-check { display: flex; align-items: center; gap: 8px; padding: 6px 0; }

.norma-edit { display: flex; flex-direction: column; gap: 2px; }
.norma-edit-label { font-size: 11px; color: var(--ink-3); }
.norma-edit-value {
  font-size: 13px;
  padding: 5px 8px;
  background: var(--surface-sunken);
  border-radius: 4px;
  border: 1px solid transparent;
}
.norma-edit-value:hover { background: var(--surface); border-color: var(--line); cursor: text; }

/* Tip card */
.norma-tip-card {
  background: linear-gradient(180deg, var(--warn-50), var(--surface));
  border: 1px solid var(--c-tussock);
  border-radius: var(--r-3);
  padding: 14px 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--sh-1);
}
.norma-tip-icon {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: var(--c-tussock);
  color: white;
  display: grid; place-items: center;
  font-size: 17px;
  font-weight: 600;
  font-family: var(--ff-mono);
}
.norma-tip-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}
.norma-tip-side {
  padding: 10px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
}
.norma-tip-side.is-new {
  background: var(--surface);
  border-color: var(--c-tussock);
  box-shadow: 0 0 0 3px var(--warn-50);
}
.norma-tip-note {
  margin: 0;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
  padding: 8px 10px;
  background: var(--surface);
  border-left: 3px solid var(--c-tussock);
  border-radius: 0 4px 4px 0;
}
.norma-tip-cost {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: center;
  padding-top: 4px;
}
.norma-tip-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 4px;
}

/* Empty inspector */
.norma-empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 32px;
  text-align: center;
  gap: 8px;
}
.norma-empty-title { font-size: 14px; font-weight: 600; margin-top: 8px; }
.norma-empty-text { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; max-width: 240px; }

/* ============================================================
   Other screens
   ============================================================ */
.norma-screen { flex: 1; min-height: 0; overflow: auto; background: var(--bg); }
.norma-screen-pad { padding: 24px 28px 60px; max-width: 1400px; }
.norma-h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }

.norma-quick-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.norma-stat { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.norma-stat-value { font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }

.norma-info-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.norma-info-card { padding: 14px 16px; }
.norma-mini-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.norma-mini-list li { display: flex; align-items: center; gap: 8px; }

/* Reports */
.norma-report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
}
.norma-report-doc { padding: 0; background: var(--surface-sunken); overflow: hidden; }
.norma-report-page {
  background: white;
  padding: 28px 32px 32px;
  margin: 20px;
  box-shadow: var(--sh-2);
  border-radius: 2px;
  color: #1a1814;
}
.norma-report-head { display: flex; justify-content: space-between; align-items: flex-start; }
.norma-toc {
  list-style: none; padding: 0; margin: 8px 0 0;
  font-size: 12.5px; display: flex; flex-direction: column; gap: 2px;
}
.norma-toc li { padding: 5px 8px; border-radius: 4px; cursor: pointer; color: var(--ink-2); }
.norma-toc li:hover { background: var(--surface-2); }
.norma-toc li.is-active { background: var(--c-chambray-50); color: var(--c-chambray); font-weight: 500; }

.norma-radio {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: inline-grid; place-items: center;
  flex-shrink: 0;
}
.norma-radio.is-on { border-color: var(--c-chambray); }
.norma-radio.is-on::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c-chambray);
}

.norma-toggle {
  width: 30px; height: 18px;
  border-radius: 999px;
  background: var(--line-strong);
  position: relative;
  display: inline-block;
  transition: background .15s;
}
.norma-toggle span {
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: white;
  transition: left .15s;
  box-shadow: var(--sh-1);
}
.norma-toggle.is-on { background: var(--c-chambray); }
.norma-toggle.is-on span { left: 14px; }

/* Library cards */
.norma-lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.norma-lib-card {
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.norma-lib-card:hover { border-color: var(--c-chambray); box-shadow: var(--sh-2); }

/* ============================================================
   Form primitives (Inspector)
   ============================================================ */
.nf-field {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.insp-row3 { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px 10px; }
.insp-row3 .nf-field { min-width: 0; }
.nf-select select.nf-input-el { appearance: none; -webkit-appearance: none; padding-right: 6px; text-overflow: ellipsis; }
.nf-field.is-full { grid-column: 1 / -1; }
.nf-field-head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.nf-field-label { font-size: 11px; color: var(--ink-3); font-weight: 500; }
.nf-info { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; border-radius: 50%; color: var(--ink-4, #9aa0a8); cursor: help; outline: none; transition: color .12s; }
.nf-info:hover, .nf-info:focus-visible { color: var(--c-chambray, #3b4a7a); }
.nf-info.is-warn, .nf-info.is-warn:hover { color: var(--warn, #b7791f); }
.nf-info:focus-visible { box-shadow: 0 0 0 2px var(--c-chambray-50, #e6e9f3); }
.nf-tip { position: fixed; z-index: 100000; transform: translate(-50%, 0); max-width: 280px; padding: 7px 10px; border-radius: 6px; background: #1f2430; color: #f4f5f7; font: 400 11.5px/1.45 var(--ff-sans, system-ui, sans-serif); letter-spacing: 0; text-transform: none; white-space: pre-line; box-shadow: 0 6px 18px rgba(16, 20, 30, .22); pointer-events: none; }
.nf-tip.is-above { transform: translate(-50%, -100%); }
.nf-field-suffix { font-size: 10.5px; color: var(--ink-4); font-family: var(--ff-mono); }
.nf-field-hint { font-size: 10.5px; color: var(--ink-4); line-height: 1.4; }
.nf-field-hint.is-err { color: var(--err); }

.nf-input {
  display: flex; align-items: center;
  height: 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 8px;
  gap: 6px;
  transition: border-color .1s, background .1s;
  position: relative;
}
.nf-input:hover { border-color: var(--line-strong); }
.nf-input:focus-within { border-color: var(--c-chambray); background: var(--surface); box-shadow: 0 0 0 3px var(--c-chambray-50); }
.nf-input.is-disabled {
  background: var(--surface-2);
  border-style: dashed;
  opacity: 0.85;
}
.nf-input.is-disabled:hover { border-color: var(--line); }
.nf-input.is-disabled .nf-input-el { color: var(--ink-2); cursor: not-allowed; }
.nf-input-el {
  flex: 1; min-width: 0;
  border: none; background: transparent;
  outline: none;
  font-size: 13px;
  height: 100%;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}
.nf-input-el::-webkit-outer-spin-button, .nf-input-el::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.nf-input-unit {
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--ff-mono);
  white-space: nowrap;
}

.nf-select { padding-right: 24px; cursor: pointer; }
.nf-select-caret {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
}

.nf-seg {
  display: flex;
  background: var(--surface-sunken);
  border-radius: 4px;
  padding: 2px;
  height: 30px;
}
.nf-seg button {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s;
  font-family: var(--ff-mono);
}
.nf-seg button:hover { color: var(--ink); }
.nf-seg button.is-on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--sh-1);
  font-weight: 500;
}
.nf-seg button.is-disabled { opacity: 0.4; cursor: not-allowed; }
.nf-seg button.is-disabled:hover { color: inherit; }

.nf-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  background: var(--surface-sunken);
  border-radius: 4px;
  min-width: 0;
}
.nf-stat.is-big { grid-column: span 2; }
.nf-stat-label { font-size: 10.5px; color: var(--ink-3); }
.nf-stat-value { font-size: 16px; font-weight: 600; line-height: 1.15; }
.nf-stat-unit  { font-size: 11px; color: var(--ink-3); font-family: var(--ff-mono); font-weight: 400; }
.nf-stat.is-ok   .nf-stat-value { color: var(--ok); }
.nf-stat.is-warn .nf-stat-value { color: var(--c-tussock-600); }
.nf-stat.is-err  .nf-stat-value { color: var(--err); }
.nf-stat.is-info .nf-stat-value { color: var(--info); }

.nf-computed {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px;
  background: var(--surface-sunken);
  border-radius: 4px;
  font-size: 12px;
  grid-column: 1 / -1;
}
.nf-computed-label { color: var(--ink-3); }
.nf-computed-value { font-weight: 600; }
.nf-computed.is-ok   .nf-computed-value { color: var(--ok); }
.nf-computed.is-warn .nf-computed-value { color: var(--c-tussock-600); }
.nf-computed.is-err  .nf-computed-value { color: var(--err); }
.nf-computed.is-info .nf-computed-value { color: var(--info); }

/* ============================================================
   Collapsible sections in inspector
   ============================================================ */
.norma-collapsible {
  border-bottom: 1px solid var(--line-soft);
}
.norma-collapsible:last-of-type { border-bottom: none; }
.norma-collapsible-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}
.norma-collapsible-head:hover { background: var(--surface-2); }
.norma-collapsible-icon {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  background: var(--surface-sunken);
  border-radius: 3px;
  color: var(--ink-2);
}
.norma-collapsible-title { flex: 1; }
.norma-collapsible.is-open .norma-collapsible-head { border-bottom: 1px solid var(--line-soft); padding-bottom: 10px; }

/* ============================================================
   NEN citation chip + upload card
   ============================================================ */
.norma-cite {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10.5px;
  color: var(--c-chambray);
  background: var(--c-chambray-50);
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
  margin-right: 3px;
  transition: background .1s;
}
.norma-cite:hover {
  background: var(--c-chambray-100);
}

.norma-cite-row {
  display: flex; align-items: center; gap: 4px;
  padding: 10px 16px;
  flex-wrap: wrap;
}

.norma-nen-upload {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--c-chambray);
  background: var(--c-chambray-50);
  border-radius: 6px;
}

/* ============================================================
   Schema outline (replaces library rail)
   ============================================================ */
.norma-outline {
  display: flex; flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--line);
  min-height: 0;
  min-width: 0;
}
.norma-outline-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--line);
  gap: 8px;
}

.norma-outline-tree {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 0 8px;
}

.norma-outline-group {
  padding: 8px 8px 4px;
}
.norma-outline-grouplabel {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  padding: 6px 8px 4px;
}
.norma-outline-grouplabel.row { align-items: center; justify-content: space-between; gap: 8px; padding-right: 10px; }
.norma-outline-grouplabel.row > span { line-height: 1.3; }

.norma-outline-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink);
  font-size: 12.5px;
  text-align: left;
  position: relative;
}
.norma-outline-row:hover { background: var(--surface-2); }
.norma-outline-row.is-active {
  background: var(--c-chambray-50);
  color: var(--c-chambray);
}
.norma-outline-row.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 5px; bottom: 5px;
  width: 2px;
  background: var(--c-chambray);
  border-radius: 1px;
}

.norma-outline-rowlabel {
  flex: 1; min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.norma-outline-rowmeta {
  font-size: 10.5px;
  color: var(--ink-3);
  flex-shrink: 0;
}
.norma-outline-tag {
  font-size: 10.5px;
  color: var(--ink-3);
  font-weight: 600;
  min-width: 26px;
}
.norma-outline-row.is-active .norma-outline-tag,
.norma-outline-row.is-active .norma-outline-rowmeta {
  color: var(--c-chambray);
  opacity: 0.85;
}
.norma-outline-status {
  width: 6px; height: 6px;
  flex-shrink: 0;
}

.norma-outline-feeder {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  position: relative;
}
.norma-outline-feeder.is-dragging { opacity: 0.45; }
.norma-outline-feeder.is-drop { box-shadow: inset 0 2px 0 var(--c-chambray); }
.norma-outline-grip {
  display: flex; align-items: center; justify-content: center;
  width: 16px; flex: none; cursor: grab; color: var(--ink-4);
  opacity: 0; transition: opacity .12s;
}
.norma-outline-feeder:hover .norma-outline-grip,
.norma-outline-feeder.is-active .norma-outline-grip { opacity: 0.7; }
.norma-outline-grip:hover { color: var(--c-chambray); opacity: 1; }
.norma-outline-grip:active { cursor: grabbing; }
.norma-outline-feeder .norma-outline-row {
  padding-right: 4px;
  min-width: 0;
  flex: 1;
}
.norma-outline-actions {
  display: flex; gap: 1px;
  flex: none;
  padding-right: 4px;
}
.norma-outline-feeder:hover .norma-outline-actions,
.norma-outline-nestedrow:hover .norma-outline-actions,
.norma-outline-nestedrow.is-active .norma-outline-actions,
.norma-outline-feeder.is-active .norma-outline-actions { opacity: 1; }
.norma-outline-actions { opacity: 0.4; transition: opacity .12s; }
/* Groepsknoppen (omhoog/omlaag/kopie/weg) alleen bij hover over de naam heen, zodat de groepsnaam de hele breedte krijgt. */
.norma-outline-feeder > .norma-outline-actions { position: absolute; right: 0; top: 0; bottom: 0; align-items: center; padding-left: 18px; opacity: 0; pointer-events: none; background: linear-gradient(90deg, rgba(233,238,245,0), #E9EEF5 16px); border-radius: 0 6px 6px 0; }
.norma-outline-feeder:hover > .norma-outline-actions, .norma-outline-feeder:focus-within > .norma-outline-actions { opacity: 1; pointer-events: auto; }
.norma-outline .norma-outline-feeder:hover > .norma-outline-row { background: #E9EEF5; }

.norma-outline-iconbtn {
  width: 18px; height: 18px;
  flex: none;
  display: grid; place-items: center;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: var(--ink-3);
  cursor: pointer;
}
.norma-outline-iconbtn:hover { background: var(--surface-sunken); color: var(--ink); }
.norma-outline-iconbtn:disabled { opacity: 0.3; cursor: default; }
.norma-outline-iconbtn:disabled:hover { background: transparent; }
.norma-outline-iconbtn.is-danger:hover { background: var(--err-50); color: var(--err); }

.norma-outline-addrow {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  min-height: 30px;
  padding: 7px 10px;
  margin-top: 6px;
  background: transparent;
  border: 1px dashed var(--line-strong);
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}
.norma-outline-addrow:hover { background: var(--c-chambray-50); border-color: var(--c-chambray); color: var(--c-chambray); border-style: solid; }

.norma-outline-addbtn {
  width: 22px; height: 22px;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
  color: var(--ink-2);
  padding: 0;
}
.norma-outline-addbtn:hover { background: var(--c-chambray); border-color: var(--c-chambray); color: white; }

.norma-outline-foot {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

/* Inline-editable title */
.norma-doc-title .badge { white-space: nowrap; flex: none; }
.norma-doc-title {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px;
  background: var(--bg);
  border-radius: var(--r-2);
  font-size: 13px;
  max-width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
}
.norma-crumb-btn {
  font: inherit;
  background: transparent;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}
.norma-crumb-btn:hover { color: var(--c-chambray); text-decoration: underline; }

.norma-doc-title-text {
  cursor: text;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: 3px;
  transition: background .1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}
.norma-doc-title-text:hover {
  background: var(--surface-sunken);
  outline: 1px dashed var(--line-strong);
}
.norma-doc-input {
  font: inherit;
  font-weight: 600;
  border: 1px solid var(--c-chambray);
  background: var(--surface);
  border-radius: 3px;
  padding: 2px 6px;
  margin: -3px -7px;
  outline: none;
  min-width: 200px;
  box-shadow: 0 0 0 3px var(--c-chambray-50);
}

/* Subverdeler navigation */
.norma-outline-substub {
  display: flex; align-items: center; gap: 6px;
  margin-left: 36px;
  padding: 4px 8px 8px;
  font-size: 11px;
  color: var(--ink-3);
}
.norma-outline-substub-btn {
  display: inline-flex; align-items: center; gap: 3px;
  background: transparent;
  border: none;
  color: var(--c-chambray);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  padding: 0;
  text-decoration: none;
}
.norma-outline-substub-btn:hover { text-decoration: underline; }

.norma-outline-nested {
  margin-left: 20px;
  padding: 2px 0 6px;
  border-left: 1.5px dashed var(--line);
}
.norma-outline-nestedrow {
  display: flex; align-items: center; gap: 7px;
  width: 100%;
  padding: 5px 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  color: var(--ink-2);
  text-align: left;
}
.norma-outline-nestedrow:hover { background: var(--surface-2); }
.norma-outline-nestedrow.is-active { background: var(--c-chambray-50); color: var(--c-chambray); }
.norma-outline-nestedrow.is-active .norma-outline-tag { color: var(--c-chambray); opacity: 0.85; }
.norma-outline-nested-openbtn { margin: 2px 0 0 14px; font-size: 10.5px; }

/* Terug-balk bovenaan de outline wanneer je in een subverdeler zit */
.norma-outline-backbar {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 9px 14px;
  background: var(--c-chambray-50);
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--c-chambray);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.norma-outline-backbar:hover { background: var(--c-chambray-100, var(--c-chambray-50)); filter: brightness(0.97); }
.norma-outline-backbar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Terug-knop in de canvas-toolbar (breadcrumb) */
.norma-back-btn {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 9px 3px 6px;
  margin-right: 4px;
  background: var(--c-chambray-50);
  border: 1px solid var(--c-chambray);
  border-radius: 4px;
  color: var(--c-chambray);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.norma-back-btn:hover { background: var(--c-chambray); color: #fff; }

/* Subverdeler-blok in de tekening: laat zien dat het klikbaar is / een ander schema opent */
.dg-sub-open:hover .dg-sub-badge circle { r: 9; }

/* Terug-knop in de tekening (links naast de subverdeler-rail) */
.dg-backbtn rect { transition: fill 0.12s ease; }
.dg-backbtn:hover rect { fill: var(--c-chambray); }
.dg-backbtn:hover text, .dg-backbtn:hover path { fill: #fff; stroke: #fff; }

.norma-sub-open {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: var(--c-chambray-50);
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--c-chambray);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.norma-sub-open:hover { background: var(--c-chambray-100); }

/* ============================================================
   Load-type icon picker (inspector)
   ============================================================ */
.ltp-wrap {
  position: relative;
}
.ltp-trigger {
  display: flex; align-items: center; gap: 8px;
  width: 100%; height: 30px;
  padding: 0 8px 0 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  transition: border-color .1s;
}
.ltp-trigger:hover { border-color: var(--line-strong); }
.ltp-trigger-icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: var(--surface-sunken);
  border-radius: 3px;
  color: var(--ink-2);
  flex-shrink: 0;
}
.ltp-backdrop {
  position: fixed; inset: 0; z-index: 10;
}
.ltp-grid {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 6px;
  z-index: 11;
  box-shadow: var(--sh-3);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.ltp-cell {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  padding: 8px 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink-2);
  font-size: 10px;
  text-align: center;
  line-height: 1.2;
  min-height: 56px;
}
.ltp-cell:hover { background: var(--surface-sunken); color: var(--ink); }
.ltp-cell.is-on {
  background: var(--c-chambray-50);
  border-color: var(--c-chambray);
  color: var(--c-chambray);
}
.ltp-cell-label { font-size: 9.5px; }

/* Install-method / cable-config picker */
.im-trigger {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 6px 8px 6px 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  min-height: 44px;
  transition: border-color .1s;
}
.im-trigger:hover { border-color: var(--line-strong); }

/* Outline row icon */
.norma-outline-rowicon {
  display: grid; place-items: center;
  width: 16px; height: 16px;
  color: var(--ink-3);
  flex-shrink: 0;
}
.norma-outline-row.is-active .norma-outline-rowicon { color: var(--c-chambray); }

/* Install-method picker dropdown bits */
.im-trigger-thumb {
  width: 50px; height: 32px;
  display: grid; place-items: center;
  background: var(--surface-sunken);
  border-radius: 3px;
  color: var(--ink-2);
  flex-shrink: 0;
}
.im-grid {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 6px;
  z-index: 11;
  box-shadow: var(--sh-3);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  max-height: 460px;
  overflow-y: auto;
}
.im-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink-2);
  text-align: left;
  font: inherit;
}
.im-cell:hover { background: var(--surface-sunken); color: var(--ink); }
.im-cell.is-on {
  background: var(--c-chambray-50);
  border-color: var(--c-chambray);
  color: var(--c-chambray);
}
.im-cell-thumb {
  width: 64px; height: 40px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 3px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.im-cell-info { min-width: 0; flex: 1; }
.im-cell-label { font-size: 11px; font-weight: 600; }
.im-cell-title { font-size: 11px; color: inherit; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.im-trigger-thumb {
  width: 50px; height: 32px;
  display: grid; place-items: center;
  background: var(--surface-sunken);
  border-radius: 3px;
  color: var(--ink-2);
  flex-shrink: 0;
}

.im-grid {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 6px;
  z-index: 11;
  box-shadow: var(--sh-3);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  max-height: 460px;
  overflow-y: auto;
}
.im-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink-2);
  text-align: left;
  font: inherit;
}
.im-cell:hover { background: var(--surface-sunken); color: var(--ink); }
.im-cell.is-on {
  background: var(--c-chambray-50);
  border-color: var(--c-chambray);
  color: var(--c-chambray);
}
.im-cell-thumb {
  width: 64px; height: 40px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 3px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.im-cell-info { min-width: 0; flex: 1; }
.im-cell-label { font-size: 11px; font-weight: 600; }
.im-cell-title { font-size: 11px; color: inherit; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-clickable { cursor: pointer; }
.dg-clickable .dg-hit { transition: fill .1s; }
/* Feeder: één hover voor de hele groep (smelt, kabel, verbruiker = 1 pop-up) */
.dg-fpart { cursor: pointer; }
.dg-feeder-hit { transition: fill .1s; }
.dg-clickable.is-selected .dg-hit { fill: var(--c-chambray); fill-opacity: 0.06; }
.dg-clickable.is-focus .dg-hit    { fill: var(--c-chambray); fill-opacity: 0.06; }
.dg-tag.is-sel, text.is-sel { fill: var(--c-chambray) !important; }

.dg-feeder-group .dg-feeder-hit { fill: transparent; transition: fill .1s; }
.dg-feeder-group.is-selected .dg-feeder-hit { fill: transparent; }

/* Reorder buttons — visible only on hover/selected */
.dg-reorder { opacity: 0; transition: opacity .12s; }
.dg-feeder-group:hover .dg-reorder,
.dg-reorder.is-visible { opacity: 1; }
.dg-reorder-btn.is-danger:hover rect { fill: var(--err-50); stroke: var(--err); }
.dg-reorder-btn { cursor: pointer; }
.dg-reorder-btn:hover rect { fill: var(--c-chambray-50); stroke: var(--c-chambray); }
.dg-reorder-btn:hover path { stroke: var(--c-chambray); }

/* Subtle section variant */
.norma-section.is-subtle {
  background: var(--surface-2);
}

/* Rek-specificaties (read-only spec list) */
.norma-speclist { display: flex; flex-direction: column; gap: 1px; }
.norma-specrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.norma-specrow:last-child { border-bottom: none; }
.norma-specrow > span { color: var(--ink-3); }
.norma-specrow > b { font-weight: 600; font-family: var(--ff-mono); text-align: right; }
/* Bewerkbare spec-waarde (zelfde lijst-look, maar invulbaar) */
.norma-specrow .spec-edit {
  font-weight: 600; font-family: var(--ff-mono); text-align: right;
  font-size: 12px; color: var(--ink);
  background: transparent; border: 1px solid transparent;
  border-radius: 5px; padding: 3px 6px; width: 58%; min-width: 0;
  transition: border-color .12s, background .12s;
}
.norma-specrow .spec-edit:hover { border-color: var(--line); }
.norma-specrow .spec-edit:focus { border-color: var(--c-chambray); background: var(--surface); outline: none; }
.norma-specrow .spec-edit::placeholder { color: var(--ink-4); font-weight: 400; }

/* ── Controle-overzicht (projectbrede NEN-check) ───────────────── */
.co-overlay { z-index: 70; display: grid; place-items: center; }
.co-modal {
  width: min(800px, 94vw); max-height: 86vh;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-3); box-shadow: var(--shadow-modal, 0 24px 60px rgba(0,0,0,0.28));
  overflow: hidden;
}
.co-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--line);
}
.co-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.ah-wrap { position: relative; display: inline-flex; }
.ah-btn { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-3); cursor: pointer; padding: 0; }
.ah-btn:hover, .ah-btn.is-open { color: var(--c-chambray); border-color: var(--c-chambray); background: var(--c-chambray-50); }
.ah-catch { position: fixed; inset: 0; z-index: 60; background: rgba(20,22,28,.28); }
.ah-pop { position: fixed; z-index: 61; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 480px; max-width: calc(100vw - 24px); max-height: min(60vh, calc(100dvh - 140px)); overflow: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(31,46,85,0.18); padding: 12px 14px 13px; text-align: left; }
.ah-pop-head { display: flex; align-items: flex-start; gap: 10px; }
.ah-pop-title { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 2px; flex: 1; }
.ah-pop-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); cursor: pointer; }
.ah-pop-close:hover { color: var(--ink); border-color: var(--ink-3); }
.ah-pop p { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: var(--ink-2); font-weight: 400; white-space: normal; }
.ah-pop p b { color: var(--ink); }

/* ── Upgrade / pakketten ─────────────────────────────────────── */
.up-modal { position: relative; background: var(--surface); border-radius: 16px; box-shadow: 0 24px 64px rgba(31,46,85,0.28); width: 620px; max-width: 94vw; padding: 28px 28px 18px; }
.up-head { margin-bottom: 20px; display: flex; flex-direction: column; gap: 5px; padding-right: 40px; }
.up-title { font-size: 19px; font-weight: 700; }
.up-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.up-grid-3 { grid-template-columns: repeat(3, 1fr); }
.up-wide { width: 780px; }
.up-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--c-chambray); background: none; border: none; padding: 0; margin-bottom: 6px; cursor: pointer; }
.up-back:hover { text-decoration: underline; }
.up-checkout { display: flex; flex-direction: column; gap: 14px; max-width: 420px; margin: 0 auto; width: 100%; }
.up-order { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.up-order-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); }
.up-order-sub { font-size: 12px; color: var(--ink-4); }
.up-order-total { border-top: 1px solid var(--line-soft); padding-top: 8px; font-weight: 700; color: var(--ink); }
.up-paymethods { display: flex; flex-direction: column; gap: 8px; }
.up-pm { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-size: 13px; }
.up-pm.is-on { border-color: var(--c-chambray); background: var(--c-chambray-50); }
.up-pm input { accent-color: var(--c-chambray); margin: 0; }
.up-pm-name { font-weight: 600; }
.up-pm-bank { margin-left: auto; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.up-paybtn { padding: 11px 0; font-size: 14px; }
.up-done { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 0 18px; }
.up-done-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--ok-50); color: var(--ok); display: grid; place-items: center; border: 1px solid var(--ok); }
.up-card { position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 0; background: var(--surface); }
.up-card.is-pro { border-color: var(--c-chambray); box-shadow: inset 0 0 0 1px var(--c-chambray); }
.up-card.is-current:not(.is-pro) { background: var(--surface-2); }
.up-recommend { position: absolute; top: -9px; left: 16px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #fff; background: var(--c-chambray); border-radius: 99px; padding: 3px 9px; }
.up-cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 13px; margin-bottom: 13px; border-bottom: 1px solid var(--line-soft); }
.up-plan { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }
.up-card.is-pro .up-plan { color: var(--c-chambray); }
.up-price { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.up-price span { font-size: 12px; font-weight: 500; color: var(--ink-4); letter-spacing: 0; }
.up-feats { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 12.5px; color: var(--ink-2); flex: 1; }
.up-feats li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.35; }
.up-feats li svg { color: var(--ok); flex: none; margin-top: 2px; }
.up-feats li b { color: var(--ink); }
.up-cta { justify-content: center; width: 100%; }
.up-current { font-size: 11.5px; font-weight: 600; color: var(--ink-4); text-align: center; padding: 8px 0; border: 1px dashed var(--line); border-radius: 9px; }
.up-err { margin-top: 12px; font-size: 12px; color: var(--err); }
.up-note { margin-top: 16px; font-size: 11px; text-align: center; color: var(--ink-4); }
.up-badge { flex: none; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 6px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-3); }
.up-badge.is-pro { background: var(--c-chambray-50); border-color: var(--c-chambray); color: var(--c-chambray); }
.up-sidebar-btn { margin-top: 5px; align-self: flex-start; font-size: 10.5px; font-weight: 600; color: var(--c-chambray); background: var(--c-chambray-50); border: 1px solid var(--c-chambray-100); border-radius: 7px; padding: 3px 8px; cursor: pointer; }
.up-sidebar-btn:hover { background: var(--c-chambray-100); }
.analysis-icon.is-locked { opacity: 0.75; }
.an-lock { color: var(--c-tussock-600); flex: none; margin-left: 1px; }
.sm-plan-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.co-summary {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 16px 4px; padding: 12px 14px; border-radius: var(--r-2);
  border: 1px solid var(--line);
}
.co-summary.is-ok   { background: var(--ok-50);   border-color: var(--ok);   color: var(--ok); }
.co-summary.is-warn { background: var(--warn-50); border-color: var(--c-tussock); color: var(--c-tussock-600); }
.co-summary.is-err  { background: var(--err-50);  border-color: var(--err);  color: var(--err); }
.co-summary .col strong { color: var(--ink); }
.co-summary .col span { color: var(--ink-3); }
.co-summary.co-summary-inline { margin: 0 12px 0 auto; padding: 7px 12px; flex: none; }
.co-summary.co-summary-inline strong { font-size: 13px !important; }
.co-summary.co-summary-inline .col span { font-size: 11px !important; }
.co-scroll { flex: 1; min-height: 0; overflow: auto; padding: 10px 16px; display: flex; flex-direction: column; gap: 6px; }
.co-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--surface); cursor: pointer;
  transition: border-color .12s, background .12s;
}
.co-row:hover { border-color: var(--c-chambray); background: var(--c-chambray-50); }
.co-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.co-dot.ok { background: var(--ok); } .co-dot.warn { background: var(--c-tussock); } .co-dot.err { background: var(--err); }
.co-row-id { display: flex; flex-direction: column; gap: 1px; width: 168px; flex: none; min-width: 0; }
.co-row-tag { font-size: 12px; font-weight: 700; color: var(--c-chambray); }
.co-row-label { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-row-crumb { font-size: 10.5px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-row-checks { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-width: 0; }
.co-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 600; font-family: var(--ff-mono);
  padding: 2px 7px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.co-chip.is-ok   { background: var(--ok-50);   color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.co-chip.is-err  { background: var(--err-50);  color: var(--err);  border-color: color-mix(in srgb, var(--err) 35%, transparent); }
.co-chip.is-warn { background: var(--warn-50); color: var(--c-tussock-600); border-color: var(--c-tussock); }
.co-chip.is-na   { background: var(--surface-2); color: var(--ink-4); border-color: var(--line); }
.co-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-2);
}

/* ── Vermogensverdeling (ΣP) ─────────────────────────────────── */
.pd-totals {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border-bottom: 1px solid var(--line);
}
.pd-tot {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 16px; background: var(--surface-2);
}
.pd-tot-label { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.03em; }
.pd-tot-val { font-size: 18px; font-weight: 700; color: var(--ink); }
.pd-tot-val.is-warn { color: var(--c-tussock-600); }
.pd-tot-val.is-err { color: var(--err); }
.pd-tot-unit { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.pd-row-wrap { display: flex; flex-direction: column; }
.pd-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s;
}
.pd-row:hover { border-color: var(--c-chambray); background: var(--c-chambray-50); }
.pd-row-id { display: flex; align-items: center; gap: 9px; width: 230px; flex: none; min-width: 0; }
.pd-row-tag {
  font-size: 11px; font-weight: 600; color: var(--c-chambray);
  background: var(--c-chambray-50); border-radius: 4px; padding: 2px 6px; flex: none;
}
.pd-row-label { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-row-sub { color: var(--ink-3); font-weight: 400; font-size: 11.5px; }
.pd-bar-wrap { flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0; }
.pd-bar { flex: 1; height: 7px; background: var(--surface-3, var(--surface-2)); border-radius: 4px; overflow: hidden; }
.pd-bar-fill { height: 100%; background: var(--c-chambray); border-radius: 4px; }
.pd-bar-pct { font-size: 11px; color: var(--ink-3); width: 34px; text-align: right; flex: none; }
.pd-row-nums { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; width: 92px; flex: none; font-size: 12.5px; }
.pd-row-ib { color: var(--ink-3); font-size: 11.5px; }
.pd-kids {
  display: flex; flex-direction: column; gap: 1px;
  margin: 2px 0 4px 26px; padding-left: 14px; border-left: 2px solid var(--line);
}
.pd-kid { display: flex; align-items: center; gap: 9px; padding: 4px 2px; font-size: 12px; }
.pd-kid-tag { font-size: 10.5px; color: var(--ink-3); background: var(--surface-2); border-radius: 3px; padding: 1px 5px; flex: none; }
.pd-kid-label { flex: 1; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-kid-num { color: var(--ink-3); flex: none; }

/* ── Installatiegegevens (Inst) ──────────────────────────────── */
.ii-scroll { gap: 14px; padding: 16px; }
.ii-section { display: flex; flex-direction: column; gap: 0; }
.ii-section-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--c-chambray);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 7px;
}
.ii-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.ii-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 13px; background: var(--surface);
}
.ii-row-label { font-size: 12px; color: var(--ink-3); flex: none; }
.ii-row-value { font-size: 13px; font-weight: 600; color: var(--ink); text-align: right; }
.ii-row-unit { font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.ii-row-sub { font-size: 11px; font-weight: 400; color: var(--ink-4); }
.vd-modal { width: min(880px, 96vw); }
.vd-tablewrap { flex: 1; min-height: 0; overflow: auto; padding: 0 16px 4px; }
.vd-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.vd-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2); color: var(--ink-3);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.vd-table thead th.vd-c-code, .vd-table thead th.vd-c-rem { text-align: left; }
.vd-trow td { padding: 7px 10px; border-bottom: 1px solid var(--line-2, #f0eee9); vertical-align: middle; }
.vd-c-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vd-c-code { text-align: left; }
.vd-c-rem  { text-align: left; }
.vd-indent { display: inline-flex; flex-direction: column; gap: 1px; }
.vd-c-code .vd-tag { font-weight: 700; color: var(--c-chambray); }
.vd-c-code .vd-name { display: block; font-size: 11px; color: var(--ink-3); }
.vd-trafo { background: var(--c-chambray-50); }
.vd-trafo td { border-bottom: 1px solid var(--c-chambray); }
.vd-trafo .vd-tag { color: var(--ink); }
.vd-click { cursor: pointer; }
.vd-click:hover { background: var(--c-chambray-50); }
.vd-trow.is-err td { background: color-mix(in srgb, var(--err-50) 70%, transparent); }
.vd-trow.is-err .vd-c-num b { color: var(--err); }
.vd-trow.is-incomplete { color: var(--ink-3); }
.vd-pill {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; border: 1px solid transparent;
}
.vd-pill.ok   { background: var(--ok-50);   color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.vd-pill.err  { background: var(--err-50);  color: var(--err);  border-color: color-mix(in srgb, var(--err) 35%, transparent); }
.vd-pill.warn { background: var(--warn-50); color: var(--c-tussock-600); border-color: var(--c-tussock); }

/* ── Selectiviteit ─────────────────────────────────────────────── */
.sel-modal { width: min(1120px, 96vw); max-height: 92vh; }
.sel-modal.is-graph { width: min(1640px, 98vw); height: 96vh; }
.sel-tabs-legend { margin-left: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.sel-tabs-legend .sel-leg { white-space: nowrap; }
.sel-graphwrap.sel-graphcols { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 16px; flex: 1; min-height: 0; padding-bottom: 14px; }
.sel-graphside { display: flex; flex-direction: column; gap: 9px; min-width: 0; overflow-x: hidden; overflow-y: auto; padding-right: 2px; }
.sel-side-summary { margin: 0; padding: 7px 11px; border-radius: 9px; }
.sel-graphside .sel-graph-sel { max-width: none; width: 100%; box-sizing: border-box; padding: 5px 28px 5px 10px; border: 1px solid var(--line); border-radius: 10px; background-color: var(--surface-2); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 10px; }
.sel-graphside .sel-graph-sel:focus { outline: none; border-color: var(--c-chambray); }
.sel-side-sec { display: flex; flex-direction: column; gap: 6px; }
.sel-side-main { padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.sel-side-tune { padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); display: flex; flex-direction: column; gap: 5px; }
.sel-side-tune .sel-graph-lbl { padding-right: 20px; }
.sel-tune-row { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 6px; }
.sel-tune-row label { font-size: 12px; color: var(--ink-2); display: flex; align-items: baseline; gap: 4px; }
.sel-tune-row label i { font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.sel-tune-row .sel-graph-sel { width: 100%; max-width: none; padding: 4px 18px 4px 8px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23666' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; }
.sel-tune-note { font-size: 10.5px; line-height: 1.35; }
.sel-side-main .sel-mainbar-item { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sel-side-main .sel-mainbar-item i { font-style: normal; color: var(--ink-3); font-size: 11px; }
.sel-side-title { font-size: 12px; color: var(--ink-2); margin-bottom: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.sel-graphside .sel-graph-verdict { align-items: flex-start; flex: 0 0 auto; }
.sel-graphside .sel-graph-note { margin-top: auto; display: flex; align-items: center; gap: 6px; }
.sel-graphside .sel-graph-verdict { font-size: 12px; line-height: 1.45; }
.sel-graphmain { display: flex; min-height: 0; min-width: 0; }
.sel-mainbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
  margin: 6px 16px 0; padding: 8px 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-2);
  font-size: 11.5px; color: var(--ink-3);
}
.sel-mainbar-acties { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex: none; }
.sel-mainbar-tag { font-weight: 700; color: var(--c-chambray); font-size: 12px; }
.sel-mainbar-sep { color: var(--ink-4); }
.sel-mainbar-item { color: var(--ink-2); }
.sel-mainbar-item b { color: var(--ink); }
.sel-mainbar-item i { color: var(--ink-4); font-style: normal; }
.sel-table .vd-c-rem { white-space: normal; }
.sel-reason { display: block; font-size: 11px; color: var(--ink-3); margin-top: 3px; line-height: 1.35; }
.vd-trow.is-err .sel-reason { color: var(--err); }
.sel-viewtabs { display: flex; gap: 6px; padding: 8px 16px 0; }
.sel-viewtab {
  font-size: 12px; font-weight: 500; padding: 6px 13px; border-radius: 7px 7px 0 0;
  border: 1px solid transparent; border-bottom: none; background: none; color: var(--ink-3); cursor: pointer;
}
.sel-viewtab.is-on { background: var(--surface-2); color: var(--c-chambray); border-color: var(--line); font-weight: 600; }
.sel-graphwrap { padding: 12px 18px 4px; display: flex; flex-direction: column; gap: 10px; overflow: auto; flex: 1; min-height: 0; }
.sel-graph-lbl { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.sel-graph-sel { font-size: 12px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); max-width: 360px; }
.sel-graph-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.sel-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); }
.sel-leg-toggle { cursor: pointer; }
.sel-leg-toggle input { margin: 0; width: 12px; height: 12px; accent-color: #2A6FDB; cursor: pointer; }
.sel-leg i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.sel-leg-ik { width: 14px; height: 0; border-top: 2px dashed #C0392B; }
.sel-chart { display: block; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); flex: 1; min-height: 380px; width: 100%; height: 100%; }
.sel-axlab { font-size: 9.5px; fill: var(--ink-3); font-family: var(--ff-mono); }
.sel-axtitle { font-size: 11px; fill: var(--ink-2); font-weight: 500; }
.sel-iklab { font-size: 10px; fill: #C0392B; font-weight: 600; }
.sel-graph-verdict { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); }
.sel-graph-verdict.is-err { background: var(--err-50, #F8E7E4); }
.sel-graph-verdict.is-warn { background: var(--warn-50); }
.sel-graph-note { font-size: 11px; line-height: 1.4; }
.sel-howto { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); font-size: 12px; }
.sel-howto summary { cursor: pointer; padding: 9px 12px; font-weight: 600; color: var(--ink-2); list-style-position: inside; }
.sel-howto summary:hover { color: var(--ink); }
.sel-howto[open] summary { border-bottom: 1px solid var(--line); }
.sel-howto > div { padding: 4px 12px 10px; }
.sel-howto p { margin: 8px 0 0; line-height: 1.5; color: var(--ink-2); }
.sel-howto p b { color: var(--ink); }

/* ── Installatiegegevens (rapport) ───────────────── */
.ig-modal { width: min(1180px, 97vw); }
.ig-scroll { flex: 1; min-height: 0; overflow: auto; padding: 12px 18px 6px; display: flex; flex-direction: column; gap: 16px; }
.ig-section { display: flex; flex-direction: column; gap: 10px; }
.ig-section-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.ig-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.ig-card { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; }
.ig-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.ig-card-title { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.ig-card-sub { font-size: 11px; color: var(--ink-3); }
.ig-dl { margin: 0; padding: 4px 12px 8px; }
.ig-dl-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line-soft); font-size: 12px; }
.ig-dl-row:last-child { border-bottom: 0; }
.ig-dl-row dt { color: var(--ink-3); }
.ig-dl-row dd { margin: 0; color: var(--ink); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.ig-block { display: flex; flex-direction: column; gap: 8px; }
.ig-block-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--c-chambray); padding-bottom: 5px; border-bottom: 1.5px solid var(--line);
}

/* SPD-analyse: ig-modal is breed (1180px) maar np-form-grid is smal (2 kol., max 520px)
   t.b.v. de smallere nieuw-project-wizard — hier juist de breedte benutten zodat het
   paneel zonder scrollen past (Nick, 2 okt). */
.spd-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 20px; }
.spd-mand-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px; }
@media (max-width: 760px) {
  .spd-form-grid { grid-template-columns: 1fr 1fr; }
  .spd-mand-grid { grid-template-columns: 1fr; }
}

/* Team: uitnodigingslink */
.kb-team-link { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 12px; }
.kb-team-link-url { display: flex; gap: 6px; width: 100%; }
.kb-team-link-url input { flex: 1; min-width: 0; font: inherit; font-family: var(--ff-mono); font-size: 11.5px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--ink); }
/* Installatiegegevens: brede blokken en de groepentabel */
.ig-cards-2 { grid-template-columns: 1fr 1fr; align-items: stretch; }
.ig-cards-1 { grid-template-columns: 1fr; }
.ig-dl-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.ig-groepen .ig-table { min-width: 900px; }
.ig-groepen .ig-table tbody tr:nth-child(even) td { background: var(--surface-2); }
.ig-groepen .ig-table td { padding: 6px 9px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ig-sans { font-family: var(--ff-sans, inherit); }
.ig-tag { margin-left: 6px; font-size: 10px; font-weight: 600; color: var(--c-chambray); background: var(--c-chambray-50); border-radius: 999px; padding: 1px 6px; }
.ig-noot { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.ig-noot b { color: var(--ink-2); font-weight: 600; }
@media (max-width: 640px) { .ig-cards-2, .ig-dl-2 { grid-template-columns: 1fr; } }
.ig-tablewrap { overflow-x: auto; }
.ig-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--ff-mono); table-layout: fixed; }
.ig-table th { width: 80px; }
.ig-table th.ig-l:first-child { width: 220px; }
.ig-table th.ig-fill { width: auto; }
.ig-table tbody td { overflow: hidden; text-overflow: ellipsis; }
.ig-table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--surface-2);
  color: var(--ink-3); font-weight: 600; vertical-align: bottom;
  padding: 5px 9px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.ig-table th.ig-l, .ig-table td.ig-l { text-align: left; }
.ig-table th.ig-r, .ig-table td.ig-r { text-align: right; font-variant-numeric: tabular-nums; }
.ig-table th.ig-c, .ig-table td.ig-c { text-align: center; }
.ig-table thead th { font-family: var(--ff-sans, inherit); white-space: normal; }
.ig-th-label { display: block; font-size: 11px; }
.ig-th-unit { display: block; font-size: 10px; color: var(--ink-4); font-weight: 500; }
.ig-table tbody td, .ig-table tfoot td { padding: 6px 9px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; vertical-align: middle; }
.ig-table tbody tr:hover td { background: var(--surface-2); }
.ig-table .ig-sub { font-size: 10.5px; color: var(--ink-3); font-family: var(--ff-sans, inherit); }
.ig-table tfoot .ig-foot-row td { border-top: 1.5px solid var(--line); background: var(--surface-2); }
.vd-supply-note { margin: 10px 2px 0; font-size: 11.5px; color: var(--ink-3); }
.vd-pct-bad { color: var(--err); }
.sc-grp { text-align: center; font-size: 10.5px; letter-spacing: .03em; border-bottom: 1px solid var(--line); }
.sc-grp-pen { background: rgba(52,74,134,.05); }
.sc-1f-table thead th { vertical-align: middle; }
.ig-empty { padding: 18px; text-align: center; color: var(--ink-3); }
.ig-table tbody tr.ig-subrow td { color: var(--ink-3); font-size: 11.5px; }

.ig-cpr-head { font-size: 12px; color: var(--ink-2); }
.ig-cpr-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 4px 24px; }
.ig-cpr-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 3px 0; border-bottom: 1px dotted var(--line-soft); }
.ig-cpr-k { color: var(--ink-3); }
.ig-cpr-v { color: var(--ink); font-weight: 500; }
/* ── Rekentools (Tips-scherm) ──────────────────────────────────── */
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; max-width: 1100px; }
.ct-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 9px; }
.ct-title { font-size: 14.5px; font-weight: 700; }
.ct-formula { font-size: 11.5px; color: var(--ink-3); background: var(--surface-2); border-radius: 4px; padding: 4px 8px; align-self: flex-start; }
.ct-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.ct-label { width: 92px; flex: none; color: var(--ink-3); }
.ct-input { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-numwrap { display: inline-flex; align-items: center; gap: 5px; }
.ct-num { width: 100%; padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; font-size: 12.5px; background: var(--surface); color: var(--ink); }
.ct-num:focus { outline: none; border-color: var(--c-chambray); }
.ct-unit { font-size: 11.5px; color: var(--ink-3); }
.ct-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.ct-seg-btn { padding: 4px 10px; font-size: 11.5px; background: var(--surface); border: none; cursor: pointer; color: var(--ink-2); }
.ct-seg-btn + .ct-seg-btn { border-left: 1px solid var(--line); }
.ct-seg-btn.is-on { background: var(--c-chambray); color: #fff; }
.ct-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.ct-chip { padding: 3px 8px; font-size: 10.5px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); cursor: pointer; color: var(--ink-2); }
.ct-chip.is-on { border-color: var(--c-chambray); color: var(--c-chambray); background: var(--c-chambray-50, #eef2fa); }
.ct-out { display: flex; align-items: baseline; gap: 10px; border-top: 1px dotted var(--line-soft); padding-top: 8px; margin-top: 2px; }
.ct-out .ct-label { width: 92px; flex: none; }
.ct-outval { font-size: 17px; font-weight: 700; color: var(--ink); }
.ct-outunit { font-size: 11.5px; font-weight: 500; color: var(--ink-3); }

/* ── Bronbelasting ──────────────────────────────────────────────── */
.psm-modal { width: min(1180px, 97vw); min-height: min(560px, 80vh); }
.psm-body { display: flex; gap: 16px; padding: 6px 16px 2px; flex: 1; min-height: 0; }
.psm-glts { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 2px; flex: none; }
.psm-glts-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--ink-3); }
.psm-glts-range { height: 200px; width: 22px; accent-color: var(--c-chambray); cursor: pointer; }
.psm-glts-val { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Analyse-balk onder de werkbalk */
.norma-analysis-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 14px; background: #fff;
  border-bottom: 1px solid var(--line); flex: none;
}
.analysis-bar-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-4); flex: none;
}
.analysis-tabs { display: flex; gap: 6px; overflow-x: auto; }
.analysis-icon {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 60px; height: 50px; flex: none;
  font: inherit; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer; padding: 0;
  transition: border-color .12s, background .12s, color .12s;
}
.analysis-icon:hover:not(:disabled) { border-color: var(--c-tussock-600); color: #0B1B33; background: var(--c-tussock); }
.analysis-icon.is-active {
  border-color: var(--c-chambray);
  color: var(--c-chambray);
  background: var(--c-chambray-50);
  box-shadow: inset 0 0 0 1px var(--c-chambray);
}

/* In-app bevestigingsdialoog */
.norma-confirm-overlay {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(20,18,14,.38);
  display: flex; align-items: center; justify-content: center;
}
.norma-confirm {
  width: min(400px, 92vw);
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0,0,0,.32);
  padding: 18px 20px 16px;
  animation: np-pop .18s cubic-bezier(.2,.9,.3,1.1);
}
.norma-confirm-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.norma-confirm-msg { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.norma-confirm-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.norma-confirm .btn.is-danger { background: var(--err); border-color: var(--err); color: #fff; }
.norma-confirm .btn.is-danger:hover { filter: brightness(1.08); }
.analysis-code { font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .01em; }
.analysis-icon.is-soon {
  color: var(--ink-4); background: var(--surface-2);
  border-style: dashed; cursor: not-allowed; opacity: 0.65;
}
.analysis-divider { width: 1px; height: 36px; background: var(--line); flex: none; margin-left: 8px; }
.analysis-eindcontrole {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font: inherit; font-size: 13.5px; font-weight: 700; color: #0B1B33;
  height: 50px; padding: 0 20px; cursor: pointer; margin-left: 4px;
  background: var(--c-tussock); border: 1px solid var(--c-tussock-600);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 0 0 3px var(--c-tussock-50);
  transition: filter .12s, box-shadow .12s;
}
.analysis-eindcontrole:hover { filter: brightness(1.05); box-shadow: 0 2px 6px rgba(0,0,0,0.16), 0 0 0 3px var(--c-tussock-50); }
/* Bliksemschichtjes: transparante laag over de hele knop, achter de tekst */
.analysis-eindcontrole { position: relative; overflow: hidden; }
.ec-label, .analysis-eindcontrole > svg:first-child { position: relative; z-index: 1; }
.ec-storm { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: #0B1B33; }
.ec-storm .ec-bolt { position: absolute; opacity: 0; }
.ec-b0 { left: 7%;  top: 14%; }
.ec-b1 { left: 21%; top: 52%; transform: scale(.8) rotate(-12deg); }
.ec-b2 { left: 36%; top: 8%;  transform: scale(1.15); }
.ec-b3 { left: 50%; top: 48%; transform: scale(.7) rotate(9deg); }
.ec-b4 { left: 64%; top: 12%; transform: scale(.95) rotate(-6deg); }
.ec-b5 { left: 78%; top: 50%; transform: scale(1.05); }
.ec-b6 { left: 90%; top: 18%; transform: scale(.75) rotate(14deg); }
.analysis-eindcontrole:hover .ec-bolt, .analysis-eindcontrole:focus-visible .ec-bolt,
.analysis-icon:hover:not(:disabled) .ec-bolt { animation: ec-zap 1.15s ease-in-out infinite; }
.analysis-icon { position: relative; overflow: hidden; }
.analysis-icon > .glyph, .analysis-icon > .analysis-code { position: relative; z-index: 1; }
.analysis-icon:hover:not(:disabled) .ec-b2 { animation-delay: .22s; }
.analysis-icon:hover:not(:disabled) .ec-b4 { animation-delay: .47s; }
.analysis-icon:hover:not(:disabled) .ec-b6 { animation-delay: .73s; }
.analysis-icon .ec-b0 { left: 4%;  top: 6%;  transform: scale(.62) rotate(-10deg); }
.analysis-icon .ec-b2 { left: 62%; top: 10%; transform: scale(.55) rotate(12deg); }
.analysis-icon .ec-b4 { left: 10%; top: 52%; transform: scale(.5)  rotate(8deg); }
.analysis-icon .ec-b6 { left: 68%; top: 56%; transform: scale(.68) rotate(-14deg); }
.analysis-eindcontrole:hover .ec-b1 { animation-delay: .09s; }
.analysis-eindcontrole:hover .ec-b2 { animation-delay: .22s; }
.analysis-eindcontrole:hover .ec-b3 { animation-delay: .34s; }
.analysis-eindcontrole:hover .ec-b4 { animation-delay: .47s; }
.analysis-eindcontrole:hover .ec-b5 { animation-delay: .6s; }
.analysis-eindcontrole:hover .ec-b6 { animation-delay: .73s; }
@keyframes ec-zap {
  0%, 100% { opacity: 0; }
  35%      { opacity: .17; }
  55%      { opacity: .04; }
  70%      { opacity: .12; }
}
@media (prefers-reduced-motion: reduce) {
  .analysis-eindcontrole:hover .ec-bolt, .analysis-icon:hover .ec-bolt { animation: none; opacity: .1; }
}

/* Kortsluit-tabellen: breder + compacte monocijfers */
.sc-modal { width: min(1080px, 97vw); }
.sc-table { font-size: 12px; }
.sc-th-unit { display: block; font-size: 10px; color: var(--ink-4); font-weight: 500; }
.sc-table .vd-c-num { font-size: 11.5px; padding-left: 8px; padding-right: 8px; }

.dg-addbtn { opacity: 0.7; transition: opacity .15s; }
.dg-addbtn:hover { opacity: 1; }
.dg-addbtn:hover circle { fill: var(--c-chambray-50); }

/* Lege velden (rek-capaciteit) in het schema */
.dg-emptyfield .dg-emptyfield-line { stroke: var(--line-strong); }
.dg-emptyfield .dg-emptyfield-dot  { stroke: var(--line-strong); }
.dg-emptyfield .dg-emptyfield-plus { stroke: var(--ink-4); }
.dg-emptyfield .dg-emptyfield-label { font-family: var(--ff-mono); font-size: 9px; fill: var(--ink-4); }
.dg-emptyfield:hover .dg-emptyfield-line { stroke: var(--c-chambray); }
.dg-emptyfield:hover .dg-emptyfield-dot  { stroke: var(--c-chambray); fill: var(--c-chambray-50); }
.dg-emptyfield:hover .dg-emptyfield-plus { stroke: var(--c-chambray); }
.dg-emptyfield:hover .dg-emptyfield-label { fill: var(--c-chambray); }
.dg-emptyfield .dg-emptyfield-tag { font-family: var(--ff-mono); font-size: 11px; font-weight: 600; fill: var(--ink-4); }
.dg-emptyfield:hover .dg-emptyfield-tag { fill: var(--c-chambray); }
.dg-veldno { font-family: var(--ff-mono); font-size: 8px; font-weight: 500; fill: var(--ink-4); letter-spacing: 0.04em; }
/* Sleep-grip op afgaande groepen — alleen zichtbaar bij hover/selectie */
.dg-fgrip { opacity: 0; transition: opacity .12s; }
.dg-feeder-group:hover .dg-fgrip,
.dg-feeder-group.is-selected .dg-fgrip { opacity: 1; }
.dg-fgrip:hover rect { stroke: var(--c-chambray); }
.dg-fgrip:hover g { fill: var(--c-chambray); }
.dg-feeder-group.is-dragging { opacity: 0.9; }

/* Projectgegevens-wijzigen modal */
.ep-card {
  width: min(460px, 94vw);
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 24px 80px -20px rgba(28,24,14,0.45), 0 4px 16px rgba(28,24,14,0.15);
  display: flex; flex-direction: column; overflow: hidden;
  animation: np-pop .2s cubic-bezier(.2,.9,.3,1.1);
}
.ep-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.ep-title { font-size: 16px; font-weight: 600; }
.ep-body { padding: 18px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ep-body .nf-field.is-full { grid-column: 1 / -1; }
.ep-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 18px; border-top: 1px solid var(--line); }

/* History */
.norma-history-row { display: flex; align-items: stretch; }

/* ============================================================
   New Project flow (modal)
   ============================================================ */
.np-overlay {
  position: fixed; inset: 0;
  background: rgba(28,24,14,0.32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  animation: np-fade .15s ease;
}
@keyframes np-fade { from { opacity: 0; } to { opacity: 1; } }

.np-modal {
  width: 100%;
  max-width: 1080px;
  height: min(800px, 94vh);
  display: grid;
  grid-template-columns: 280px 1fr;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 24px 80px -20px rgba(28,24,14,0.45), 0 4px 16px rgba(28,24,14,0.15);
  overflow: hidden;
  animation: np-pop .2s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes np-pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

.np-side {
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
}
.np-side-head { margin-bottom: 28px; }
.np-side-title { font-size: 15px; font-weight: 600; line-height: 1.2; }
.np-side-sub { font-size: 11.5px; color: var(--ink-3); font-family: var(--ff-mono); margin-top: 2px; }

.np-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.np-step {
  display: flex;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 6px;
  position: relative;
}
.np-step-bullet {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink-3);
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  transition: all .15s;
}
.np-step.is-active .np-step-bullet {
  background: var(--c-chambray);
  border-color: var(--c-chambray);
  color: white;
}
.np-step.is-done .np-step-bullet {
  background: var(--surface);
  border-color: var(--c-chambray);
  color: var(--c-chambray);
}
.np-step-label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.np-step.is-active .np-step-label { color: var(--ink); font-weight: 600; }
.np-step.is-done .np-step-label    { color: var(--ink-2); }
.np-step-hint { font-size: 11px; color: var(--ink-3); }

/* Connector line between steps */
.np-step::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 32px;
  width: 1px;
  height: calc(100% - 22px);
  background: var(--line);
}
.np-step:last-child::before { display: none; }
.np-step.is-done::before { background: var(--c-chambray); }

.np-side-foot {
  margin-top: auto;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.np-content {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;
}
.np-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink-2);
  z-index: 1;
}
.np-close:hover { background: var(--surface-2); }

.np-step-content {
  flex: 1;
  overflow-y: auto;
  padding: 28px 40px 20px;
  min-height: 0;
}
.np-step-head { margin-bottom: 18px; max-width: 640px; }
.np-h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.np-lede { margin: 8px 0 0; color: var(--ink-3); font-size: 13.5px; line-height: 1.5; }

.np-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 520px;
}

/* Configuratiestap: formulier en afgeleide waarden naast elkaar — geen scroll nodig */
.np-config-row { display: flex; gap: 28px; align-items: flex-start; }
.np-config-row .np-config-main { flex: 1; min-width: 0; }
.np-config-row .np-derived { margin-top: 0; flex: 0 0 230px; max-width: 230px; }
.np-config-row .np-derived-grid { grid-template-columns: 1fr; gap: 10px; }

/* Supply pick */
.np-supply-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.np-supply-card {
  position: relative;
  text-align: left;
  padding: 18px 18px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: all .12s;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: inherit;
  color: inherit;
}
.np-supply-card:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}
.np-supply-card.is-selected {
  border-color: var(--c-chambray);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--c-chambray-50);
}
.np-supply-num {
  position: absolute;
  top: 12px; right: 14px;
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.06em;
}
.np-supply-card.is-selected .np-supply-num { color: var(--c-chambray); }

.np-supply-card.is-soon {
  cursor: not-allowed;
  opacity: 0.55;
  background: var(--surface-2);
}
.np-supply-card.is-soon:hover {
  border-color: var(--line);
  background: var(--surface-2);
}
.np-supply-card.is-soon .np-supply-art { color: var(--ink-4); }
.np-supply-soon {
  position: absolute;
  bottom: 14px; right: 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
}

.np-supply-art {
  width: 100%;
  max-width: 160px;
  height: 64px;
  color: var(--ink-2);
  margin: 4px 0 8px;
}
.np-supply-card.is-selected .np-supply-art { color: var(--c-chambray); }
.np-supply-title { font-size: 15px; font-weight: 600; }
.np-supply-sub { font-size: 11.5px; color: var(--ink-3); font-family: var(--ff-mono); }
.np-supply-desc { font-size: 12px; color: var(--ink-2); line-height: 1.5; margin-top: 4px; flex: 1; }
.np-supply-when {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--ink-3);
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  margin-top: 8px;
}
.np-supply-check {
  position: absolute;
  bottom: 14px; right: 14px;
  width: 22px; height: 22px;
  background: var(--c-chambray);
  color: white;
  border-radius: 50%;
  display: grid; place-items: center;
}

/* Derived */
.np-derived {
  margin-top: 28px;
  padding: 16px 18px;
  background: var(--surface-2);
  border-radius: 8px;
  max-width: 520px;
}
.np-derived-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 10px;
}
.np-derived-item { display: flex; flex-direction: column; gap: 2px; }
.np-derived-label { font-size: 11px; color: var(--ink-3); }
.np-derived-value { font-size: 14px; font-weight: 500; }
.np-derived-unit { color: var(--ink-3); font-weight: 400; font-size: 11px; }
.np-derived-hint { font-size: 11px; color: var(--ink-4); }

/* Done step */
.np-done { display: flex; flex-direction: column; align-items: center; padding-top: 60px; }
.np-done-art { margin-bottom: 20px; }
.np-summary {
  max-width: 460px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.np-summary-row {
  display: flex;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.np-summary-row:last-child { border-bottom: none; }
.np-summary-label { width: 140px; color: var(--ink-3); font-size: 12.5px; }
.np-summary-value { font-weight: 500; font-size: 13px; }

/* Actions footer */
.np-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.np-hint-inline {
  font-size: 12px;
  color: var(--ink-3);
  margin-right: 4px;
}

/* ============================================================
   Settings modal
   ============================================================ */
.sm-modal { max-width: 1100px; height: min(780px, 92vh); grid-template-columns: 240px 1fr; }

.sm-tabs { display: flex; flex-direction: column; gap: 2px; }
.sm-tab {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: none;
  background: transparent;
  border-radius: 5px;
  font: inherit;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  text-align: left;
}
.sm-tab:hover { background: var(--surface); }
.sm-tab.is-active { background: var(--c-chambray-50); color: var(--c-chambray); font-weight: 500; }
.sm-tab-meta {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--ink-4);
  background: var(--surface);
  border-radius: 3px;
  padding: 2px 6px;
}
.sm-tab.is-active .sm-tab-meta { color: var(--c-chambray); background: var(--surface); }

.sm-search {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px;
  padding: 0 10px;
  height: 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.sm-search input {
  flex: 1; min-width: 0;
  border: none; background: transparent;
  outline: none;
  font: inherit;
  font-size: 12px;
}

.sm-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 0 0;
}
/* De scrollende inhoud begint onder het sluitkruisje, zodat er niets onderdoor loopt. */
.np-content > .sm-body { margin-top: 56px; padding-top: 4px; }
.sm-tpl-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sm-tpl-table th { text-align: left; font-size: 10.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px; border-bottom: 1.5px solid var(--line); white-space: nowrap; }
.sm-tpl-table td { padding: 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.sm-tpl-table tr:hover td { background: var(--surface-2); }
.sm-tpl-table .num { text-align: right; white-space: nowrap; }
.sm-tpl-table .act { text-align: right; white-space: nowrap; width: 1%; }

.sm-group {
  padding: 0 0 24px;
}
.sm-group-head {
  padding: 0 28px 12px;
}
.sm-group-title { font-size: 14px; font-weight: 600; margin: 0; }
.sm-group-desc { font-size: 12.5px; color: var(--ink-3); margin: 4px 0 0; line-height: 1.5; max-width: 600px; }
.sm-future-badge {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--ink-3); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px;
}
.sm-group.is-future { opacity: 0.55; }
.sm-group.is-future .sm-rows { pointer-events: none; filter: grayscale(0.4); }
.sm-norm-card.is-future { opacity: 0.5; }
.sm-norm-card.is-future .sm-norm-edition { background: var(--surface-2); color: var(--ink-3); }

.sm-rows {
  border-top: 1px solid var(--line-soft);
}
.sm-row {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 16px;
  padding: 12px 28px;
  border-bottom: 1px solid var(--line-soft);
  align-items: center;
}
.sm-row:last-child { border-bottom: none; }
.sm-row:hover { background: var(--surface-2); }

.sm-row-info { min-width: 0; }
.sm-row-label {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px;
}
.sm-row-unit {
  font-size: 10.5px;
  color: var(--ink-3);
}
.sm-row-help {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
  line-height: 1.5;
  max-width: 500px;
}
.sm-row-meta {
  display: flex; gap: 8px;
  font-size: 11px;
  color: var(--ink-4);
  margin-top: 4px;
}
.sm-reset {
  background: transparent;
  border: none;
  color: var(--c-chambray);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  padding: 0;
}
.sm-reset:hover { text-decoration: underline; }
.sm-row-input { min-width: 0; }
/* Rijen met een brede control (bv. de method-/configuratiepicker) — label boven i.p.v. ernaast. */
.sm-row.is-wide { grid-template-columns: 1fr; }
.sm-row.is-wide .sm-row-input { margin-top: 6px; }

.sm-actions { padding: 14px 28px; }

/* Norms tab */
.sm-norms-active {
  margin: 0 28px 24px;
  padding: 18px;
  background: linear-gradient(135deg, var(--c-chambray-50), var(--surface));
  border: 1px solid var(--c-chambray);
  border-radius: 8px;
}
.sm-norms-badge {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--c-chambray);
  color: white;
  border-radius: 8px;
  font-family: var(--ff-mono);
  font-size: 17px;
  font-weight: 600;
  flex-shrink: 0;
}
.sm-norm-card {
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.sm-norm-card.is-active { border-color: var(--c-chambray); }
.sm-norm-edition {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--surface-sunken);
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  flex-shrink: 0;
}
.sm-norm-card.is-active .sm-norm-edition { background: var(--c-chambray); color: white; }
.sm-norm-changes {
  list-style: none; padding: 0;
  margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 4px;
}
.sm-norm-changes li {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px;
  color: var(--ink-2);
}
.norma-history-rail { position: relative; width: 36px; flex-shrink: 0; display: flex; justify-content: center; padding-top: 16px; }
.norma-history-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-chambray); margin-top: 2px; z-index: 1; }
.norma-history-line { position: absolute; top: 24px; bottom: -8px; width: 1px; background: var(--line); left: 50%; }


/* ============================================================
   Berekende kabel — kaart (legacy inspector)
   ============================================================ */

/* ============================================================
   Feeder modal (popup)
   ============================================================ */
.fm-modal {
  max-width: min(1380px, 97vw);
  width: 97vw;
  height: auto; max-height: min(900px, 96vh); /* zo hoog als de inhoud (langste kolom), nooit hoger dan het scherm */
  grid-template-columns: 1fr;
  display: flex;
  flex-direction: column;
}
.fm-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.fm-tag {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 12px;
  background: var(--c-chambray);
  color: white;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
}
.fm-title-input {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  outline: none;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: 4px;
  width: 360px;
}
.fm-title-input:hover, .fm-title-input:focus {
  background: var(--surface);
  outline: 1px dashed var(--line-strong);
}

.fm-body {
  flex: 1;
  display: grid;
  grid-template-columns: 0.85fr 0.85fr 0.7fr 1.05fr 1fr;
  overflow-x: auto;
  gap: 0;
  min-height: 0;
}
.fm-col {
  padding: 14px 16px;
  overflow-y: auto;
  min-width: 248px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  gap: 6px;
}
.fm-col:last-child { border-right: none; }
/* Onderdelen in een kolom houden hun eigen hoogte; de kolom scrollt. Anders kon de resultaattabel
   (overflow: hidden) bij een lager scherm ingedrukt worden en vielen de onderste rijen weg. */
.fm-col > * { flex-shrink: 0; }
.fm-result-col { background: var(--surface-2); }

.fm-section-title {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin: 3px 0 2px;
}

.fm-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fm-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

.fm-cable-card {
  padding: 14px;
  background: linear-gradient(180deg, var(--c-chambray-50), var(--surface));
  border: 1px solid var(--c-chambray);
  border-radius: 8px;
  margin-bottom: 6px;
}
.fm-cable-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--c-chambray);
  line-height: 1.15;
  margin: 4px 0 2px;
  white-space: nowrap;
}

.fm-result-grid {
  display: flex; flex-direction: column;
  gap: 1px;
  background: var(--line-soft);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.fm-result-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 7px 12px;
  background: var(--surface);
  font-size: 12px;
}
.fm-result-row.is-bold { background: var(--surface-2); font-weight: 600; }
.fm-result-label { color: var(--ink-2); }
.fm-result-value { font-weight: 500; }
.fm-result-row.is-bold .fm-result-value { font-size: 13.5px; }
.fm-result-row.is-ok   .fm-result-value { color: var(--ok); }
.fm-result-row.is-warn .fm-result-value { color: var(--c-tussock-600); }
.fm-result-row.is-err  .fm-result-value { color: var(--err); }
.fm-result-row.is-info .fm-result-value { color: var(--info); }
.fm-result-unit { color: var(--ink-3); font-weight: 400; font-size: 10.5px; }
.fm-result-trace {
  font-size: 10px;
  color: var(--ink-4);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fm-checks {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.fm-nen-line {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 4px;
  border-radius: 3px;
}
.fm-nen-line.is-ok  { color: var(--ok); }
.fm-nen-line.is-err { color: var(--err); }
.fm-nen-line.is-dim { opacity: 0.4; }

.fm-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
  max-width: 1100px;
  height: min(720px, 92vh);
  grid-template-columns: 1fr;
  display: flex;
  flex-direction: column;
}
.fm-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.fm-tag {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 12px;
  background: var(--c-chambray);
  color: white;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
}
.fm-title-input {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  outline: none;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: 4px;
  width: 360px;
}
.fm-title-input:hover, .fm-title-input:focus {
  background: var(--surface);
  outline: 1px dashed var(--line-strong);
}

.fm-body {
  flex: 1;
  display: grid;
  grid-template-columns: 0.85fr 0.85fr 0.7fr 1.05fr 1fr;
  overflow-x: auto;
  gap: 0;
  min-height: 0;
}
.fm-col {
  padding: 14px 16px;
  overflow-y: auto;
  min-width: 248px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  gap: 6px;
}
.fm-col:last-child { border-right: none; }
/* Onderdelen in een kolom houden hun eigen hoogte; de kolom scrollt. Anders kon de resultaattabel
   (overflow: hidden) bij een lager scherm ingedrukt worden en vielen de onderste rijen weg. */
.fm-col > * { flex-shrink: 0; }
.fm-result-col { background: var(--surface-2); }

.fm-section-title {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin: 3px 0 2px;
}

.fm-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fm-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

.fm-cable-card {
  padding: 14px;
  background: linear-gradient(180deg, var(--c-chambray-50), var(--surface));
  border: 1px solid var(--c-chambray);
  border-radius: 8px;
  margin-bottom: 6px;
}
.fm-cable-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--c-chambray);
  line-height: 1.15;
  margin: 4px 0 2px;
  white-space: nowrap;
}

.fm-result-grid {
  display: flex; flex-direction: column;
  gap: 1px;
  background: var(--line-soft);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.fm-result-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 7px 12px;
  background: var(--surface);
  font-size: 12px;
}
.fm-result-row.is-bold { background: var(--surface-2); font-weight: 600; }
.fm-result-label { color: var(--ink-2); }
.fm-result-value { font-weight: 500; }
.fm-result-row.is-bold .fm-result-value { font-size: 13.5px; }
.fm-result-row.is-ok   .fm-result-value { color: var(--ok); }
.fm-result-row.is-warn .fm-result-value { color: var(--c-tussock-600); }
.fm-result-row.is-err  .fm-result-value { color: var(--err); }
.fm-result-row.is-info .fm-result-value { color: var(--info); }
.fm-result-unit { color: var(--ink-3); font-weight: 400; font-size: 10.5px; }
.fm-result-trace {
  font-size: 10px;
  color: var(--ink-4);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fm-checks {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.fm-nen-line {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 4px;
  border-radius: 3px;
}
.fm-nen-line.is-ok  { color: var(--ok); }
.fm-nen-line.is-err { color: var(--err); }
.fm-nen-line.is-dim { opacity: 0.4; }

.fm-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.fm-delete-btn { color: var(--err); border-color: color-mix(in srgb, var(--err) 30%, transparent); }
.fm-delete-btn:hover { background: var(--err-50); border-color: var(--err); color: var(--err); }
/* Visuele balken onder Berekend resultaat */
.fm-gauges { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.fm-gauge-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
.fm-gauge-label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.fm-gauge-val { font-size: 12.5px; font-weight: 700; }
.fm-gauge-val.is-ok { color: var(--ok); } .fm-gauge-val.is-warn { color: var(--c-tussock-600); } .fm-gauge-val.is-err { color: var(--err); }
.fm-gauge-lim { font-weight: 500; color: var(--ink-4); }
.fm-gauge-track { position: relative; height: 9px; border-radius: 999px; background: var(--surface-sunken); border: 1px solid var(--line); overflow: hidden; }
.fm-gauge-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; min-width: 2px; transition: width .25s ease; }
.fm-gauge-fill.is-ok { background: var(--ok); } .fm-gauge-fill.is-warn { background: var(--c-tussock); } .fm-gauge-fill.is-err { background: var(--err); }
.fm-gauge-limline { position: absolute; right: 0; top: -2px; bottom: -2px; width: 2px; background: var(--ink-3); opacity: .5; }
/* Parallel + doorsnede compact naast elkaar */
.fm-cable-controls { display: flex; gap: 12px; flex-wrap: nowrap; margin-top: 10px; }
.fm-cable-typegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.fm-cable-typegrid .fm-cable-typerow { margin-top: 0; }
.fm-cable-typerow { display: flex; align-items: center; gap: 8px; margin-top: 10px; min-width: 0; }
.fm-cable-typerow .fm-ctrl-label { flex: none; }
.fm-cable-typerow .nf-select { flex: 1; min-width: 0; max-width: 170px; }
.fm-cable-typegrid { grid-template-columns: 1.25fr 1fr; gap: 6px; }
.fm-ctrl { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fm-ctrl-label { font-size: 11px; font-weight: 500; color: var(--ink-3); letter-spacing: .01em; white-space: nowrap; }
.fm-csa-stepper.is-sm { gap: 3px; }
.fm-csa-stepper.is-sm .fm-parallel-btn { width: 22px; height: 22px; font-size: 14px; padding: 0; }
.fm-csa-stepper.is-sm .fm-csa-value { min-width: 26px; font-size: 12.5px; text-align: center; }
.fm-csa-stepper.is-sm .fm-csa-auto { padding: 3px 5px; }
/* Verplichte-velden-banner bovenin de kabelberekening */
.fm-gapbar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 4px 20px 12px; padding: 9px 13px;
  background: var(--warn-50); color: var(--c-tussock-600);
  border: 1px solid var(--c-tussock); border-radius: 8px;
  font-size: 12.5px;
}
.fm-gapbar b { color: var(--c-tussock-600); }
.fm-gapbar svg { flex: none; }
.fm-gapbar-lead { font-weight: 600; }
.fm-gapchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fm-gapchip {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 999px;
  background: rgba(255,255,255,.65); border: 1px solid var(--c-tussock);
  color: var(--c-tussock-600); font-size: 11.5px; font-weight: 500;
  white-space: nowrap;
}
/* Subverdeler-notitie: belasting volgt uit onderliggende groepen */
.fm-sub-note {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 2px 0 4px;
  padding: 7px 9px;
  background: var(--c-chambray-50);
  border-radius: 5px;
  color: var(--ink-2);
  font-size: 11.5px;
  line-height: 1.35;
}
.fm-sub-note svg { flex: none; margin-top: 1px; color: var(--c-chambray); }
/* NEN-overtreding — rode foutbalk */
.fm-errbar {
  display: flex; align-items: center; gap: 9px;
  margin: 8px 20px 0; padding: 9px 13px;
  background: var(--err-50); color: var(--err);
  border: 1px solid var(--err); border-radius: 8px;
  font-size: 12.5px;
}
.fm-errbar b { color: var(--err); }
.fm-errbar svg { flex: none; }
/* Oranje markering op verplichte invoer die nog leeg/0 is */
.fm-need input, input.fm-need, .fm-need select { border-color: var(--c-tussock) !important; background: var(--warn-50); }
.norma-cable-result {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 14px;
  background: linear-gradient(180deg, var(--c-chambray-50), var(--surface));
  border: 1px solid var(--c-chambray);
  border-radius: 8px;
}
.norma-cable-result-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.norma-cable-result-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.norma-cable-result-side .nf-computed { padding: 5px 8px; font-size: 11.5px; background: var(--surface); }
.norma-stage-wrap {
  position: relative;
  display: inline-block;
  width: 108px;
}
.norma-stage-wrap .badge {
  width: 100%;
  justify-content: center;
}
.norma-stage-select {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font: inherit;
  width: 100%;
  border: none;
}
.norma-stage-wrap:hover .badge {
  box-shadow: 0 0 0 2px var(--c-chambray-50);
  cursor: pointer;
}
.norma-star-btn {
  background: transparent;
  border: none;
  padding: 4px;
  border-radius: 3px;
  cursor: pointer;
  display: inline-flex;
}
.norma-star-btn:hover { background: var(--surface-2); }

/* ============================================================
   NEN updates screen
   ============================================================ */
.norma-up-list { display: flex; flex-direction: column; gap: 0; }
.norma-up-card {
  display: flex;
  gap: 12px;
  padding: 4px 0;
}
.norma-up-rail {
  position: relative;
  width: 28px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}
.norma-up-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  margin-top: 18px;
  border: 3px solid var(--bg);
  flex-shrink: 0;
  z-index: 1;
}
.norma-up-dot.err  { background: var(--err); }
.norma-up-dot.warn { background: var(--c-tussock); }
.norma-up-dot.info { background: var(--info); }
.norma-up-line {
  position: absolute;
  top: 30px;
  bottom: -8px;
  width: 1px;
  background: var(--line);
}
.norma-up-body {
  flex: 1;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 14px;
}
.norma-up-items {
  list-style: none;
  margin: 6px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 6px;
}
.norma-up-items li {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.55;
}


/* ============================================================
   Feeder modal — calculation tracing
   ============================================================ */
.fm-trace {
  margin-top: 14px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.fm-trace-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex; flex-direction: column;
  gap: 10px;
}
.fm-trace-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.fm-trace-step {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  background: var(--c-chambray);
  color: white;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 50%;
  margin-top: 1px;
}
.fm-trace-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}
.fm-trace-formula {
  display: block;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--ink-2);
  background: var(--surface);
  padding: 6px 9px;
  border-radius: 4px;
  border-left: 2px solid var(--c-chambray);
  line-height: 1.55;
  white-space: normal;
  word-break: break-word;
}
.fm-trace-formula b { color: var(--c-chambray); font-weight: 600; }
.fm-trace-foot {
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--surface);
  border-radius: 4px;
  font-size: 11px;
  color: var(--ink-3);
}
.fm-trace-foot code {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--ink-2);
}


/* Parallel override buttons */
.fm-parallel-btn.is-blocked {
  opacity: 0.32;
  text-decoration: line-through;
  cursor: not-allowed;
}
.fm-suggest-btn {
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px; width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--c-tussock, #c79a3e);
  background: var(--c-tussock-50, #faf3e3);
  color: var(--c-tussock-600, #8a6d1e);
  border-radius: 6px; cursor: pointer;
  font-size: 11.5px; font-weight: 500; text-align: left;
  transition: background .12s;
}
.fm-suggest-btn:hover { background: var(--c-tussock-100, #f3e6c4); }
.fm-maxcsa-bar {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  margin-top: 8px;
}
.fm-parallel-bar {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.fm-parallel-label {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
}
.fm-parallel-buttons {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.fm-parallel-btn {
  font: inherit;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  min-width: 30px;
  padding: 4px 0;
  text-align: center;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink-2);
}
.fm-parallel-btn:hover { background: var(--surface-2); border-color: var(--line-strong); }
.fm-parallel-btn.is-on {
  background: var(--c-chambray);
  color: white;
  border-color: var(--c-chambray);
}
.fm-parallel-hint {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--ink-4);
}
/* Doorsnede −/+ stepper */
.fm-csa-stepper { display: flex; align-items: center; gap: 6px; }
.fm-csa-stepper .fm-parallel-btn { width: 28px; height: 26px; font-size: 15px; padding: 0; display: grid; place-items: center; }
.fm-csa-stepper .fm-parallel-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.fm-csa-value { min-width: 64px; text-align: center; font-weight: 700; font-size: 13px; }
.fm-csa-auto {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 4px;
  font: inherit; font-size: 11px; font-weight: 600; color: var(--c-chambray);
  background: var(--c-chambray-50); border: 1px solid var(--c-chambray);
  border-radius: 6px; padding: 3px 8px; cursor: pointer;
}
.fm-csa-auto:hover { background: var(--c-chambray); color: #fff; }

/* Installatiemethode-picker met NEN 52.A.3 illustraties */
.fm-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.fm-row3[data-fmfocus="cable-length"] { grid-template-columns: 0.75fr 0.85fr 1.25fr; }
/* Compactere popup: Beveiliging en Kabel zonder scrollen in beeld */
.fm-modal .fm-col { gap: 4px; }
.fm-modal .fm-divider { margin: 2px 0; }
.fm-modal .fm-section-title { margin: 2px 0 1px; }
.fm-modal .nf-input, .fm-modal .nf-seg { height: 28px; }
.fm-modal .fm-row-type { margin-bottom: 6px; }
.fm-row-prot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.fm-row-prot.has-holder { grid-template-columns: 1fr 1fr 1fr; }
.fm-row-type { margin-bottom: 8px; display: flex; gap: 8px; align-items: flex-start; }
.fm-row-type > .nf-field { flex: 1; }
.fm-row-type > .nf-field:first-child { flex: 1.7; }
.fm-method-picker { display: flex; flex-direction: column; gap: 6px; }
.fm-method-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}
.fm-method-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 5px 3px 4px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink-2);
  transition: border-color .12s, background .12s;
}
.fm-method-card:hover { background: var(--surface-2); border-color: var(--line-strong); }
.fm-method-card.is-on {
  border-color: var(--c-chambray);
  background: var(--c-chambray-50);
  box-shadow: 0 0 0 1px var(--c-chambray);
}
.fm-method-svg {
  width: 100%; height: 30px;
  color: var(--ink-2);
}
.fm-method-card.is-on .fm-method-svg { color: var(--c-chambray); }
.fm-method-id {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--ink-3);
}
.fm-method-card.is-on .fm-method-id { color: var(--c-chambray); }
.fm-method-cardimg {
  width: 100%; height: 46px;
  object-fit: contain;
  background: #fff;
  border-radius: 3px;
}
.fm-method-caption {
  font-size: 11px; color: var(--ink-2);
  padding: 2px 1px;
  text-wrap: pretty;
}
.fm-method-caption .dim { color: var(--ink-4); }

.fm-trace-note { color: var(--ink-4); font-style: italic; }

/* Installatiemethode trigger-knop (opent NEN 52.A.3 popup) */
.fm-method-trigger {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: border-color .12s, background .12s;
}
.fm-method-trigger:hover { border-color: var(--c-chambray); background: var(--c-chambray-50); }
/* Nog niet ingevuld — vraagt om aandacht */
.fm-method-trigger.is-empty {
  border-color: var(--warn);
  border-style: dashed;
  background: var(--warn-50);
  padding-left: 12px;
}
.fm-method-trigger.is-empty:hover { border-color: var(--c-tussock-600); background: var(--warn-50); }
.fm-method-empty-title { font-size: 13px; font-weight: 700; color: var(--c-tussock-600); }
.fm-method-trigger.is-empty .fm-method-trigger-desc { color: var(--c-tussock-600); opacity: 0.85; }
.fm-method-trigger .fm-method-svg { width: 48px; height: 28px; flex: none; color: var(--ink-2); }
.fm-method-thumb {
  width: 56px; height: 34px; flex: none;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.fm-method-trigger-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.fm-method-trigger-id { font-size: 13px; font-weight: 700; color: var(--c-chambray); }
.fm-method-trigger-desc { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-method-trigger-cta { font-size: 10.5px; color: var(--ink-4); white-space: nowrap; }

/* Aderconfiguratie cross-sectie */
.cc-svg { width: 100%; height: 100%; display: block; }
.fm-config-thumb {
  width: 46px; height: 36px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 6px;
  background: #fff; overflow: hidden;
}
.fm-config-thumb .cc-svg { width: 44px; height: 34px; }
.fm-config-nr { font-size: 10px; color: var(--ink-4); font-weight: 500; }

.mp-modal-cfg { width: min(620px, 94vw) !important; height: min(620px, 92vh); }
.mp-cfg-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 18px 16px; }
.mp-cfg-group { margin-top: 12px; }
.mp-cfg-grouptitle {
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 4px 2px; border-bottom: 1px solid var(--line); margin-bottom: 8px;
}
.mp-cfg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.mp-cfg-card {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 3px 2px 3px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); cursor: pointer;
  transition: border-color .12s, background .12s;
  position: relative;
}
.mp-cfg-star {
  position: absolute; top: 3px; right: 3px;
  width: 22px; height: 22px; display: grid; place-items: center;
  border: none; background: transparent; cursor: pointer; padding: 0;
  color: var(--ink-4); border-radius: 5px; opacity: 0; transition: opacity .12s, color .12s, background .12s;
}
.mp-cfg-card:hover .mp-cfg-star { opacity: 1; }
.mp-cfg-star:hover { background: var(--surface-2); color: var(--c-tussock-600); }
.mp-cfg-star.is-fav { opacity: 1; color: var(--c-tussock); }
.mp-cfg-star.is-fav svg { fill: var(--c-tussock); }
.mp-cfg-card.is-on { border-color: var(--c-chambray); background: var(--c-chambray-50); box-shadow: inset 0 0 0 1px var(--c-chambray); }
.mp-cfg-svg { width: 76px; height: 58px; display: block; }
.mp-cfg-svg .cc-svg { width: 76px; height: 58px; }
.mp-cfg-label { font-size: 11px; font-weight: 700; color: var(--ink); text-align: center; }
.mp-cfg-sub { font-size: 9.5px; color: var(--ink-4); }
.fm-method-trigger-id { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--c-chambray); }
.fm-method-basis-badge {
  font-size: 10px; font-weight: 700;
  padding: 1px 5px; border-radius: 4px;
  background: var(--c-chambray); color: #fff;
  letter-spacing: 0.04em;
}

/* Methode-picker zoekbalk + lijst */
.mp-search {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 18px 0; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2); color: var(--ink-3);
}
.mp-search input {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: 13px; color: var(--ink);
}
.mp-search-clear { border: none; background: transparent; cursor: pointer; color: var(--ink-3); display: flex; }
.mp-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px; }
.mp-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px;
  align-content: start;
}
.mp-grouphead {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 4px 2px 8px;
}
.mp-grouphead:not(:first-child) { margin-top: 16px; }
.mp-fav-star { color: var(--c-tussock-600, #c79a3a); }
.mp-card-fav {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
  background: rgba(255,255,255,0.9);
  color: var(--ink-4);
  cursor: pointer;
  transition: color .12s, transform .08s;
}
.mp-card-fav:hover { transform: scale(1.15); color: var(--c-tussock-600, #c79a3a); }
.mp-card-fav.is-on { color: var(--c-tussock-600, #c79a3a); }

/* ── Responsive: kabelberekening-popup klapt kolommen in op smallere schermen ── */
@media (max-width: 1280px) {
  .fm-body {
    grid-template-columns: 1fr 1fr !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .fm-col {
    overflow-y: visible !important;
    min-width: 0 !important;
  }
  .fm-col:nth-child(2) { border-right: none; }
  .fm-col:nth-child(4) { border-right: none; }
}
@media (max-width: 760px) {
  .fm-body { grid-template-columns: 1fr !important; }
  .fm-col { border-right: none; }
  .fm-modal { width: 96vw; }
}
.mp-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px; text-align: left;
  align-self: start;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.mp-card:hover { border-color: var(--c-chambray); background: var(--c-chambray-50); }
.mp-card.is-on { border-color: var(--c-chambray); box-shadow: inset 0 0 0 1px var(--c-chambray); background: var(--c-chambray-50); }
.mp-card-imgwrap { position: relative; }
.mp-card-img {
  width: 100%; height: 96px;
  object-fit: contain; background: #fff;
  border: 1px solid var(--line); border-radius: 6px;
}
.mp-card-check {
  position: absolute; top: 5px; right: 5px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-chambray); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.mp-card-cap { display: flex; align-items: center; gap: 6px; min-height: 18px; }
.mp-card-nr { font-size: 12px; font-weight: 700; color: var(--ink); line-height: 1; }
.mp-card-desc {
  font-size: 10.5px; color: var(--ink-2); line-height: 1.35; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(1.35em * 3);
}
.mp-card-cond { display: block; color: var(--c-chambray); font-weight: 600; margin-top: 1px; }

/* Methode-picker sub-popup */
.mp-overlay { z-index: 60; }
.mp-modal {
  width: min(1100px, 94vw);
  height: min(760px, 92vh);
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.32);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.mp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.mp-title { font-size: 16px; font-weight: 600; color: var(--ink); }
.mp-body {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 340px 1fr;
}
.mp-pick {
  padding: 16px 18px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto;
}
.mp-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.mp-current {
  padding: 10px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface-2);
}
.mp-current-id { font-size: 13px; font-weight: 700; color: var(--c-chambray); margin-bottom: 2px; }
.mp-hint {
  display: flex; gap: 6px; align-items: flex-start;
  font-size: 11px; color: var(--ink-3); line-height: 1.5;
  padding: 8px 10px; background: var(--c-chambray-50); border-radius: 6px;
}
.mp-ref {
  overflow-y: auto; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--surface-2);
}
.mp-ref-img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 6px;
  background: white; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.mp-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-top: 1px solid var(--line);
  background: var(--surface-2);
}

.fm-grouptype {
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px; padding: 5px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 11px; color: var(--ink-2);
}
.fm-grouptype .dim { color: var(--ink-4); }

/* Resultaatlijst in één oogopslag (4e kolom) */
.fm-glance {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  background: var(--surface);
}
.fm-irow {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
  padding: 2px 10px;
  font-size: 11.5px;
  border-bottom: 1px solid var(--line);
}
.fm-irow:last-child { border-bottom: none; }
.fm-irow-label { color: var(--ink-2); }
.fm-irow-sym { color: var(--ink-4); font-size: 10.5px; }
.fm-irow-value { color: var(--ink); font-weight: 500; white-space: nowrap; }
.fm-irow-unit { color: var(--ink-4); font-weight: 400; font-size: 10.5px; }
.fm-irow.is-bold { background: var(--c-chambray-50); }
.fm-irow.is-bold .fm-irow-value { font-weight: 700; color: var(--c-chambray); }
.fm-irow.is-dim .fm-irow-value { color: var(--ink-4); }
.fm-irow.is-err .fm-irow-value { color: var(--c-danger, #c0392b); font-weight: 700; }
.fm-irow.is-ok .fm-irow-value { color: var(--ink); }
.fm-glance-prov {
  margin-top: 6px;
  padding: 6px 8px;
  font-size: 10px;
  color: var(--ink-4);
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: 5px;
  word-break: break-all;
  line-height: 1.5;
}

.fm-title-row { display: flex; align-items: center; gap: 8px; }
.fm-title-edit { font-size: 10.5px; color: var(--c-chambray); background: var(--c-chambray-50); padding: 2px 7px; border-radius: 5px; white-space: nowrap; font-weight: 500; }
.fm-title-input { width: 260px !important; border: 1px solid var(--line) !important; background: var(--surface) !important; font-size: 14px !important; font-weight: 600 !important; padding: 6px 9px !important; margin: 0 !important; border-radius: 6px !important; }
.fm-title-input:hover { border-color: var(--line-strong) !important; }
.fm-title-input:focus { border-color: var(--c-chambray) !important; outline: none !important; }

/* ============================================================
   Auth — inlog / registratie & laadscherm
   ============================================================ */
.auth-loading {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  background: var(--surface-2, #f4f4f2);
  color: var(--ink, #1a1a1a);
}
.auth-loading-text { font-size: 13.5px; color: var(--ink-3, #777); }

.auth-wrap {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px;
  background:
    radial-gradient(120% 120% at 50% -10%, color-mix(in oklab, var(--c-chambray) 8%, transparent), transparent 60%),
    var(--surface-2, #f4f4f2);
}
.auth-card {
  width: 100%; max-width: 408px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e4e2dc);
  border-radius: 16px;
  box-shadow: var(--sh-3, 0 20px 50px rgba(0,0,0,0.10));
  padding: 32px 32px 26px;
}
.auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; }
.auth-brand-name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.auth-brand-sub { font-size: 11.5px; color: var(--ink-3, #888); font-family: var(--ff-mono, monospace); }
.auth-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; }
.auth-lede { font-size: 13px; color: var(--ink-3, #777); line-height: 1.5; margin: 0 0 22px; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field span { font-size: 12px; font-weight: 500; color: var(--ink-2, #444); }
.auth-field input {
  font: inherit; font-size: 14px;
  height: 42px; padding: 0 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e4e2dc);
  border-radius: 9px;
  color: var(--ink, #1a1a1a);
  transition: border-color .12s, box-shadow .12s;
}
.auth-field input:hover { border-color: var(--line-strong, #cfcdc6); }
.auth-field input:focus {
  outline: none;
  border-color: var(--c-chambray);
  box-shadow: 0 0 0 3px var(--c-chambray-50, rgba(52,74,134,0.12));
}
.auth-submit { width: 100%; justify-content: center; height: 44px; margin-top: 4px; font-size: 14px; }

.auth-msg { font-size: 12.5px; line-height: 1.45; padding: 9px 12px; border-radius: 8px; }
.auth-msg.is-err { color: var(--err, #b23a3a); background: color-mix(in oklab, var(--err, #b23a3a) 9%, transparent); }
.auth-msg.is-ok  { color: var(--ok, #1f7a47); background: color-mix(in oklab, var(--ok, #1f7a47) 10%, transparent); }

.auth-terms { font-size: 11.5px; line-height: 1.5; color: var(--ink-3); margin: -2px 0 2px; }
.auth-terms a { color: var(--ink-3); text-decoration: underline; }
.auth-terms a:hover { color: var(--c-chambray); }

.auth-switch { margin-top: 18px; text-align: center; font-size: 13px; color: var(--ink-3, #777); }
.auth-switch button {
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--c-chambray); background: none; border: none; cursor: pointer; padding: 0;
}
.auth-switch button:hover { text-decoration: underline; }
.auth-foot { font-size: 11.5px; color: var(--ink-4, #999); }

.norma-logout-btn {
  display: grid; place-items: center;
  width: 28px; height: 28px; flex: none;
  background: transparent; border: none; border-radius: 7px;
  color: var(--ink-3, #888); cursor: pointer; transition: background .12s, color .12s;
}
.norma-logout-btn:hover { background: var(--surface-sunken, #ededea); color: var(--err, #b23a3a); }

/* Sortable table headers */
.tbl-th-sort { cursor: pointer; user-select: none; }
.tbl-th-sort:hover { color: var(--ink, #1a1a1a); }
.tbl-th-inner { display: inline-flex; align-items: center; gap: 4px; }

.insp-foot { padding: 14px 16px 16px; border-top: 1px solid var(--line, #e4e2dc); margin-top: 6px; }

.proj-filter {
  font: inherit; font-size: 13px; height: 30px;
  padding: 0 8px; border: 1px solid var(--line, #e4e2dc); border-radius: 7px;
  background: var(--surface, #fff); color: var(--ink, #1a1a1a); cursor: pointer;
}
.proj-filter:hover { border-color: var(--line-strong, #cfcdc6); }

/* Row action menu (3-dots) */
.row-menu-wrap { position: relative; display: inline-flex; }
.row-menu-backdrop { position: fixed; inset: 0; z-index: 40; }
.row-menu {
  position: absolute; top: 100%; right: 0; z-index: 41;
  margin-top: 4px; min-width: 156px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e4e2dc);
  border-radius: 9px;
  box-shadow: var(--sh-3, 0 12px 30px rgba(0,0,0,0.12));
  padding: 4px;
}
.row-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font: inherit; font-size: 13px; text-align: left;
  padding: 8px 10px; border: none; border-radius: 6px;
  background: transparent; color: var(--ink, #1a1a1a); cursor: pointer;
}
.row-menu-item:hover { background: var(--surface-2, #f4f4f2); }
.row-menu-item.is-danger { color: var(--err, #b23a3a); }
.row-menu-item.is-danger:hover { background: color-mix(in oklab, var(--err, #b23a3a) 10%, transparent); }
.row-menu-title {
  padding: 6px 10px 5px; font-size: 11px; font-weight: 600;
  color: var(--ink-3, #7a766d); border-bottom: 1px solid var(--line-soft, #e8e4da);
  margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}


/* ΔU-paneel: rail-kopregels + ingesprongen subgroepen */
.vd-railrow td { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 5px 10px; font-size: 11px; color: var(--ink-2); }
.vd-twig { color: var(--ink-4); margin-right: 5px; font-family: var(--ff-mono); font-size: 10px; }

/* Subverdeler-rail: het klikvlak (railhead) is exclusief — rijvlakken stoppen ervoor */

/* ── Bèta-disclaimer ─────────────────────────────────────────── */
.dc-modal { position: relative; background: var(--surface); border-radius: 16px; box-shadow: 0 24px 64px rgba(31,46,85,0.28); width: 520px; max-width: 94vw; padding: 26px 28px 20px; }
.dc-badge { display: inline-block; font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--c-tussock-600, #8a6a2f); background: var(--warn-50, #fdf6e7); border: 1px solid var(--warn, #d8a13a); border-radius: 4px; padding: 3px 8px; margin-bottom: 14px; }
.dc-title { font-size: 19px; font-weight: 700; margin: 0 0 10px; }
.dc-lede { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin: 0 0 14px; text-wrap: pretty; }
.dc-list { margin: 0 0 14px; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.dc-list li { font-size: 13.5px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.dc-list li::marker { color: var(--c-chambray, var(--c-chambray)); }
.dc-fine { font-size: 12px; line-height: 1.5; color: var(--ink-3); margin: 0 0 20px; padding-top: 13px; border-top: 1px solid var(--line); }
.dc-actions { display: flex; justify-content: flex-end; gap: 10px; }
.dc-modal-wide { width: 860px; }
.dc-src-scroll { max-height: 58vh; overflow: auto; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 10px; }
.dc-src { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.4; }
.dc-src th { position: sticky; top: 0; background: var(--surface-2); text-align: left; font-weight: 600; color: var(--ink-2); padding: 7px 9px; border-bottom: 1px solid var(--line); }
.dc-src td { padding: 6px 9px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink); }
.dc-src td:first-child, .dc-src td:nth-child(3), .dc-src td:nth-child(4) { white-space: nowrap; color: var(--ink-2); }
.dc-badge-link { margin-top: 3px; display: inline-flex; cursor: pointer; border-radius: 5px; }
.dc-badge-link:hover { opacity: .78; }
.dc-badge-link:focus-visible { outline: 2px solid var(--c-chambray, var(--c-chambray)); outline-offset: 2px; }

/* Wachtwoord vergeten */
.auth-forgot { align-self: flex-end; margin: -8px 0 -2px; border: none; background: none; padding: 2px 0; font: inherit; font-size: 12px; color: var(--ink-3); cursor: pointer; }
.auth-forgot:hover { color: var(--c-chambray); text-decoration: underline; }
/* Merkregel en voetregel niet laten afbreken */
.auth-brand { align-items: center; }
.auth-brand-sub { white-space: nowrap; }
.auth-foot { white-space: nowrap; }

/* Werk staat niet in de cloud — mag niet te missen zijn */
.cloud-alert { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 300; display: flex; align-items: flex-start; gap: 11px; width: min(620px, calc(100vw - 32px)); padding: 12px 14px; background: var(--err-50, #fdeceb); border: 1px solid var(--err, #b3261e); border-left-width: 4px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.16); color: var(--ink); }
.cloud-alert > svg { flex: 0 0 auto; color: var(--err, #b3261e); margin-top: 1px; }
.cloud-alert .ca-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.cloud-alert .ca-text b { font-size: 13px; }
.cloud-alert .ca-text span { font-size: 12px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.cloud-alert .ca-btn { flex: 0 0 auto; align-self: center; background: var(--err, #b3261e); border-color: var(--err, #b3261e); color: #fff; }
.cloud-alert .ca-btn:hover:not(:disabled) { filter: brightness(1.08); color: #fff; }

/* Versienummer in de statusbalk, naast Auto-opslag */
.sb-version { color: var(--ink-4); white-space: nowrap; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; position: relative; }
.sb-version:hover { color: var(--c-chambray); text-decoration: underline; }
.sb-version-dot { position: absolute; top: -2px; right: -7px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-chambray); }
.wn-modal { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 64px); display: flex; flex-direction: column; }
.wn-body { overflow: auto; padding: 4px 20px 12px; }
.wn-rel h3 { font-size: 14px; margin: 14px 0 6px; }
.wn-group { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin: 10px 0 2px; }
.wn-rel ul { margin: 0; padding-left: 18px; }
.wn-rel li { font-size: 13px; line-height: 1.45; margin: 3px 0; }

.dg-probpop{position:fixed;z-index:900;width:320px;font-family:var(--ff-sans);background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.16);overflow:hidden}
.dg-probpop-head{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--ink-3)}
.dg-probpop-head span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-probpop-x{background:none;border:none;cursor:pointer;font-size:16px;line-height:1;color:var(--ink-4);padding:0 2px}
.dg-probpop-x:hover{color:var(--ink)}
.dg-probpop-item{display:flex;flex-direction:column;gap:4px;padding:10px;border-bottom:1px solid var(--line)}
.dg-probpop-item:last-child{border-bottom:none}
.dg-probpop-title{font-size:12.5px;font-weight:650;color:var(--err)}
.dg-probpop-what{font-size:12px;line-height:1.45;color:var(--ink-2)}
.dg-probpop-fix{font-size:12px;line-height:1.45;color:var(--ink-3)}
.dg-probpop-btn{align-self:flex-start;margin-top:2px;font:inherit;font-size:11.5px;padding:4px 9px;border-radius:5px;border:1px solid var(--c-chambray);background:var(--surface);color:var(--c-chambray);cursor:pointer}
.dg-probpop-btn:hover{background:var(--c-chambray);color:#fff}
.fm-focus-flash{animation:fmFocusFlash 1.6s ease-out}
@keyframes fmFocusFlash{0%,40%{box-shadow:0 0 0 3px var(--c-chambray);border-radius:6px}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}

.mp-cfg-card.is-blocked{opacity:.42;cursor:not-allowed;position:relative}
.mp-cfg-card.is-blocked:hover{border-color:var(--line);background:var(--surface)}
.mp-cfg-blocked{position:absolute;left:6px;right:6px;bottom:5px;font-size:9.5px;line-height:1.2;color:var(--err);text-align:center}

.sel-sub{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:3px;margin-left:6px;white-space:nowrap;cursor:help}
.sel-sub.ok{background:var(--ok-50,#eef7f1);color:var(--ok,#1f8a5b)}
.sel-sub.warn{background:var(--warn-50,#fdf4e3);color:var(--warn,var(--warn))}
.sel-sub.err{background:var(--err-50,#fdecea);color:var(--err,#c0392b)}

.selp-doc{font-family:var(--ff-sans);color:#22252A;background:#fff}
.selp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:8px;border-bottom:1px solid #D8D5CC}
.selp-h1{font-size:15px;font-weight:650;letter-spacing:-.01em}
.selp-sub{font-size:11px;color:#8A8F98;margin-top:3px}
.selp-meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:11.5px;color:#4A4F57;margin:10px 0 12px}
.selp-meta b{font-family:var(--ff-mono);font-weight:600;color:#22252A}
/* Het blad is een kolom: kop en meta vast, de grafiek krijgt de rest en
   schaalt mee binnen de vaste paginahoogte. */
.selp-page{display:flex;flex-direction:column}
.selp-graph{flex:1;min-height:0;border:1px solid #D8D5CC;border-radius:6px;overflow:hidden;display:flex}
.selp-graph svg{display:block;width:100% !important;height:100% !important;max-height:100%;flex:1}
.selp-verdict{font-size:12px;border:1px solid #D8D5CC;border-radius:6px;padding:8px 11px;margin-top:10px}
.selp-foot{font-size:9.5px;color:#8A8F98;margin-top:10px;padding-top:7px;border-top:1px solid #E6E3DA}


/* ============================================================
   Tablet / touch (iPad) — desktop blijft leidend
   ============================================================ */
/* Bediening die op de desktop pas bij hover verschijnt, is op een touchscreen
   onbereikbaar: daar staat hij altijd aan. */
@media (hover: none) {
  .norma-outline-grip, .dg-reorder, .dg-fgrip, .mp-cfg-star { opacity: 1 !important; }
  .norma-outline-actions { opacity: 1 !important; visibility: visible !important; }
}
/* Vingermaat: knoppen en rijen minimaal 44 px hoog (Apple HIG / WCAG 2.5.8). */
@media (hover: none) and (min-width: 700px) {
  .btn, .norma-outline-row, .row-menu-item, .co-row, .vd-trow { min-height: 44px; }
  .btn { padding-top: 9px; padding-bottom: 9px; }
}
/* Staand gehouden tablet: de app is op 1440 px getekend en wordt dan zo klein
   dat niets meer leesbaar is. Vraag om liggend gebruik in plaats van een
   onbruikbaar scherm. */
.norma-rotate { display: none; }
@media (hover: none) and (orientation: portrait) and (max-width: 1200px) {
  .norma-rotate {
    display: flex; position: fixed; inset: 0; z-index: 9000;
    flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    padding: 40px; text-align: center; background: var(--bg, var(--bg)); color: var(--ink, #1c180e);
    font-family: var(--ff, 'IBM Plex Sans', sans-serif);
  }
  .norma-rotate-ic { width: 54px; height: 54px; border: 2px solid currentColor; border-radius: 9px; opacity: .5; }
  .norma-rotate h2 { font-size: 19px; font-weight: 600; margin: 0; }
  .norma-rotate p { font-size: 14.5px; line-height: 1.5; color: var(--ink-3, #6b6659); max-width: 34ch; margin: 0; }
}


/* ============================================================
   Safari / iOS
   ============================================================ */
/* iPadOS-focuszoom wordt in app.html voorkomen (viewport maximum-scale), niet met
   16 px-velden: die lieten de tweekolomsvensters overlopen. */
/* Veilige zone (notch/home-indicator) bij vaste balken. */
.norma-statusbar { padding-bottom: env(safe-area-inset-bottom, 0); }

.sel-graphside .sel-side-tune .sel-graph-sel { padding-top: 4px; padding-bottom: 4px; }
.sel-graphside .sel-graph-verdict { padding: 8px 10px; }
.sel-side-main.is-compact { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; }
.sel-side-oneline { font-size: 11.5px; color: var(--ink-2); line-height: 1.35; }
.sel-side-main.is-compact .sel-side-oneline b { color: var(--ink); }
.sel-graphside .sel-graph-verdict { flex: 0 0 auto; overflow: visible; }
.sel-graphside > * { flex: 0 0 auto; }
.sel-side-tune { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; }
.sel-side-tune > .sel-graph-lbl { grid-column: 1 / -1; }
.sel-side-tune > .sel-tune-note { grid-column: 1 / -1; }
.sel-tune-row { grid-template-columns: 46px minmax(0, 1fr); }
.sel-tune-row label { font-size: 11.5px; }
.sel-graphside .sel-graph-note { flex: 0 1 auto; overflow: hidden; }
.sel-graphside .sel-graph-verdict { flex-direction: column; gap: 6px; }
.sel-verdict-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sel-verdict-list li { display: flex; flex-direction: column; gap: 1px; padding-left: 9px; border-left: 3px solid var(--line); line-height: 1.4; color: var(--ink-2); }
.sel-verdict-list li.is-ok { border-left-color: #1F8A5B; }
.sel-verdict-list li.is-warn { border-left-color: #B08C00; }
.sel-verdict-list li.is-err { border-left-color: #C0392B; }
.sel-verdict-list li b { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
.sel-verdict-cite { font-style: normal; color: var(--ink-4); white-space: nowrap; }
.sel-side-tune > .vd-pill, .sel-side-tune > .btn { grid-column: 1 / -1; justify-self: start; }
.sel-side-tune > .sel-graph-lbl { text-transform: none; letter-spacing: 0; font-size: 11.5px; color: var(--ink-2); }

/* Profielafbeelding-kiezer */
.norma-avatar-wrap { position: relative; flex: none; }
.norma-avatar.as-btn { padding: 0; border: 1px solid var(--line); cursor: pointer; overflow: hidden; box-sizing: border-box; display: grid; place-items: center; line-height: 0; }
.norma-avatar.as-btn > svg { width: 100%; height: 100%; display: block; }
.norma-avatar.as-btn:hover { border-color: var(--c-tussock); }
.avatar-pop { position: fixed; z-index: 61; bottom: 74px; left: 14px; width: 268px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-4); box-shadow: var(--sh-3); padding: 12px; }
.avatar-pop-title { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.avatar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.avatar-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-3); cursor: pointer; font: inherit; font-size: 10.5px; color: var(--ink-2); }
.avatar-opt:hover { border-color: var(--c-chambray); color: var(--ink); }
.avatar-opt.is-on { border-color: var(--c-tussock); box-shadow: 0 0 0 2px var(--c-tussock-50); color: var(--ink); font-weight: 600; }
.avatar-init { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-chambray); color: #fff; font-family: var(--ff-mono); font-size: 13px; font-weight: 600; }
.norma-outline-nestedrow { display: flex; align-items: center; }
.norma-outline-nestedrow.is-dragging { opacity: .45; }
.norma-outline-nestedrow.is-drop { box-shadow: inset 0 2px 0 var(--c-tussock); }
.norma-outline-nestedrow .norma-outline-grip { opacity: 0; cursor: grab; margin-right: 2px; color: var(--ink-4); }
.norma-outline-nestedrow:hover .norma-outline-grip { opacity: 1; }
.norma-crash { max-width: 620px; margin: 48px auto; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-4); box-shadow: var(--sh-2); }
.norma-crash h2 { margin: 0 0 8px; font-size: 17px; }
.norma-crash p { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); }
.norma-crash-msg { margin: 0 0 16px; padding: 10px 12px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--r-3); font-family: var(--ff-mono); font-size: 11.5px; white-space: pre-wrap; word-break: break-word; color: var(--ink); }
.norma-crash-hint { margin: 14px 0 0; font-size: 11.5px; color: var(--ink-3); }

/* Groepsvenster — statusregel in de onderbalk (17-10) */
.fm-status { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.fm-st { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; line-height: 1.3; }
.fm-st-txt { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fm-st.is-err { color: var(--err); }
.fm-st.is-gap { color: var(--warn, #b7791f); }
.fm-st.is-note { color: var(--ink-2); }
.fm-st.muted { font-size: 11.5px; }
.fm-st-x { background: none; border: none; padding: 0; cursor: pointer; color: inherit; display: inline-flex; }
.fm-modal .fm-col { gap: 4px; }
.fm-modal .fm-cable-card { padding: 10px 12px; }

/* Wat Kabelkompas automatisch heeft aangepast (17-10) */
.fm-auto-chip { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 11.5px; font-weight: 600; color: var(--c-chambray); background: var(--c-chambray-50); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.fm-auto-tag { font-size: 10px; font-weight: 600; color: var(--c-chambray); background: var(--c-chambray-50); padding: 1px 6px; border-radius: 999px; cursor: help; }

/* Keuzelijsten: eigen uitklaplijst met lucht tussen de regels i.p.v. de kale browserlijst (Chrome/Edge 135+;
   andere browsers houden de standaardlijst). */
@supports (appearance: base-select) {
  .nf-select select.nf-input-el, .nf-select select.nf-input-el::picker(select) { appearance: base-select; }
  .nf-select select.nf-input-el { border: none; background: transparent; padding: 0 6px 0 0; color: inherit; min-height: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; }
  .nf-select select.nf-input-el > button, .nf-select select.nf-input-el selectedcontent { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nf-select select.nf-input-el::picker-icon { display: none; }
  .nf-select select.nf-input-el::picker(select) {
    margin-top: 4px; padding: 5px; max-height: min(420px, 60vh);
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--sh-3);
    font-family: var(--ff-sans); font-size: 13px;
  }
  .nf-select select.nf-input-el option { padding: 7px 10px; border-radius: 6px; line-height: 1.3; color: var(--ink); cursor: pointer; }
  .nf-select select.nf-input-el option::checkmark { display: none; }
  .nf-select select.nf-input-el option:hover, .nf-select select.nf-input-el option:focus-visible { background: var(--surface-2); outline: none; }
  .nf-select select.nf-input-el option:checked { background: var(--c-chambray-50); color: var(--c-chambray); font-weight: 600; }
  .nf-select select.nf-input-el option:disabled { color: var(--ink-3); cursor: not-allowed; }
}

/* Instellingen → Merken: favorieten aan/uit */
.sm-brands { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.sm-brand { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; cursor: pointer; }
.sm-brand:hover { border-color: var(--c-chambray); }
.sm-brand.is-on { border-color: var(--c-chambray); background: var(--c-chambray-50); color: var(--c-chambray); font-weight: 600; }
.sm-brand-def { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }

/* Groepsvenster: velden in een rij onderaan uitlijnen — breekt een label (met ⓘ) over twee regels,
   dan blijven de invulvakken toch op één lijn (17-10). */
.fm-modal .fm-row2, .fm-modal .fm-row3, .fm-modal .fm-row-type { align-items: end; }

/* Aanbevolen kabel: klikbaar → zoeken bij de groothandel (nieuw tabblad) */
/* Lange namen (4x YMvKas 4x240/120mm² Cu) lopen door naar een tweede regel; het linkicoon volgt het laatste woord en valt nooit buiten het kader. */
a.fm-cable-shop { display: inline; white-space: normal; overflow-wrap: anywhere; color: inherit; text-decoration: none; cursor: pointer; }
a.fm-cable-shop svg { color: var(--c-chambray); opacity: .7; vertical-align: -1px; margin-left: 6px; }
a.fm-cable-shop:hover { color: var(--c-chambray); text-decoration: underline; text-underline-offset: 3px; }
a.fm-cable-shop:hover svg { opacity: 1; }

/* Zijbalk rail: gelijktijdigheid (RDF) per groep */
.insp-rdf { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.insp-rdf th { text-align: left; font-size: 10px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; padding: 4px 4px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.insp-rdf td { padding: 4px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.insp-rdf .num { text-align: right; }
.insp-rdf tr.is-over td { color: var(--ink); background: var(--surface-2); font-weight: 600; }

/* Bestellijst */
.bl-table .bl-sec td { padding-top: 14px; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); text-align: left; }
.bl-table .bl-link { color: inherit; text-decoration: none; }
.bl-table .bl-link:hover { color: var(--c-chambray); text-decoration: underline; }

/* ============================================================
   Rondleiding (src/rondleiding.jsx) en Help-menu
   ============================================================ */
.kb-tour { position: fixed; inset: 0; z-index: 9000; }
.kb-tour-vang { position: absolute; inset: 0; }
.kb-tour-dim { position: absolute; inset: 0; background: rgba(11,27,51,.55); }
.kb-tour-vlak {
  position: fixed; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(11,27,51,.55); outline: 2px solid var(--c-tussock);
  transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease;
}
.kb-tour-ballon {
  position: fixed; background: var(--surface); color: var(--ink);
  border-radius: 12px; padding: 12px 14px 12px; box-shadow: 0 14px 40px rgba(11,27,51,.28);
  border-top: 3px solid var(--c-tussock);
}
.kb-tour-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.kb-tour-teller { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--ink-4); }
.kb-tour-sluit { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-3); cursor: pointer; }
.kb-tour-sluit:hover { background: var(--surface-2); }
.kb-tour-titel { font-size: 15px; font-weight: 700; color: var(--c-chambray-600); margin-bottom: 4px; }
.kb-tour-tekst { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.kb-tour-knoppen { display: flex; justify-content: space-between; margin-top: 12px; }
/* Oefenproject: de gebruiker klikt zelf — alleen de ballon vangt klikken, het doel wordt licht omlijnd */
.kb-tour.is-oefen { pointer-events: none; }
.kb-tour.is-oefen .kb-tour-ballon { pointer-events: auto; }
.kb-tour.is-oefen .kb-tour-vlak { box-shadow: 0 0 0 9999px rgba(11,27,51,.18); outline-width: 3px; }
.kb-tour-wacht { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--c-chambray); }
.kb-tour-puls { width: 8px; height: 8px; border-radius: 50%; background: var(--c-tussock); animation: kb-tour-puls 1.2s ease-in-out infinite; }
@keyframes kb-tour-puls { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

.kb-help-acties { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.kb-help-actie {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  font: inherit; color: var(--ink); cursor: pointer;
}
.kb-help-actie:hover { border-color: var(--c-chambray); background: var(--c-chambray-50); }
.kb-help-actie > svg { margin-top: 2px; color: var(--c-chambray); flex: none; }
.kb-help-actie span { display: flex; flex-direction: column; gap: 1px; }
.kb-help-actie b { font-size: 12.5px; }
.kb-help-actie small { font-size: 11.5px; color: var(--ink-3); }
.kb-help-actie.is-binnenkort { opacity: .55; cursor: default; }
.kb-help-actie.is-binnenkort:hover { border-color: var(--line); background: var(--surface); }
.kb-help-actie > svg:last-child { margin: 4px 0 0 auto; color: var(--ink-4); }
.kb-help-actie span { flex: 1; }
.kb-help-badge { flex: none !important; align-self: center; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); background: var(--surface-2); border-radius: 999px; padding: 2px 7px; }
.kb-help-terug { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.kb-help-kop { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); margin: 2px 0 6px; padding-top: 8px; border-top: 1px solid var(--line); }

/* ============================================================
   Telefoon (≤ 640 px): één kolom, zijbalk als uitklapmenu.
   Alleen telefoons krijgen deze breedte (app.html zet daar width=device-width);
   tablets blijven op de 1440 px-weergave.
   Opbouw: smalle balk boven (☰, projectnaam, melding, export), inhoud, tabbalk onder
   (Lijst, Schema, Analyses). De desktopbalken (topbar, analyses, status) vallen weg.
   ============================================================ */
.kb-phonebar, .kb-nav-backdrop, .kb-tabbar { display: none; }
html.kb-phone .norma-rotate { display: none !important; }
@media (max-width: 640px) {
  .norma-app, .norma-app.is-collapsed { grid-template-columns: 1fr; }
  .norma-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 800; width: 260px;
    transform: translateX(-102%); transition: transform .2s ease;
    box-shadow: 0 0 24px rgba(11,27,51,.18);
  }
  .norma-app.nav-open .norma-sidebar { transform: none; }
  .norma-app.nav-open .kb-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 799; background: rgba(11,27,51,.32); }
  .norma-sidebar .norma-collapse-item { display: none; }
  .norma-sidebar-account { display: flex; flex-direction: column; gap: 6px; }

  /* Balk boven */
  .kb-phonebar {
    position: relative; display: flex; align-items: center; gap: 8px; flex: none;
    height: 52px; padding: 0 10px 0 8px; background: #DFE7F2; border-bottom: 1px solid var(--line);
  }
  .kb-phonebar-menu {
    display: grid; place-items: center; flex: none; width: 38px; height: 38px;
    border: 0; border-radius: 10px; background: transparent; color: var(--c-chambray);
  }
  .kb-phonebar-title {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 600; font-size: 16px; color: var(--c-chambray-600);
  }
  .kb-phonebar .norma-feedback-btn, .kb-phonebar .norma-exportmenu > .btn { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 10px; flex: none; }
  .kb-lbl { display: none; }
  .kb-phonebar .norma-feedback, .kb-phonebar .norma-exportmenu { position: static; }
  .norma-exportmenu-pop, .norma-feedback-pop { top: calc(100% + 4px); left: 8px; right: 8px; width: auto; }
  .norma-topbar { display: none; }

  /* Schema: lijst of tekening op het hele scherm, tabbalk onder */
  .norma-editor { grid-template-columns: 1fr !important; grid-template-rows: 1fr auto; }
  .norma-col-resizer { display: none; }
  .norma-editor.kb-pv-list .norma-canvas, .norma-editor.kb-pv-schema .norma-outline { display: none; }
  .norma-outline { border-right: 0; min-height: 0; }
  .kb-tabbar {
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: var(--surface); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .kb-tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: 56px; border: 0; background: transparent; color: var(--ink-3);
    font: inherit; font-size: 11.5px; font-weight: 600; position: relative;
  }
  .kb-tabbar button.is-on { color: var(--c-chambray); }
  .kb-tabbar button.is-on::before {
    content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--c-tussock);
  }

  /* Analyses als paneel van onderen */
  .kb-sheet-backdrop { position: fixed; inset: 0; z-index: 700; background: rgba(11,27,51,.32); }
  .kb-sheet {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--surface); border-radius: 16px 16px 0 0;
    padding: 8px 14px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 30px rgba(11,27,51,.18);
  }
  .kb-sheet-grip { width: 38px; height: 4px; border-radius: 2px; background: var(--line-strong, #c9d1dc); margin: 0 auto 10px; }
  .kb-sheet-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
  .kb-sheet .norma-analysis-bar { display: block; padding: 0; background: none; border: 0; overflow: visible; }
  .kb-sheet .analysis-bar-label, .kb-sheet .analysis-divider { display: none; }
  .kb-sheet .analysis-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; overflow: visible; }
  .kb-sheet .analysis-icon { width: auto; height: 62px; border-radius: 10px; }
  .kb-sheet .analysis-eindcontrole { display: flex; width: 100%; justify-content: center; height: 48px; margin: 14px 0 0; }

  /* Schematekening: één regel met de naam en de zoomknoppen; analyses en status zitten elders */
  .norma-canvas > .norma-analysis-bar, .norma-status-bar { display: none; }
  .norma-doc-title { flex: 1; min-width: 0; padding: 4px 8px; }
  .norma-doc-title > .muted, .norma-doc-title .badge { display: none; }
  .norma-doc-title-text { overflow: hidden; text-overflow: ellipsis; }
  /* Knijpzoomen doet het schema zelf (screen_editor.jsx); de pagina zoomt hier niet mee. */
  .norma-canvas-area { touch-action: pan-x pan-y; }
  .norma-diagram-wrap { padding: 10px; }

  /* Vensters schermvullend */
  .np-overlay { padding: 0; }
  .np-modal, .np-inspector-pop, .co-modal, .mp-modal, .dc-modal {
    width: 100vw !important; max-width: 100vw !important;
    height: 100dvh !important; max-height: 100dvh !important;
    border-radius: 0; grid-template-columns: 1fr;
  }
  .np-side { display: none; }
  /* Team: lid boven, rol en knop eronder; uitnodigen over twee regels */
  .kb-team-tbl thead { display: none; }
  .kb-team-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--line); }
  .kb-team-tbl td { border: 0 !important; padding: 4px 0 !important; }
  .kb-team-tbl td:first-child { grid-column: 1 / -1; padding-top: 10px !important; }
  .kb-team-invite { flex-wrap: wrap; }
  .kb-team-invite > :first-child { flex: 1 1 100% !important; }
  .kb-team-invite > :nth-child(2) { flex: 1; width: auto !important; min-width: 0; }
  /* Instellingen: tabs als strook bovenaan (het zijmenu valt weg), velden onder hun naam */
  .sm-modal { grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) !important; }
  .sm-modal .np-side { display: flex; flex-direction: column; min-width: 0; gap: 8px; padding: 10px 12px 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sm-modal .np-side-head, .sm-modal .np-side-foot { display: none; }
  .sm-modal .sm-tabs { flex-direction: row; overflow-x: auto; gap: 4px; scrollbar-width: none; }
  .sm-modal .sm-tab { width: auto; flex: none; height: 32px; }
  .sm-modal .sm-tab-meta { display: none; }
  .sm-row { grid-template-columns: 1fr; gap: 6px; padding: 10px 14px; }
  /* Analysevensters: kruisje altijd rechtsboven, titel ernaast */
  .co-head { position: relative; padding-right: 56px; }
  .co-head > .np-close { position: absolute !important; top: 10px; right: 10px; }
  .sel-viewtabs { padding: 8px 12px 0; }
  .vd-tablewrap { padding: 0 12px 4px; }
  /* 1F / 3F: groepskolom blijft staan bij zijwaarts scrollen */
  .vd-table:not(.sel-table) th:first-child, .vd-table:not(.sel-table) td:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
  .vd-table:not(.sel-table) thead th:first-child { z-index: 3; background: var(--surface-2); }
  .vd-modal .vd-tablewrap { padding: 0 0 4px; }
  .vd-modal .vd-table th:first-child, .vd-modal .vd-table td:first-child { padding-left: 12px; }
  /* Selectiviteit: elke groep een kaartje (paar, vier waarden, beoordeling) */
  .sel-mainbar { padding-left: 12px; padding-right: 12px; }
  .sel-table, .sel-table tbody { display: block; }
  .sel-table thead { display: none; }
  .sel-table .vd-trow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 6px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
  .sel-table .vd-trow.is-err { background: color-mix(in srgb, var(--err-50) 70%, transparent); }
  .sel-table .vd-trow td { padding: 0; border: 0; background: none !important; }
  .sel-table .vd-c-code, .sel-table .vd-c-rem { grid-column: 1 / -1; }
  .sel-table .vd-c-num { text-align: left; font-size: 12px; }
  .sel-table .vd-c-num::before { content: attr(data-l); display: block; font-family: var(--ff-sans, inherit); font-size: 10px; color: var(--ink-4); }
  .sel-table .vd-indent { padding-left: 0 !important; }
  .sel-table .vd-c-rem .sel-sub:first-of-type { margin-left: 4px; }
  /* Tijd-stroomcurve: keuze en oordeel boven, grafiek eronder */
  .sel-viewtabs { flex-wrap: wrap; }
  .sel-tabs-legend { margin-left: 0; width: 100%; justify-content: flex-start; gap: 4px 12px; padding: 6px 2px 0; }
  .sel-tabs-legend .sel-leg { white-space: normal; }
  .sel-graphwrap.sel-graphcols { display: flex; flex-direction: column; padding: 10px 12px 14px; overflow: auto; }
  .sel-graphside { display: contents; }
  .sel-graphwrap.sel-graphcols > *, .sel-graphside > * { flex: none; }
  .sel-graphmain { order: 1; }
  .sel-side-main, .sel-side-tune, .sel-graphside .sel-graph-note { order: 2; margin-top: 0; }
  .sel-side-tune { grid-template-columns: 1fr !important; }
  .sel-graphmain { flex: none; }
  .sel-chart.is-smal { height: auto; flex: none; }
  .sel-chart.is-smal .sel-axlab { font-size: 13px; }
  .sel-chart.is-smal .sel-axtitle { font-size: 13px; }
  /* Eindcontrole: naam boven, toetsen eronder */
  .co-scroll { padding: 10px 12px; }
  .co-row { flex-wrap: wrap; gap: 8px 10px; }
  .co-row-id { flex: 1 1 0; width: auto; }
  .co-row > svg:last-child { order: 2; }
  .co-row-checks { order: 3; flex: 1 1 100%; padding-left: 19px; }
  .fm-head { padding: 8px 12px; gap: 8px; }
  .fm-foot { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); gap: 6px; }
  .fm-foot .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; padding-left: 8px; padding-right: 8px; font-size: 13px; }
  .fm-auto-chip { display: none; }
  /* Groepsvenster: status (voldoet / nog in te vullen) op een eigen regel boven de knoppen — was 5 px breed */
  .fm-foot { flex-wrap: wrap; row-gap: 6px; }
  .fm-foot .fm-status { flex: 1 1 100%; order: -1; min-width: 0; }
  /* Invoervelden iets hoger: makkelijker raak tikken */
  .np-modal .nf-input { height: 38px; }
  .co-head { flex-wrap: wrap; padding: 12px; gap: 8px; }
  /* Printen gaat op de iPhone over twee pagina's; Download PDF levert wel één blad (en de telefoon print die PDF). */
  .kb-print-btn { display: none !important; }
  .ig-table th:first-child, .ig-table td:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
  .ig-table thead th:first-child { z-index: 3; background: var(--surface-2); }
  .mp-list { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .mp-card-img { height: 72px; }

  /* Projecten: projectnr., klant, status en bijgewerkt vallen weg; info-kaarten onder elkaar */
  .norma-screen-pad { padding: 14px 12px 40px; }
  .proj-head { flex-wrap: wrap; gap: 10px; }
  .proj-tbl th:nth-child(3), .proj-tbl td:nth-child(3), .proj-tbl th:nth-child(4), .proj-tbl td:nth-child(4),
  .proj-tbl th:nth-child(6), .proj-tbl td:nth-child(6), .proj-tbl th:nth-child(7), .proj-tbl td:nth-child(7) { display: none; }
  .proj-tbl th, .proj-tbl td { padding-left: 6px; padding-right: 6px; }
  .norma-info-row { grid-template-columns: 1fr; }
}

/* Donkerblauwe kopbalk (logo-band + topbalk), lichte tekst en knoppen. */
.norma-sidebar .norma-logo { background: #0B1B33; border-bottom-color: #0B1B33; }
.norma-sidebar .norma-logo-text { color: #fff; }
.norma-topbar { background: #0B1B33; border-bottom-color: #0B1B33; color: #fff; }
.norma-topbar .norma-crumbline { color: #A9BCD6; }
.norma-topbar .norma-crumbline .muted { color: #A9BCD6; }
.norma-topbar .norma-crumbline .norma-h1, .norma-topbar .norma-h1 { color: #fff; }
.norma-topbar .norma-topbar-search { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #A9BCD6; }
.norma-topbar .norma-topbar-search:focus-within { background: rgba(255,255,255,.14); border-color: #A9BCD6; }
.norma-topbar .norma-search-input { color: #fff; }
.norma-topbar .norma-search-input::placeholder { color: #A9BCD6; }
.norma-topbar .norma-exportmenu > .btn { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
.norma-topbar .norma-exportmenu > .btn:hover { background: rgba(255,255,255,.1); }
.norma-topbar .norma-feedback-btn { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
.norma-topbar .norma-feedback-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); color: #fff; }
.norma-topbar .norma-topbar-account { border-left-color: rgba(255,255,255,.16); }
.norma-topbar .norma-topbar-icon, .norma-topbar .norma-logout-btn { color: #A9BCD6; }
.norma-topbar .norma-topbar-icon:hover, .norma-topbar .norma-logout-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.norma-topbar .norma-user-info { color: #fff; }
.norma-topbar .up-badge { background: transparent; color: #A9BCD6; border-color: #A9BCD6; }

/* Tutorials-scherm */
.kb-tut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; max-width: 980px; }
.kb-tut { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.kb-tut p { margin: 0; flex: 1; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.kb-tut .btn { align-self: flex-start; }
.kb-tut-kop { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.kb-tut-icoon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--c-chambray-50); color: var(--c-chambray); flex: none; }
.kb-tut-duur { margin-left: auto; font-size: 11.5px; color: var(--ink-3); }
.kb-tut.is-soon { opacity: .7; }

.norma-mini-list li.is-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Handleiding "Hoe alles werkt" */
.hl-wrap { display: grid; grid-template-columns: 220px minmax(0, 820px); gap: 28px; align-items: start; }
.hl-inhoud { position: sticky; top: 0; display: flex; flex-direction: column; gap: 1px; }
.hl-terug { align-self: flex-start; }
.hl-inhoud-item { text-align: left; border: 0; background: none; padding: 6px 10px; border-radius: 6px; font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.hl-inhoud-item:hover { background: rgba(19,41,75,.05); }
.hl-inhoud-item.is-on { background: #fff; color: var(--c-chambray-600); font-weight: 600; box-shadow: inset 2px 0 0 #E9A800; }
.hl-hoofdstuk { padding: 20px 24px; margin-bottom: 14px; scroll-margin-top: 16px; }
.hl-hoofdstuk h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 16px; }
.hl-hoofdstuk p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.hl-velden { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; margin: 12px 0 0; border-top: 1px solid var(--line); }
.hl-velden dt, .hl-velden dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.5; }
.hl-velden dt { font-weight: 600; color: var(--ink); padding-right: 14px; }
.hl-velden dd { color: var(--ink-2); }
@media (max-width: 900px) { .hl-wrap { grid-template-columns: 1fr; } .hl-inhoud { position: static; } .hl-velden { grid-template-columns: 1fr; } .hl-velden dt { border-bottom: 0; padding-bottom: 0; } }