/* ============================================================
   SPARCE — Disassembly Map Interface
   ============================================================ */

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

:root {
  --panel-w:      370px;
  --radius:       10px;
  --font:         'Inter', system-ui, sans-serif;
  --teal:         #52575f;
  --orange:       #e07020;
  --gray:         #6b7280;
  --gray-l:       #e5e7eb;
  --text:         #1f2937;
  --red:          #c0392b;
  /* Muted severity palette — keeps meaning (good / warn / bad) but far less loud
     than the old bright green/orange/red, so the analysis reads calmer. */
  --sev-good:     #4f8069;
  --sev-warn:     #9a6a38;
  --sev-bad:      #9c534c;
  --panel-bg:     rgba(255,255,255,0.10);
  --shadow:       0 8px 32px rgba(0,0,0,0.09);
  /* Blue accent — derived from the intro-blue title card. Used to be amber
     #e8a020; switched so the app reads as one piece with the tutorial
     intro/outro cards. */
  --accent:       #3b82f6;
  --accent-light: rgba(59, 130, 246, 0.08);
  --navy:         #52575f;
  --navy-deep:    #383c42;
  --blue-accent:  #3b82f6;
  --blue-grad:    linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  --blue-light:   rgba(59, 130, 246, 0.07);
}

html, body {
  height: 100%; width: 100%;
  overflow: hidden;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  /* Whiter than before — was #d1d1d3 grey; now the same off-white wash
     used by the intro-blue title card so the canvas blends with the
     surrounding tutorial frame. */
  background: linear-gradient(135deg, #f4f8fd 0%, #f9fbff 50%, #ffffff 100%);
}

/* ── Tree canvas (full viewport) ─────────────────────────────────── */
/* Drifting starfield is drawn by bg-dots.js on a <canvas> child. */
#tree-canvas {
  position: fixed; inset: 0;
  background: linear-gradient(135deg, #f4f8fd 0%, #f9fbff 50%, #ffffff 100%);
  overflow: hidden;
}
#tree-canvas svg { width: 100%; height: 100%; position: relative; z-index: 1; }

/* ── Canvas title (product name, top-center) ─────────────────────── */
#canvas-title {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 20px;
  padding: 5px 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
  z-index: 90;
}
#canvas-title.visible { opacity: 1; }

/* ── Placeholder ─────────────────────────────────────────────────── */
#tree-placeholder {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-10%, -50%);
  text-align: center; pointer-events: none;
}
.ph-ghost-tree {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 28px;
}
.ph-ghost-root {
  width: 156px; height: 28px;
  border-radius: 6px;
  background: rgba(180,181,186,0.28);
  border: 1px solid rgba(150,152,158,0.30);
}
.ph-ghost-line {
  width: 1px; height: 28px;
  background: rgba(150,152,158,0.25);
}
.ph-ghost-comp {
  width: 116px; height: 24px;
  border-radius: 5px;
  background: rgba(180,181,186,0.18);
  border: 1px solid rgba(150,152,158,0.22);
}
.ph-title { font-size: 14px; font-weight: 500; color: #7a8090; margin-bottom: 5px; }
.ph-sub   { font-size: 12px; color: #a0a8b4; line-height: 1.6; }

/* ── Left overlay panel ──────────────────────────────────────────── */
#panel {
  position: fixed;
  top: 14px; left: 14px; bottom: 14px;
  width: var(--panel-w);
  background: transparent;
  border: none;
  display: flex; flex-direction: column;
  z-index: 250;
  will-change: transform, opacity;
  /* iOS-style snappy easing — fast start, gentle settle */
  transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1),
              opacity   0.22s ease-out;
  color: var(--text);
}

#panel-header {
  padding: 10px 14px 6px;
  flex-shrink: 0;
}
#panel-header h1 {
  font-size: 11px; font-weight: 600;
  color: var(--navy);
  text-transform: uppercase; letter-spacing: 0.07em;
}
#product-name-display {
  font-size: 11px;
  color: var(--gray);
  margin-top: 3px; min-height: 14px;
}

/* ── Panel grayed-out state (nothing selected) ───────────────────── */
#panel-body.no-selection {
  pointer-events: auto;
  overflow-y: auto;
}
#panel-body.no-selection input,
#panel-body.no-selection select,
#panel-body.no-selection textarea,
#panel-body.no-selection label,
#panel-body.no-selection .dot-row-opts,
#panel-body.no-selection .duo,
#panel-body.no-selection .trio,
#panel-body.no-selection .form-section,
#panel-body.no-selection .section-title,
#panel-body.no-selection .adv-field-hint {
  opacity: 0.28;
  filter: grayscale(0.4);
}

#panel-body {
  flex: 1; overflow-y: auto;
  padding: 10px 10px 20px; scrollbar-width: none;
  position: relative; z-index: 1;
}
#panel-body.docs-mode { padding: 0; }

/* ── Section cards ───────────────────────────────────────────────── */
/* @property registratie zodat de gradient-alpha's daadwerkelijk animeren
   tussen idle (no-selection) en editable state. CSS-gradients zijn anders
   niet-interpoleerbaar — variabelen via @property zijn dat wel. */
@property --card-a { syntax: '<number>'; inherits: false; initial-value: 0.74; }
@property --card-b { syntax: '<number>'; inherits: false; initial-value: 0.46; }

.section-card {
  --card-a: 0.74;
  --card-b: 0.46;
  background: linear-gradient(
    150deg,
    rgba(255,255,255,var(--card-a)) 0%,
    rgba(255,255,255,var(--card-b)) 100%
  );
  border: 1px solid rgba(255,255,255,0.88);
  border-radius: 12px;
  padding: 13px 14px 12px;
  margin-bottom: 8px;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.10),
    0 1px 3px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.96),
    inset 0 -1px 0 rgba(0,0,0,0.04);
  backdrop-filter: blur(24px) saturate(180%) brightness(1.02);
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.02);
}
/* Editable state: panel niet in .no-selection → cards solider, leesbaarder.
   Idle state behoudt de ghostly 74/46% transparency. */
#panel-body:not(.no-selection) .section-card {
  --card-a: 0.86;
  --card-b: 0.62;
  border-color: rgba(255,255,255,0.92);
  box-shadow:
    0 4px 21px rgba(0,0,0,0.11),
    0 1px 3px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 -1px 0 rgba(0,0,0,0.045);
}
/* Panel-body children: instant (geen fade) bij no-selection toggle. */
.section-card .section-label {
  padding-top: 0;
  border-top: none;
  margin-bottom: 12px;
}
#panel-banner {
  flex-shrink: 0;
  padding: 10px 10px 0;
}
#panel-banner:empty {
  padding: 0;
}
.edit-banner {
  font-size: 12px; color: var(--gray);
  padding: 9px 14px;
  margin-bottom: 0;
  background: linear-gradient(150deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.48) 100%);
  border: 1px solid rgba(255,255,255,0.80);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex; align-items: center; gap: 6px;
  height: 40px; box-sizing: border-box; overflow: hidden;
}
.edit-banner strong {
  color: var(--text); font-size: 13px; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.edit-banner-name {
  background: none; border: none; box-shadow: none;
  font-size: 13px; font-weight: 600; color: var(--text);
  font-family: var(--font); flex: 1; padding: 0; line-height: normal; height: 1em;
  outline: none; transition: box-shadow 0.15s; cursor: default; min-width: 0;
}
.edit-banner-name:hover { box-shadow: 0 1px 0 rgba(107,114,128,0.30); cursor: text; }
.edit-banner-name:focus { box-shadow: 0 1px 0 var(--accent, #e8a020); cursor: text; }
.btn-del-inline,
.btn-save-inline {
  background: none; border: none; padding: 3px 5px; border-radius: 5px;
  color: #b0b5bc; cursor: pointer; font-size: 13px; line-height: 1;
  transition: color 0.15s, background 0.15s; flex-shrink: 0; margin-left: auto;
  display: flex; align-items: center; justify-content: center;
}
.btn-del-inline:hover  { color: #c0392b; background: rgba(192,57,43,0.08); }
.btn-save-inline:hover { color: #16a34a; background: rgba(22,163,74,0.08); }
#panel-body::-webkit-scrollbar { display: none; }


/* ── Unified top bar (tabs + icons in one pill) ───────────────────── */
#top-bar {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;
  pointer-events: none;
}
.top-bar-inner {
  pointer-events: all;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 26px;
  padding: 4px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.80);
  backdrop-filter: blur(40px) saturate(180%) brightness(1.02);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.02);
}

/* ── Nav tabs — outlined pill style ──────────────────────────────── */
.nav-tab {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 14px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.08);
  background: transparent;
  color: var(--gray);
  font-size: 12px; font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.nav-tab::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.nav-tab.active {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.13);
  color: var(--navy-deep);
}
.nav-tab.active:not(.nav-home)::before { background: var(--accent); opacity: 1; }
.nav-tab:not(.active):hover {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.10);
  color: var(--text);
}
.nav-tab.nav-home { padding: 4px 10px; }
.nav-tab.nav-home::before { display: none; }
#top-bar.tabs-disabled .nav-tab:not(.nav-home) {
  opacity: 0.30; pointer-events: none;
}
#top-bar.tabs-disabled .nav-tab[data-tab="analyse"] {
  pointer-events: auto;
}
.nav-divider {
  width: 1px; height: 16px;
  background: rgba(0,0,0,0.12);
  margin: 0 2px;
  flex-shrink: 0;
}

/* Tab switch + panel content swap: instant, no transition animation */
/* Direct tree-canvas leave (used on Home button) */
#tree-canvas.canvas-leaving {
  opacity: 0 !important;
  transform: translateY(6px) scale(0.99) !important;
  pointer-events: none !important;
  transition: opacity 0.12s ease, transform 0.12s ease !important;
}
/* ── Analyse sub-nav (Product / Documentation) ───────────────────── */
#analyse-subnav {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 54px;
  z-index: 200;
  gap: 2px;
  min-width: 148px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
  backdrop-filter: blur(40px) saturate(180%) brightness(1.02);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.02);
}
body.subnav-active #analyse-subnav {
  display: flex;
}
.amode-btn {
  padding: 6px 14px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--gray);
  font-size: 12px; font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  letter-spacing: 0.01em;
  text-align: left;
  width: 100%;
}
.amode-btn.active {
  background: rgba(0,0,0,0.06);
  color: var(--navy-deep);
}
.amode-btn:not(.active):hover {
  background: rgba(0,0,0,0.04);
  color: var(--text);
}

body.dark #analyse-subnav {
  background: rgba(30,32,40,0.88);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 4px 20px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.20);
}
body.dark .amode-btn { color: var(--gray); }
body.dark .amode-btn.active { background: rgba(255,255,255,0.08); color: #e5e7eb; }
body.dark .amode-btn:not(.active):hover { background: rgba(255,255,255,0.05); color: var(--text); }

/* ── Documentation chatbot main area (STEP_BUILD) ──────────────── */
#docs-chat-main {
  display: none;
  position: fixed;
  top: 60px;
  left: calc(var(--panel-w) + 28px);
  right: 14px;
  bottom: 14px;
  flex-direction: column;
  /* Clean, light surface — neutral card rather than heavy glass. */
  background: #fcfdfe;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 10px 40px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  z-index: 30;
  overflow: hidden;
}
body.docs-chat-active #docs-chat-main { display: flex; }
body.docs-chat-active #tree-placeholder { display: none !important; }

.dcm-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 26px 30px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.12) transparent;
}
.dcm-msgs::-webkit-scrollbar { width: 4px; }
.dcm-msgs::-webkit-scrollbar-track { background: transparent; }
.dcm-msgs::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }

/* ── Input area: a single rounded "card" holding attach + input + send ── */
.dcm-input-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 10px 20px 18px;
  padding: 6px 8px 6px 8px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: border-color 0.16s, box-shadow 0.16s;
}
.dcm-input-row:focus-within {
  border-color: rgba(59,130,246,0.55);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
#dcm-input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 0;
  padding: 8px 8px;
  font-size: 13px;
  font-family: var(--font);
  outline: none;
  background: transparent;
  box-shadow: none;
  color: var(--text);
}
#dcm-input::placeholder { color: #9ca3af; }

/* Attach affordance — subtle icon button on the left of the card. */
.dcm-input-row .docs-chat-attach-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  color: #6b7280;
}
.dcm-input-row .docs-chat-attach-btn:hover {
  background: rgba(0,0,0,0.05);
  color: var(--text);
}

/* Send — a small arrow button on the right of the card. */
.dcm-input-row #dcm-send {
  width: 32px; height: 32px;
  border: none;
  border-radius: 50%;
  background: #1f2430;
  color: #fff;
  box-shadow: none;
  font-size: 15px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.dcm-input-row #dcm-send:hover { background: #2d3140; }
.dcm-input-row #dcm-send:active { transform: scale(0.94); }

/* Save — secondary, subtle text button to the right of the card. */
.dcm-input-row #dcm-save {
  height: 32px; padding: 0 12px;
  border: none;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
  color: #6b7280;
  font-size: 12px; font-weight: 500;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.dcm-input-row #dcm-save:hover { background: rgba(0,0,0,0.05); color: var(--text); }
.dcm-input-row #dcm-save.saved { background: rgba(22,163,74,0.12); color: #16a34a; }

/* ── EN 45554 + DPP sidebar checklist ───────────────────────────── */
.dcm-checklist { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 5px; }
.dcm-cl-header {
  font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px;
}
.dcm-cl-progress-wrap { height: 3px; background: rgba(0,0,0,0.08); border-radius: 2px; overflow: hidden; margin-bottom: 2px; }
.dcm-cl-progress-bar  { height: 100%; background: #16a34a; border-radius: 2px; transition: width 0.4s ease; }

/* Progress stats row */
.dcm-cl-stats { display: flex; align-items: center; gap: 4px; font-size: 10.5px; margin-bottom: 6px; flex-wrap: wrap; }
.dcm-stat-ok      { color: #16a34a; font-weight: 600; }
.dcm-stat-partial { color: #eab308; font-weight: 600; }
.dcm-stat-miss    { color: #9ca3af; }
.dcm-stat-sep     { color: #d1d5db; }
.dcm-cl-pct       { margin-left: auto; font-weight: 700; font-size: 11px; color: var(--text); }

/* Checklist rows */
.dcm-cl-row { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #9ca3af; padding: 2px 4px; border-radius: 5px; transition: color 0.2s, background 0.15s; }
.dcm-cl-row.dcm-cl-active { background: rgba(99,102,241,0.08); color: var(--text); }
.dcm-cl-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Evidence count badge */
.dcm-cl-ev { font-size: 9px; font-weight: 700; background: #3b82f6; color: #fff; border-radius: 8px; padding: 1px 5px; flex-shrink: 0; }

/* Status dots */
.dcm-cl-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; transition: background 0.2s; }
.dcm-st-complete_verified   { background: #16a34a; }
.dcm-st-complete_unverified { background: #16a34a; }
.dcm-st-partial             { background: #eab308; }
.dcm-st-missing             { background: rgba(0,0,0,0.13); }
.dcm-st-not_applicable      { background: #d1d5db; }

/* Status row text colours */
.dcm-cl-complete_verified   { color: var(--text); }
.dcm-cl-complete_unverified { color: var(--text); }
.dcm-cl-partial             { color: #6b7280; }
.dcm-cl-missing             { color: #9ca3af; }
.dcm-cl-not_applicable      { color: #d1d5db; text-decoration: line-through; }

/* Legend */
.dcm-cl-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 10px; color: #9ca3af; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(0,0,0,0.06); }
.dcm-leg { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* ── Context panel (above chat messages) ─────────────────────────── */
.dcm-context {
  /* Small, subtle rounded chip — not a heavy bar. */
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  align-self: flex-start;
  width: fit-content;
  max-width: calc(100% - 40px);
  margin: 16px 20px 2px;
  padding: 5px 12px; font-size: 11px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 999px;
}
.dcm-ctx-label    { font-weight: 500; color: #9ca3af; }
.dcm-ctx-cat      { font-weight: 600; color: var(--text); }
.dcm-ctx-sep      { color: #d1d5db; }
.dcm-ctx-dpp-label{ color: #9ca3af; }
.dcm-ctx-dpp      { font-weight: 600; color: #6b7280; }

/* ── Evidence action buttons (below input) ───────────────────────── */
.dcm-evidence-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 14px 9px;
}
.dcm-ev-btn {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; font-family: var(--font);
  padding: 4px 11px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.50);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  color: #6b7280; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.dcm-ev-btn:hover {
  background: rgba(255,255,255,0.80);
  color: var(--text);
  border-color: rgba(255,255,255,0.90);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.dcm-ev-btn.dcm-ev-na { color: #9ca3af; }
.dcm-ev-btn.dcm-ev-na:hover { background: rgba(239,68,68,0.10); color: #ef4444; border-color: rgba(239,68,68,0.35); }

body.dark .dcm-context        { background: rgba(80,84,130,0.20); border-color: rgba(255,255,255,0.08); }
body.dark .dcm-ev-btn         { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); color: #9ca3af; }
body.dark .dcm-ev-btn:hover   { background: rgba(255,255,255,0.12); color: #c8cdd8; }
body.dark .dcm-cl-legend      { border-color: rgba(255,255,255,0.08); }
body.dark .dcm-st-missing     { background: rgba(255,255,255,0.15); }
body.dark .dcm-cl-not_applicable { color: #4b5563; }

body.docs-chat-active #panel {
  background: rgba(248,250,254,0.68);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.82);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
}

body.dark #docs-chat-main {
  background: #191b24;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 8px 40px rgba(0,0,0,0.30);
}
body.dark.docs-chat-active #panel {
  background: rgba(22,24,34,0.72);
  border-right-color: rgba(255,255,255,0.06);
}
body.dark .dcm-input-row {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  box-shadow: none;
}
body.dark .dcm-input-row:focus-within {
  border-color: rgba(96,165,250,0.55);
  box-shadow: 0 0 0 3px rgba(96,165,250,0.15);
}
body.dark .dcm-cl-row.dcm-cl-ok { color: #c8cdd8; }
body.dark .dcm-cl-row.dcm-cl-ok .dcm-cl-dot { background: #c8cdd8; }
body.dark .dcm-cl-progress-bar { background: #c8cdd8; }
body.dark #dcm-input {
  background: transparent;
  border: none;
  color: #c8cdd8;
  box-shadow: none;
}
body.dark #dcm-input::placeholder { color: #6b7280; }
body.dark .dcm-input-row .docs-chat-attach-btn { color: #8a90a0; }
body.dark .dcm-input-row .docs-chat-attach-btn:hover { background: rgba(255,255,255,0.08); color: #e2e8f0; }
body.dark .dcm-input-row #dcm-send { background: #e8e9ec; color: #15171e; }
body.dark .dcm-input-row #dcm-send:hover { background: #fff; }
body.dark .dcm-input-row #dcm-save { color: #8a90a0; }
body.dark .dcm-input-row #dcm-save:hover { background: rgba(255,255,255,0.08); color: #e2e8f0; }
body.dark .dcm-input-row #dcm-save.saved { background: rgba(22,163,74,0.18); color: #4ade80; }

#dcm-file-pill {
  position: absolute;
  bottom: 58px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(30,32,42,0.82);
  color: #e2e8f0;
  font-size: 11px;
  font-family: var(--font);
  padding: 4px 8px 4px 7px;
  border-radius: 20px;
  max-width: 260px;
  pointer-events: all;
  z-index: 2;
}
#dcm-file-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dcm-pill-remove {
  background: none; border: none; color: rgba(255,255,255,0.55);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0 0 2px; flex-shrink: 0;
}
#dcm-pill-remove:hover { color: #fff; }
body.dark #dcm-file-pill { background: rgba(15,17,24,0.90); }

/* ── Right-edge vertical toolbar ─────────────────────────────────── */
#side-toolbar {
  position: fixed;
  right: 14px;
  top: 14px;
  display: flex;
  flex-direction: row;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  z-index: 20;
}
.side-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.60);
  background: rgba(255,255,255,0.45);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.75);
  backdrop-filter: blur(40px) saturate(180%) brightness(1.02);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.02);
  cursor: pointer; color: var(--gray);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: var(--font);
}
.side-btn svg { width: 13px; height: 13px; }
.side-btn:hover { background: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.80); color: var(--navy-deep); }

/* Theme button: fixed size so icon swap never shifts layout */
#theme-btn { position: relative; min-width: 33px; height: 25px; }
#theme-btn svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#theme-icon-sun { display: none; }

/* ── Download menu ─────────────────────────────────────────────── */
.download-menu {
  position: fixed;
  right: 14px;
  top: 52px;
  z-index: 300;
  background: rgba(248,248,250,0.96);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(180,180,192,0.38);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08);
  padding: 5px;
  min-width: 192px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  transition: opacity 0.12s, transform 0.12s;
  transform-origin: top right;
}
.download-menu-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.94) translateY(-4px);
}
.dl-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: none;
  background: none;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font, Inter, sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: var(--navy, #52575f);
  width: 100%;
  transition: background 0.1s;
}
.dl-item svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--gray, #9ca3af); }
.dl-item:hover { background: rgba(0,0,0,0.05); }
.dl-item:hover svg { color: var(--navy, #52575f); }
.dl-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dl-sub {
  font-size: 10px;
  font-weight: 400;
  color: var(--gray, #9ca3af);
}
.dl-sep {
  height: 1px;
  background: rgba(180,180,192,0.28);
  margin: 3px 4px;
}
.dl-group {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray, #9ca3af);
  padding: 2px 10px 1px;
}

body.dark .download-menu {
  background: rgba(28,31,40,0.97);
  border-color: rgba(255,255,255,0.08);
}
body.dark .dl-item { color: #c8cad4; }
body.dark .dl-item:hover { background: rgba(255,255,255,0.06); }
body.dark .dl-sep { background: rgba(255,255,255,0.08); }

/* ── Search (side-toolbar) ─────────────────────────────────────── */
#search-wrap { display: flex; align-items: center; gap: 6px; }
#search-expand {
  overflow: hidden;
  transition: width 0.2s ease, opacity 0.2s ease;
  opacity: 1;
}
#search-expand.search-collapsed { width: 0; opacity: 0; pointer-events: none; }
#search-expand.search-open      { width: 180px; opacity: 1; pointer-events: all; }
#search-input {
  width: 100%;
  padding: 5px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.60);
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(40px) saturate(180%) brightness(1.02);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.02);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.75);
  font-size: 11px; font-family: var(--font); color: var(--text);
  outline: none;
}
#search-results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 200px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  overflow: hidden;
  display: none;
  z-index: 50;
}
#search-results.has-results { display: block; }
.search-result-item {
  padding: 7px 12px;
  font-size: 11px; font-family: var(--font); color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: rgba(107,114,128,0.08); }
.search-result-hotspot { color: #c0392b; font-weight: 600; }
#search-wrap { position: relative; }


/* ── Tab content views ───────────────────────────────────────────── */
.tab-view {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  z-index: 5; pointer-events: none;
}
body.tab-results    .tab-view[data-view="results"]      { display: flex; pointer-events: all; flex-direction: column; align-items: stretch; justify-content: flex-start; padding-top: 58px; overflow: hidden; }
body.tab-optimisation .tab-view[data-view="optimisation"] { display: flex; }

/* Analyse view uses a clean white canvas (keeps the top nav pills reading
   as white, not bluish); optimisation keeps the off-white starfield wash. */
body.tab-results .tab-view[data-view="results"] {
  background: #ffffff;
}
body.tab-optimisation .tab-view[data-view="optimisation"] {
  background: linear-gradient(135deg, #f4f8fd 0%, #f9fbff 50%, #ffffff 100%);
  overflow: hidden;
}
/* Drifting starfield is drawn by bg-dots.js on a <canvas> child. */
body.tab-optimisation .tab-view[data-view="optimisation"] > * { position: relative; z-index: 1; }

body.tab-results #panel,
body.tab-results #tree-canvas,
body.tab-results #tree-placeholder,
body.tab-results #bottom-toolbar,
body.tab-optimisation #panel,
body.tab-optimisation #tree-canvas,
body.tab-optimisation #tree-placeholder { display: none; }
body.docs-chat-active #bottom-toolbar { display: none; }

.res-scroll-section {
  background: #ffffff;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  scroll-margin-top: 8px;
  counter-increment: res-section;
}
/* Flush content pane — no trailing divider under the last card of a section. */
.res-scroll-section .res-card:last-child { border-bottom: none; }
/* One section at a time — only the selected one is shown (print shows all). */
.res-scroll-section { display: none; }
.res-scroll-section.active { display: block; }
body.printing .res-scroll-section { display: block !important; }

.tab-view-inner { text-align: center; pointer-events: none; }
.tab-view-title { font-size: 15px; font-weight: 500; color: #9ca3af; margin-bottom: 6px; }
.tab-view-sub   { font-size: 12px; color: #d1d5db; line-height: 1.6; }

/* ── Bottom-right toolbar (Legend + Filter buttons) ──────────────── */
#bottom-toolbar {
  position: fixed;
  bottom: 16px; right: 16px;
  display: flex; gap: 6px; align-items: center;
  z-index: 50;
}
#bottom-toolbar button {
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.60);
  border-radius: 20px;
  padding: 5px 13px;
  font-size: 11px; font-family: var(--font);
  font-weight: 500; color: var(--gray);
  cursor: pointer;
  backdrop-filter: blur(40px) saturate(180%) brightness(1.02);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.02);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.75);
  transition: background 0.15s;
  display: flex; align-items: center; gap: 5px;
}
#bottom-toolbar button:hover { background: rgba(255,255,255,0.65); color: var(--text); }

/* ── Legend overlay (collapsible) ────────────────────────────────── */
#legend-bar {
  position: fixed;
  bottom: 52px; right: 16px;
  width: calc(100vw - 32px);
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.60);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.75);
  backdrop-filter: blur(40px) saturate(180%) brightness(1.02);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.02);
  padding: 10px 18px 13px;
  z-index: 260;
  transition: opacity 0.18s, transform 0.18s;
}
#legend-bar.legend-hidden { opacity: 0; pointer-events: none; transform: translateY(8px); }
.legend-close-row { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 8px; }
#legend-close { background: none; border: none; cursor: pointer; font-size: 13px; color: var(--gray); padding: 2px 5px; border-radius: 4px; font-family: var(--font); }
#legend-close:hover { background: var(--gray-l); }
.legend-cols { display: flex; gap: 0; align-items: flex-start; }
.legend-col { flex: 1; min-width: 0; padding: 0 16px 0 0; border-right: 1px solid var(--gray-l); }
.legend-col:last-child { border-right: none; padding-right: 0; }
.legend-col-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text); margin-bottom: 6px; }
.legend-force-header { display: flex; gap: 0; font-size: 9px; color: var(--gray); margin-bottom: 2px; }
.legend-swatch-row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.legend-swatch-label { font-size: 10px; color: var(--gray); width: 106px; flex-shrink: 0; }
.legend-swatch-bar { display: flex; flex: 1; height: 10px; border-radius: 3px; overflow: hidden; opacity: 0.65; }
.legend-swatch-bar > div { flex: 1; }
.legend-list { font-size: 10px; color: var(--gray); line-height: 1.8; }
.legend-penalties { display: flex; flex-direction: column; gap: 2px; }
.leg-pen { display: flex; align-items: center; gap: 5px; font-size: 10px; }
.pen-badge { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid; font-size: 8px; font-weight: 800; flex-shrink: 0; }
.legend-ind-row { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--gray); line-height: 1.8; }
.ind-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.ind-dot-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  font-size: 9px; font-weight: 700; color: #fff;
  font-family: var(--font); flex-shrink: 0;
}

/* ── Filter panel (collapsible) ──────────────────────────────────── */
#filter-bar {
  position: fixed;
  bottom: 52px; right: 16px;
  width: 220px;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.60);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.75);
  backdrop-filter: blur(40px) saturate(180%) brightness(1.02);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.02);
  padding: 10px 14px 13px;
  z-index: 49;
  transition: opacity 0.18s, transform 0.18s;
}
#filter-bar.filter-hidden {
  opacity: 0; pointer-events: none;
  transform: translateY(8px);
}
.filter-header-row {
  display: flex; justify-content: flex-end; align-items: center;
  margin-bottom: 8px;
}
.filter-title {
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--text);
}
#filter-close {
  background: none; border: none; cursor: pointer;
  font-size: 13px; color: var(--gray); padding: 2px 5px;
  border-radius: 4px; font-family: var(--font);
}
#filter-close:hover { background: var(--gray-l); }
.filter-section-label {
  font-size: 9px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--gray);
  margin-bottom: 5px; margin-top: 4px;
}
.filter-row {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--text);
  padding: 4px 3px; border-radius: 4px; cursor: pointer;
}
.filter-row:hover { background: #f9fafb; }
.filter-row input.pen-filter { display: none; }
.filter-row input.pen-filter + .pen-badge { transition: opacity 0.15s; }
.filter-row input.pen-filter:not(:checked) + .pen-badge { opacity: 0.25; }
.filter-cb { display: none; }
.filter-sep {
  border: none; border-top: 1px solid #e5e7eb; margin: 8px 0;
}
.filter-section-label {
  font-size: 10px; font-weight: 600; color: #9ca3af;
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 0 4px;
}
.filter-dot {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  flex-shrink: 0; opacity: 0.15; transition: opacity 0.15s;
}
.filter-cb:checked + .filter-dot { opacity: 0.85; }
.filter-swatch {
  width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0;
}

/* ── Section labels ──────────────────────────────────────────────── */
.section-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--navy-deep);
  margin-bottom: 10px; margin-top: 0;
  padding-top: 22px;
  border-top: 1px solid rgba(107, 114, 128, 0.13);
}
.section-label:first-child {
  padding-top: 0;
  border-top: none;
}

/* ── Form elements ───────────────────────────────────────────────── */
.form-row { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.form-row label { flex: 0 0 96px; font-size: 11px; color: var(--gray); }
.form-row input {
  flex: 1; font-size: 12px; font-family: var(--font);
  padding: 4px 7px; border: 1px solid rgba(107,114,128,0.25);
  border-radius: 5px;
  background: rgba(255,255,255,0.72);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.90);
  color: var(--text); outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.form-row select {
  flex: 1; font-size: 12px; font-family: var(--font);
  padding: 4px 24px 4px 7px;
  border: 1px solid rgba(107,114,128,0.25);
  border-radius: 5px;
  background: rgba(255,255,255,0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") no-repeat right 8px center;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.90);
  color: var(--text); outline: none;
  appearance: none; -webkit-appearance: none;
  transition: border-color 0.15s, background-color 0.15s;
  cursor: pointer;
}
.form-row input:focus  { border-color: rgba(59,130,246,0.55); box-shadow: 0 0 0 2px rgba(59,130,246,0.12); }
.form-row select:focus { border-color: rgba(59,130,246,0.55); box-shadow: 0 0 0 2px rgba(59,130,246,0.12); background-color: rgba(255,255,255,0.70); outline: none; }
.form-row select:hover { background-color: rgba(255,255,255,0.65); }
.form-row select:disabled, .trio-item select:disabled {
  opacity: 0.4; cursor: not-allowed;
}
input[type="number"] { width: 70px; flex: 0 0 70px; }

.trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; margin-bottom: 10px; }
.duo  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 10px; }
.trio-item label, .duo-item label { display: block; font-size: 10px; color: var(--gray); margin-bottom: 2px; }
.trio-item select, .duo-item select {
  width: 100%; font-size: 12px; font-family: var(--font);
  padding: 4px 22px 4px 4px;
  border: 1px solid rgba(107, 114, 128, 0.25); border-radius: 5px;
  background: rgba(255,255,255,0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") no-repeat right 6px center;
  color: var(--text); outline: none;
  appearance: none; -webkit-appearance: none;
  transition: border-color 0.15s, background-color 0.15s;
  cursor: pointer;
}
.trio-item select:focus, .duo-item select:focus { border-color: rgba(59,130,246,0.55); box-shadow: 0 0 0 2px rgba(59,130,246,0.12); background-color: rgba(255,255,255,0.70); }
.trio-item select:hover, .duo-item select:hover { background-color: rgba(255,255,255,0.65); }

/* ── Sliders ─────────────────────────────────────────────────────── */
.slider-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.slider-row label { font-size: 11px; color: var(--gray); flex: 0 0 100px; }
.slider-row .val  { font-size: 11px; font-weight: 500; color: var(--text); width: 30px; text-align: right; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--gray-l);
  cursor: pointer;
  outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: var(--gray-l);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--gray);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  margin-top: -4.5px;
}
input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: var(--gray-l);
  border: none;
}
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--gray);
  border: none;
  cursor: pointer;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 16px; border: none; border-radius: 8px;
  font-size: 12px; font-family: var(--font); font-weight: 500;
  cursor: pointer; transition: filter 0.15s, transform 0.1s; white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn:hover  { filter: brightness(1.06); }
.btn-primary   { background: rgba(0,0,0,0.05); color: var(--text); border: 1px solid rgba(0,0,0,0.12); }
.btn-secondary { background: #fff; color: var(--text); border: 1px solid rgba(0,0,0,0.12); }
.btn-ghost     { background: transparent;   color: var(--gray); border: 1px solid var(--gray-l); }
.btn-demo      { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.btn-danger    { background: #fee2e2; color: #c0392b; border: 1px solid #fca5a5; }
.btn-row { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; }

/* ── Step 0 name screen ──────────────────────────────────────────── */
#step-name { display: flex; flex-direction: column; gap: 0; padding-top: 8px; }
#step-name .logo { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--navy); margin-bottom: 8px; }
#step-name h2 { font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 28px; }
.name-section { margin-bottom: 8px; }
.name-section.section-card { padding: 7px 10px 8px; }

/* ── Product ↔ Documentation panel transition ─────────────────────
   Only the active panel takes up space; the hidden one is fully removed
   from layout so the section sizes to its actual content (geen dode
   ruimte onder de knoppen meer). Korte fade voor zachte overgang. */
.amode-stack { display: block; }
.amode-stack > .amode-panel {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: auto;
}
.amode-stack > .amode-panel.amode-panel-hidden {
  display: none;
}

/* History */
.hist-section { margin-top: 0; }
.hist-label { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray); margin-bottom: 10px; }
.hist-item {
  display: flex; flex-direction: row; align-items: center; gap: 6px;
  padding: 11px 12px; border-radius: 6px; cursor: pointer;
  margin-bottom: 4px;
  transition: background 0.12s;
}
.hist-item:hover { background: var(--accent-light); }
.hist-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hist-name { font-size: 11px; font-weight: 500; color: var(--text); }
.hist-ts   { font-size: 11px; color: var(--gray); opacity: 0.7; }
.hist-del  {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: var(--gray); font-size: 16px; line-height: 1; padding: 2px 4px;
  border-radius: 3px; opacity: 0.45; transition: opacity 0.12s;
}
.hist-del:hover { opacity: 1; }

/* Group filter dropdown — matches the app's form selects */
.hist-group-filter {
  width: 100%; margin-bottom: 8px;
  font-size: 12px; font-family: var(--font);
  padding: 5px 24px 5px 8px;
  border: 1px solid rgba(107,114,128,0.25);
  border-radius: 5px;
  background: rgba(255,255,255,0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") no-repeat right 8px center;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.90);
  color: var(--text); outline: none;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.hist-group-filter:focus { border-color: rgba(59,130,246,0.55); box-shadow: 0 0 0 2px rgba(59,130,246,0.12); }

/* Group chip on the right of each history item (click to assign / rename) */
.hist-group {
  flex-shrink: 0; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: rgba(107,114,128,0.12); border: 1px solid rgba(107,114,128,0.2);
  color: var(--gray); font-size: 10px; font-family: var(--font);
  padding: 2px 8px; border-radius: 10px; cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.hist-group:hover { background: rgba(107,114,128,0.2); color: var(--text); }
.hist-group-empty { opacity: 0.55; font-style: italic; }

body.dark .hist-group-filter { background-color: rgba(30,33,42,0.9); color: #c8cdd8; border-color: rgba(255,255,255,0.12); }
body.dark .hist-group { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #9aa1ad; }
body.dark .hist-group:hover { background: rgba(255,255,255,0.12); color: #e5e7eb; }

/* ── Full-screen loading overlay — a disassembly tree growing on a loop ────── */
.page-loader {
  position: fixed; inset: 0; z-index: 100002;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 14, 22, 0.55);      /* dims the screen (both themes) */
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: pl-fade 0.2s ease;
}
.page-loader[hidden] { display: none; }
@keyframes pl-fade { from { opacity: 0; } to { opacity: 1; } }
.pl-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pl-caption { font-size: 12px; color: #cbd5e1; letter-spacing: 0.04em; }

/* Grow: root bar stays; branches draw and nodes pop, then everything retracts
   back into the single rounded bar — and the cycle repeats. */
.pl-tree line { stroke-dasharray: 60; }
.pl-tree circle, .pl-tree rect { transform-box: fill-box; transform-origin: center; }
/* Resting state = just the rounded bar (nodes hidden, branches undrawn), so the
   loop always begins from the bar — even at the very first paint. */
.pl-tree .pl-n1, .pl-tree .pl-n2 { opacity: 0; transform: scale(0); }
.pl-tree .pl-l1, .pl-tree .pl-l2 { stroke-dashoffset: 60; }
.pl-l1  { animation: pl-l1 2.2s ease-in-out infinite; }
.pl-l2  { animation: pl-l2 2.2s ease-in-out infinite; }
.pl-n1  { animation: pl-n1 2.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
.pl-n2  { animation: pl-n2 2.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
.pl-bar { animation: pl-bar 2.2s ease-in-out infinite; }

@keyframes pl-l1 { 0%,8%{stroke-dashoffset:60} 26%{stroke-dashoffset:0} 66%{stroke-dashoffset:0} 84%,100%{stroke-dashoffset:60} }
@keyframes pl-l2 { 0%,30%{stroke-dashoffset:60} 50%{stroke-dashoffset:0} 62%{stroke-dashoffset:0} 78%,100%{stroke-dashoffset:60} }
@keyframes pl-n1 { 0%,18%{opacity:0;transform:scale(0)} 32%{opacity:1;transform:scale(1)} 66%{opacity:1;transform:scale(1)} 82%,100%{opacity:0;transform:scale(0)} }
@keyframes pl-n2 { 0%,40%{opacity:0;transform:scale(0)} 56%{opacity:1;transform:scale(1)} 62%{opacity:1;transform:scale(1)} 74%,100%{opacity:0;transform:scale(0)} }
@keyframes pl-bar { 0%,100%{transform:scaleX(1)} 50%{transform:scaleX(1.12)} }
@media (prefers-reduced-motion: reduce) {
  .pl-l1,.pl-l2,.pl-n1,.pl-n2,.pl-bar { animation-duration: 3.5s; }
}

.name-input-row {
  display: flex; align-items: stretch; gap: 6px; margin-top: 4px;
}
#name-input {
  flex: 1; font-size: 12px; padding: 4px 7px;
  border: 1px solid var(--gray-l); border-radius: 5px;
  background: rgba(255,255,255,0.9); outline: none;
  font-family: var(--font); transition: border-color 0.15s;
}
#name-input:focus { border-color: rgba(59,130,246,0.55); box-shadow: 0 0 0 2px rgba(59,130,246,0.12); }
.btn-create {
  flex-shrink: 0;
  font-size: 11px; font-weight: 600;
  padding: 4px 13px;
  border: 1px solid rgba(59,130,246,0.5);
  border-radius: 20px;
  background: rgba(59,130,246,0.1);
  color: #1e40af;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: var(--font);
}
.btn-create:hover {
  background: rgba(59,130,246,0.2);
  border-color: rgba(59,130,246,0.75);
}

/* AI expand panel */
.ai-expand {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(59,130,246,0.3);
  border-radius: 8px;
  background: rgba(59,130,246,0.05);
  display: flex; flex-direction: column; gap: 5px;
}
.ai-expand .form-row { margin: 0; gap: 6px; }
.ai-expand .form-row label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--gray);
  min-width: 80px;
}
.ai-expand .form-row input {
  flex: 1; font-size: 11.5px; padding: 4px 7px;
  border: 1px solid var(--gray-l); border-radius: 5px;
  background: rgba(255,255,255,0.9); outline: none;
  font-family: var(--font);
  transition: border-color 0.15s;
}
.ai-expand .form-row input:focus {
  border-color: rgba(59,130,246,0.55);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.12);
}
.divider { height: 1px; background: rgba(107, 114, 128, 0.14); margin: 14px 0 0; }
/* When divider is immediately followed by section-label: suppress double line */
.divider + .section-label { border-top: none; padding-top: 8px; }

/* ── HSM floating tooltip ────────────────────────────────────────── */
#hsm-tooltip {
  position: fixed;
  display: none;
  z-index: 200;
  min-width: 240px;
  max-width: 290px;
  background: rgba(255,255,255,0.97);
  border: 1px solid var(--gray-l);
  border-radius: 7px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  padding: 10px 12px;
  font-family: var(--font);
  pointer-events: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.tip-name {
  font-size: 12px; font-weight: 500; color: var(--text);
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-bottom: 5px;
}
.tip-hotspot-badge {
  font-size: 9px; font-weight: 500;
  background: #fee2e2; color: var(--red);
  border: 1px solid #fca5a5; border-radius: 3px; padding: 1px 5px; flex-shrink: 0;
}
.tip-not-hotspot-badge {
  font-size: 9px; font-weight: 500;
  background: #f0fdf4; color: #16a34a;
  border: 1px solid #bbf7d0; border-radius: 3px; padding: 1px 5px; flex-shrink: 0;
}
.tip-composite {
  display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
}
.tip-comp-label { font-size: 10px; color: var(--gray); flex: 0 0 88px; }
.tip-comp-bar-wrap { flex: 1; height: 6px; background: var(--gray-l); border-radius: 3px; overflow: hidden; }
.tip-comp-bar-fill { height: 100%; border-radius: 3px; }
.tip-comp-val { font-size: 10px; font-weight: 500; color: var(--text); flex: 0 0 28px; text-align: right; }
.tip-divider { height: 1px; background: var(--gray-l); margin: 4px 0; }
.tip-threshold { font-size: 9px; color: var(--gray); text-align: right; margin-top: 4px; }
.tip-ind-row { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.tip-ind-label {
  font-size: 10px; color: var(--gray); flex: 0 0 116px;
}
.tip-bar-wrap { flex: 1; height: 5px; background: var(--gray-l); border-radius: 3px; overflow: hidden; }
.tip-bar-fill { height: 100%; border-radius: 3px; }
.tip-ind-val { font-size: 10px; font-weight: 500; color: var(--text); flex: 0 0 28px; text-align: right; }

/* ── Action tooltip rows ─────────────────────────────────────────── */
.tip-act-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.tip-act-label { font-size: 10px; color: var(--gray); flex: 0 0 110px; }
.tip-act-val { font-size: 10px; font-weight: 500; color: var(--text); }
.tip-abbr-explain { font-size: 10px; font-weight: 500; color: var(--gray); }
.tip-abbr-row { font-size: 10px; color: var(--gray); margin-bottom: 2px; }
.tip-abbr-code { font-weight: 600; color: var(--text); }

/* ── Motion type selector ────────────────────────────────────────── */
.motion-type-label { font-size: 11px; color: var(--gray); margin-bottom: 3px; }
#row-motion-type { margin-bottom: 5px; }
.motion-opts { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.motion-opt {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text); cursor: pointer;
  padding: 2px 5px; border-radius: 4px;
  user-select: none;
}
.motion-opt:hover:not(.disabled) { background: var(--accent-light); }
.motion-opt.disabled { opacity: 0.35; pointer-events: none; }
.motion-opt input[type="radio"] { display: none; }
.motion-opt .dot-indicator { background: #d1d5db; }
.motion-opt input[type="radio"]:checked + .dot-indicator {
  background: var(--navy);
}

/* ── Horizontal radio-group row (label + dots inline) ────────────── */
.radio-group-row {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 5px;
}
.radio-group-row .rg-label {
  flex: 0 0 96px; font-size: 11px; color: var(--gray);
}
.radio-group-row .rg-opts {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}

/* ── Reversibel / Herbruikbaar — left-aligned pair ───────────────── */
.rev-reuse-row {
  display: flex; gap: 14px; align-items: center;
  margin-bottom: 4px;
}

/* ── Subtle inline checkbox (e.g. Destructief below Gereedschap) ─── */
.destructief-right { display: flex; justify-content: flex-end; margin-bottom: 2px; margin-top: -2px; }
.subtle-check {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--gray); cursor: pointer; user-select: none;
}
.subtle-check input[type="checkbox"] { display: none; }
.subtle-check input[type="checkbox"]:checked + span { color: var(--red); font-weight: 500; }
.subtle-check::before {
  content: ""; display: inline-block;
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--gray-l); background: rgba(255,255,255,0.55);
  flex-shrink: 0; transition: background 0.15s, border-color 0.15s;
}
.subtle-check:has(input:checked)::before {
  background: var(--red); border-color: var(--red);
}

/* ── Dot toggles (checkboxes) ────────────────────────────────────── */
.flags-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.flags-row-right { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.dot-toggle {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--gray); cursor: pointer; user-select: none;
  padding: 2px 5px; border-radius: 4px;
}
.dot-toggle:hover:not(.disabled) { background: var(--accent-light); }
.dot-toggle.disabled { opacity: 0.35; pointer-events: none; }
.dot-toggle input[type="checkbox"] { display: none; }
.dot-indicator {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  background: var(--gray-l);
  border: 1px solid rgba(0,0,0,0.12);
  transition: background 0.15s, border-color 0.15s;
}
.dot-toggle input[type="checkbox"]:checked + .dot-indicator {
  background: var(--navy);
}
/* Danger variant — destructief */
.dot-toggle.danger input[type="checkbox"]:checked + .dot-indicator {
  background: var(--red);
}

/* ── Step badge ──────────────────────────────────────────────────── */
.step-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 10px; font-weight: 500; vertical-align: middle; margin-right: 2px;
  background: rgba(107,114,128,0.10); color: var(--gray);
  border: 1px solid rgba(107,114,128,0.20);
}

/* ── Slider hint text ────────────────────────────────────────────── */
.hint-text {
  font-size: 10px; color: #9ca3af;
  padding-left: 108px; margin-top: -2px; margin-bottom: 4px; line-height: 1.4;
}

/* ── Checkbox list (requires / frees) ────────────────────────────── */
.check-list {
  flex: 1;
  max-height: 72px;
  overflow-y: auto;
  border: 1px solid rgba(107, 114, 128, 0.25);
  border-radius: 5px;
  background: rgba(255,255,255,0.30);
  padding: 3px 6px;
  scrollbar-width: thin;
}
.check-list::-webkit-scrollbar { width: 3px; }
.check-list::-webkit-scrollbar-thumb { background: var(--gray-l); border-radius: 2px; }
.check-list-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text);
  padding: 2px 0; cursor: pointer; user-select: none;
}
.check-list-item:hover { color: var(--navy); }
.check-list-item input[type="checkbox"] { accent-color: var(--navy); flex-shrink: 0; }

/* ── Panel footer (fixed, always visible) ────────────────────────── */
#panel-footer {
  flex-shrink: 0;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 10px 14px 14px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.06);
}
#panel-footer:empty { display: none; }

/* ── Centered dot rows (frequentie + HSM flags) ──────────────────── */
/* "Advanced" iOS-style toggle bovenaan sidebar */
.sidebar-advanced-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 10px;
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--navy, #52575f);
  cursor: pointer;
  letter-spacing: 0.03em;
  user-select: none;
  border-radius: 6px;
  transition: background 0.15s;
}
.sidebar-advanced-toggle:hover {
  background: rgba(0,0,0,0.025);
}
.sidebar-advanced-toggle .sidebar-adv-switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 16px;
  flex-shrink: 0;
}
.sidebar-advanced-toggle .sidebar-adv-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.sidebar-advanced-toggle .sidebar-adv-track {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.18);
  border-radius: 9px;
  transition: background 0.2s ease;
}
.sidebar-advanced-toggle .sidebar-adv-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 0.22s cubic-bezier(0.32,0.72,0,1);
}
.sidebar-advanced-toggle input:checked ~ .sidebar-adv-track {
  background: var(--accent, #e8a020);
}
.sidebar-advanced-toggle input:checked ~ .sidebar-adv-track .sidebar-adv-thumb {
  transform: translateX(14px);
}

.sidebar-advanced {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.32s cubic-bezier(0.32,0.72,0,1),
              opacity 0.22s ease-out;
}
.sidebar-advanced.open {
  max-height: 2000px;
  opacity: 1;
}

body.dark .sidebar-advanced-toggle { color: #c8cdd8; }
body.dark .sidebar-advanced-toggle:hover { background: rgba(255,255,255,0.04); }
body.dark .sidebar-advanced-toggle .sidebar-adv-track { background: rgba(255,255,255,0.18); }

.dot-row-block {
  margin-bottom: 4px;
  display: flex; flex-direction: column; align-items: center;
}
/* Iets meer ademruimte tussen tier-rows (Maintenance / Func. importance)
   in de Hotspot Indicators sectie — anders zit het te dicht op elkaar. */
.dot-row-block:has(.dot-row-opts-4),
.dot-row-block:has(.dot-row-opts-5) {
  margin-top: 10px;
  margin-bottom: 10px;
}
.dot-row-block:has(.dot-row-opts-4) .dot-row-label,
.dot-row-block:has(.dot-row-opts-5) .dot-row-label {
  margin-bottom: 6px;
}
.dot-row-label {
  font-size: 10px; color: var(--gray);
  margin-bottom: 3px; text-align: left; align-self: flex-start;
}
.dot-row-opts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  width: 100%;
}
/* 4- en 5-tier varianten voor functional + maintenance — smaller font om de
   langere labels ("Every 5+ years", "Weekly+ (consumable)") te laten passen. */
.dot-row-opts-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  width: 100%;
  gap: 2px;
}
.dot-row-opts-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
  width: 100%;
  gap: 2px;
}
.dot-row-opts-4 .motion-opt,
.dot-row-opts-5 .motion-opt {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 2px 4px;
  line-height: 1.15;
  white-space: nowrap;
}
.dot-row-opts-4 .motion-opt .dot-indicator,
.dot-row-opts-5 .motion-opt .dot-indicator {
  width: 9px;
  height: 9px;
}

/* LCA-preview pill onder Environmental impact veld */
.lca-preview {
  font-size: 11px;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  padding: 6px 9px;
  border-radius: 4px;
  background: rgba(232, 160, 32, 0.08);
  border: 1px solid rgba(232, 160, 32, 0.22);
  color: var(--navy, #52575f);
  line-height: 1.4;
  margin-bottom: 6px;
  word-break: break-word;
}
.lca-preview[data-status="unknown"],
.lca-preview[data-status="empty"] {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.10);
  color: var(--gray, #9ca3af);
  font-style: italic;
}
.lca-preview[data-status="fuzzy"] {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.28);
}
body.dark .lca-preview { color: #c8cdd8; }
body.dark .lca-preview[data-status="unknown"],
body.dark .lca-preview[data-status="empty"] {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: #8a8f9c;
}

/* Hint-regel boven Functional-importance tiers (topology-suggest) */
.adv-field-hint {
  font-size: 10.5px;
  color: var(--gray, #9ca3af);
  font-style: italic;
  padding: 0 0 4px;
  line-height: 1.4;
}
.adv-field-hint strong {
  color: var(--accent, #e8a020);
  font-style: normal;
  font-weight: 600;
}

/* Manual-override toggle voor Environmental impact — gestileerd als knop */
.env-override-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--navy, #52575f);
  padding: 5px 10px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 5px;
  background: rgba(0,0,0,0.025);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s;
}
.env-override-btn:hover {
  background: rgba(232,160,32,0.08);
  border-color: rgba(232,160,32,0.30);
}
.env-override-btn input[type="checkbox"] {
  display: none;
}
.env-override-btn:has(input:checked) {
  background: rgba(232,160,32,0.15);
  border-color: rgba(232,160,32,0.45);
  color: var(--navy, #52575f);
  font-weight: 600;
}
body.dark .env-override-btn {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
  color: #c8cdd8;
}
body.dark .env-override-btn:has(input:checked) {
  background: rgba(232,160,32,0.18);
  border-color: rgba(232,160,32,0.45);
}

/* ── Advanced details fields ─────────────────────────────────────── */
.adv-field { margin-top: 6px; }
.adv-field-label {
  font-size: 11px; font-weight: 500; color: var(--text);
  margin-bottom: 1px;
}
.adv-field-hint {
  font-size: 10px; color: var(--gray);
  margin-bottom: 4px;
}

/* ── Collapsible advanced section ────────────────────────────────── */
.advanced-details {
  margin-bottom: 2px;
}
.advanced-summary {
  font-size: 10px; font-weight: 500;
  color: var(--gray); cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: 5px;
  padding: 3px 0; user-select: none;
}
.advanced-summary::-webkit-details-marker { display: none; }
.advanced-summary::before {
  content: "›";
  font-size: 13px; color: var(--gray);
  transition: transform 0.15s;
  display: inline-block;
}
details.advanced-details[open] .advanced-summary::before {
  transform: rotate(90deg);
}


/* ================================================================
   RESULTS PAGINA
   ================================================================ */

/* ── Container & layout ─────────────────────────────────────────── */
#results-container {
  display: flex; flex-direction: row;
  width: 100%; height: 100%; overflow: hidden;
  /* Divider under the floating top-nav pills — marks where the screen begins. */
  border-top: 1px solid #e6e6ea;
}
body.dark #results-container { border-top-color: rgba(255,255,255,0.08); }

/* Vertical left nav — click a section to view only that one (no long scroll). */
#results-nav {
  display: flex; flex-direction: column; gap: 1px; flex-shrink: 0;
  width: 208px; padding: 16px 10px;
  background: #fafafa;
  border-right: 1px solid #e4e4e4; border-bottom: none;
  overflow-y: auto; scrollbar-width: thin;
}
#results-nav::-webkit-scrollbar { width: 6px; }

.res-nav-btn {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; border-radius: 7px;
  border: 1px solid transparent;
  background: transparent; text-align: left; width: 100%;
  color: #8a8a8a; font-size: 11px; font-weight: 600;
  font-family: var(--font); cursor: pointer; white-space: nowrap;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
  letter-spacing: 0; text-transform: none;
}
/* Monochrome line icon — muted grey, active item a touch darker. */
.res-nav-ico { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.55; }
.res-nav-btn.active .res-nav-ico { opacity: 0.9; }
.res-nav-btn:not(.active):hover .res-nav-ico { opacity: 0.75; }
.res-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.res-nav-btn.active {
  color: #1a1a1a; background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.10);
}
.res-nav-btn:not(.active):hover { color: #555; background: rgba(0,0,0,0.03); }
body.dark #results-nav { background: #16181d; border-right-color: rgba(255,255,255,0.08); }
body.dark .res-nav-btn { color: #9aa1ad; }
body.dark .res-nav-btn.active { color: #f1f1f1; background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.12); }
body.dark .res-nav-btn:not(.active):hover { color: #cbd5e1; background: rgba(255,255,255,0.05); }
.res-export-csv-btn {
  margin-left: auto; padding: 6px 12px; border-radius: 3px;
  border: 1px solid #d0d0d0; background: #f5f5f5;
  color: #555; font-size: 10px; font-weight: 700; font-family: var(--font);
  letter-spacing: 0.05em; cursor: pointer; white-space: nowrap;
  align-self: center; transition: background 0.12s, color 0.12s;
}
.res-export-csv-btn:hover { background: #e8e8e8; color: #222; }

#results-content {
  flex: 1; overflow-y: auto;
  padding: 24px 34px 64px;
  background: #ffffff;
  scrollbar-width: thin;
  scrollbar-color: #c4c4c4 #ffffff;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
#results-content::-webkit-scrollbar { width: 6px; }
#results-content::-webkit-scrollbar-track { background: #ffffff; }
#results-content::-webkit-scrollbar-thumb { background: #cfcfcf; }

/* ── Document wrapper — left-aligned, full-width app pane (not an A4 page). ── */
.res-document {
  width: 100%;
  max-width: none;
  margin: 0;
  background: transparent;
  box-shadow: none;
  counter-reset: res-section;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Info tooltip (vraagteken) ──────────────────────────────────── */
.info-wrap {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 2px;
  background: #e5e7eb; color: #6b7280;
  font-size: 9px; font-weight: 700; font-family: sans-serif;
  cursor: help; margin-left: 5px; flex-shrink: 0;
  line-height: 1;
}
.info-btn:hover { background: #d1d5db; color: #374151; }
/* position: fixed set via JS so overflow:hidden ancestors cannot clip the tip */
.info-tip {
  display: none;
  position: fixed;
  z-index: 9999;
  width: 240px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 10px 12px;
  font-size: 11px; line-height: 1.6;
  color: #374151; font-weight: 400;
  box-shadow: 0 4px 16px rgba(0,0,0,0.13);
  pointer-events: none;
  text-align: left;
  white-space: normal;
}

/* ── Results cards ──────────────────────────────────────────────── */
.res-card {
  background: #ffffff;
  border: none;
  border-bottom: 1px solid #e8e8e8;
  border-radius: 0;
  padding: 22px 28px 20px;
  margin-bottom: 0;
  box-shadow: none;
}
/* last .res-card border clipped by section overflow:hidden — no extra rule needed */
.res-card-title {
  font-size: 12px; font-weight: 700;
  text-transform: none; letter-spacing: 0;
  color: #1a1a1a; margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebebeb;
}
/* Content sits slightly inset from the flush title. Every direct content block
   shifts by the same amount, so the shared --res-split column line still lines
   up across all sections (both columns move together). */
.res-card > :not(.res-card-title) { margin-left: 14px; }
.res-card-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; padding: 0 5px;
  background: #ebebeb; border-radius: 2px;
  font-size: 10px; font-weight: 600; color: #777;
  letter-spacing: 0;
}

/* ── Severity colours ───────────────────────────────────────────── */
.val-low    { color: var(--sev-good); }
.val-medium { color: var(--sev-warn); }
.val-high   { color: var(--sev-bad); font-weight: 600; }
.no-data    { font-size: 11px; color: #b0b4bc; font-style: italic; }

/* ── Badges ─────────────────────────────────────────────────────── */
.res-badge {
  display: inline-flex; align-items: center;
  padding: 1px 6px; border-radius: 2px;
  font-size: 9.5px; font-weight: 700; border: 1px solid;
  text-transform: uppercase; letter-spacing: 0.04em;
}
/* Decorative type tags — neutral grey (the label text carries the meaning). */
.badge-priority, .badge-valuable, .badge-both {
  background: #f2f2f4; color: #6b6f76; border-color: #e3e3e7;
}

/* ── Hotspot list ───────────────────────────────────────────────── */
.res-hotspot-item {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 0; border-radius: 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer; transition: background 0.10s;
  margin: 0 -4px; padding-left: 4px; padding-right: 4px;
}
.res-hotspot-item:last-child { border-bottom: none; }
.res-hotspot-item:hover { background: #f9f9f9; }
.res-hotspot-rank {
  font-size: 11px; font-weight: 600; color: #aaa;
  flex-shrink: 0; width: 20px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.res-hotspot-body { flex: 1; min-width: 0; }
.res-hotspot-name { font-size: 12px; font-weight: 600; color: #1a1a1a; margin-bottom: 4px; }
.res-hotspot-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.res-meta-chip {
  font-size: 10px; color: #888;
  background: #f0f0f0; border-radius: 2px; padding: 1px 6px;
}
.res-meta-chip.cause { color: #888; background: #f0f0f0; }
.res-hotspot-score {
  flex-shrink: 0; display: flex; flex-direction: column;
  align-items: flex-end; gap: 3px; min-width: 80px;
}
.res-score-bar {
  width: 72px; height: 4px; border-radius: 0;
  background: #e5e5e5; overflow: hidden;
}
.res-score-fill { height: 100%; border-radius: 0; }
/* Neutral single tone — the bar LENGTH conveys the hotspot score (no rainbow),
   same principle as the EN 45554 parameter bars. */
.bar-low, .bar-medium, .bar-high { background: #a3a8b2; }
body.dark .bar-low, body.dark .bar-medium, body.dark .bar-high { background: #6b7280; }
.res-score-val { font-size: 11px; font-weight: 600; color: var(--text); }

/* ── Performance metrics grid ───────────────────────────────────── */
.res-metrics-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  background: transparent; border: none;
  border-top: 1px solid #eee; border-bottom: 1px solid #eee;
}
.res-metric {
  background: transparent; border-radius: 0; padding: 12px 10px; text-align: center;
  border-left: 1px solid #f2f2f2;
}
.res-metric:first-child { border-left: none; }
.res-metric-val   { font-size: 18px; font-weight: 600; color: #2a2a2a; margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.res-metric-label { font-size: 9px; color: #999; text-transform: uppercase; letter-spacing: 0.05em; }

/* ── General overview — click-through metric tiles + finding rows ─────────── */
.res-goto { cursor: pointer; font-family: var(--font); }
.gen-metrics .res-metric.res-goto {
  border-top: none; border-right: none; border-bottom: none;
  font: inherit; color: inherit; transition: background 0.12s;
}
.gen-metrics .res-metric.res-goto:first-child { border-left: none; }
.gen-metrics .res-metric.res-goto:hover { background: rgba(0,0,0,0.035); }
.gen-findings { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.res-finding {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid #ececf0; background: #fff; text-align: left;
  font-family: var(--font); font-size: 11.5px; color: var(--text, #1f2937);
  cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.res-finding:hover { background: #f6f7f9; border-color: #dcdce2; }
.res-finding-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.res-finding-text { flex: 1; line-height: 1.45; }
.res-finding-text strong { font-weight: 650; }
.res-finding-go {
  flex-shrink: 0; font-size: 11px; font-weight: 600; color: #9a9aa2;
  white-space: nowrap; letter-spacing: 0.01em;
}
.res-finding:hover .res-finding-go { color: #555; }
body.dark .gen-metrics .res-metric.res-goto:hover { background: rgba(255,255,255,0.05); }
body.dark .res-finding { background: #1c1d24; border-color: rgba(255,255,255,0.08); color: #cbd5e1; }
body.dark .res-finding:hover { background: #22242c; border-color: rgba(255,255,255,0.14); }
body.dark .res-finding-go { color: #6b7280; }
body.dark .res-finding:hover .res-finding-go { color: #aab2c0; }

/* ── Two-column layout → consolidated to a single continuous column ─────────
   Every section now reads as one left-aligned list of label → value rows (and
   full-width tables), so columns line up across the whole analysis instead of
   the old side-by-side halves that started at random points. */
.res-two-col { display: grid; grid-template-columns: 1fr; gap: 0; }
.res-two-col > div + div { margin-top: 14px; padding-top: 12px; border-top: 1px solid #f2f2f2; }
body.dark .res-two-col > div + div { border-top-color: rgba(255,255,255,0.06); }

/* ── Stat rows ──────────────────────────────────────────────────────
   Shared split so EVERY label → value row (and the DPP tables below) begins
   its value column at the exact same point across the whole analysis. */
:root { --res-split: 50%; }
.res-stat-row {
  display: grid; grid-template-columns: var(--res-split) 1fr; align-items: center;
  padding: 5px 0; border-bottom: 1px solid #f0f0f0; gap: 8px;
}
.res-stat-row:last-child { border-bottom: none; }
.res-stat-key { font-size: 10px; color: #666; min-width: 0; }
.res-stat-val { font-size: 10px; font-weight: 600; color: #1a1a1a; text-align: left; }
.res-sub-label {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: #888;
  margin-bottom: 7px; margin-top: 4px;
}
.res-abbr { font-size: 10px; color: var(--gray); }

/* ── Chips ──────────────────────────────────────────────────────── */
.res-chip {
  display: inline-block;
  background: #f2f2f2; border: 1px solid #e0e0e0;
  border-radius: 2px; padding: 2px 8px; font-size: 11px; color: #333;
}
.res-chip.clickable { cursor: pointer; transition: background 0.10s; }
.res-chip.clickable:hover { background: #ececef; border-color: #cfcfd6; color: #333; }
.res-chip-row { display: flex; flex-wrap: wrap; gap: 5px; }

/* ── Accessibility section ──────────────────────────────────────── */
.res-acc-header, .res-acc-row {
  display: grid; grid-template-columns: var(--res-split) 90px 90px; align-items: center;
  padding: 5px 0; border-bottom: 1px solid rgba(0,0,0,0.04);
}
.res-acc-label      { font-size: 11px; color: var(--gray); }
.res-acc-avg-hd, .res-acc-worst-hd {
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--gray); text-align: left;
}
.res-acc-avg, .res-acc-worst {
  text-align: left; font-size: 11px; font-weight: 600;
}

/* ── Problem clusters ───────────────────────────────────────────── */
.res-cluster { padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.res-cluster:last-child { border-bottom: none; }
.res-cluster-empty { opacity: 0.45; }
.res-cluster-title {
  font-size: 11px; font-weight: 600; color: #1a1a1a;
  margin-bottom: 3px; display: flex; align-items: center; gap: 6px;
}
.res-cluster-desc { font-size: 10.5px; color: #666; margin-bottom: 8px; line-height: 1.5; }
.res-empty-section { font-size: 12px; color: #999; padding: 12px 0; font-style: italic; }

/* ── EN 45554 Repair Index ──────────────────────────────────────── */

/* Score basis — a plain on/off switch (unmistakably interactive). Off = design
   indicators #1–#5 only; on = also include documentation indicators #6–#11. */
.ri-doc-switch {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none; margin: 2px 0 16px;
}
.ri-doc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ri-doc-track {
  position: relative; flex-shrink: 0;
  width: 38px; height: 22px; border-radius: 22px;
  background: #d2d2d9; transition: background .18s ease;
}
.ri-doc-knob {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.28);
  transition: transform .18s ease;
}
.ri-doc-switch input:checked + .ri-doc-track { background: #4f8069; }
.ri-doc-switch input:checked + .ri-doc-track .ri-doc-knob { transform: translateX(16px); }
.ri-doc-switch input:focus-visible + .ri-doc-track { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; }
.ri-doc-text { font-size: 12px; font-weight: 600; color: #444; }
.ri-doc-sub  { font-weight: 500; color: #999; }
.ri-metrics { grid-template-columns: repeat(4, 1fr); }
body.dark .ri-doc-track { background: #3a3f4b; }
body.dark .ri-doc-switch input:checked + .ri-doc-track { background: #4f8069; }
body.dark .ri-doc-text { color: #cbd5e1; }
body.dark .ri-doc-sub  { color: #7a828f; }

/* Score row */
.ri-score-row {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 18px;
}
/* Small, subtle grade chip (was a big 44px block). Muted sev tones, low emphasis. */
.ri-grade-badge {
  flex-shrink: 0;
  min-width: 20px; height: 18px; padding: 0 6px; box-sizing: border-box;
  border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: 0;
  border: 1px solid;
}
.ri-grade-a { background: rgba(79,128,105,0.12); color: var(--sev-good); border-color: rgba(79,128,105,0.30); }
.ri-grade-b { background: rgba(79,128,105,0.10); color: #5f8a6f;         border-color: rgba(79,128,105,0.24); }
.ri-grade-c { background: rgba(154,106,56,0.12); color: var(--sev-warn); border-color: rgba(154,106,56,0.30); }
.ri-grade-d { background: rgba(156,83,76,0.12);  color: var(--sev-bad);  border-color: rgba(156,83,76,0.30); }

.ri-score-block { flex: 1; min-width: 0; }
.ri-score-big {
  font-size: 28px; font-weight: 700; color: #1a1a1a;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.ri-score-denom { font-size: 14px; font-weight: 400; color: #aaa; }
.ri-score-sub { font-size: 10px; color: #888; margin-top: 4px; }

.ri-score-bar-wrap { flex-shrink: 0; width: 110px; margin-top: 6px; }
.ri-score-bar-track {
  position: relative;
  height: 6px; background: #e8e8e8; border-radius: 0; overflow: visible;
}
.ri-score-bar-fill {
  height: 100%; border-radius: 0;
  background: #3d8b5e;
}
.ri-score-bar-fill.grade-b { background: #8a9e20; }
.ri-score-bar-fill.grade-c { background: #c07010; }
.ri-score-bar-fill.grade-d { background: #a02020; }
.ri-score-bar-max {
  position: absolute; top: -3px;
  width: 2px; height: 14px;
  background: rgba(0,0,0,0.25); border-radius: 1px;
  transform: translateX(-50%);
}
.ri-score-bar-labels {
  display: flex; font-size: 9px; color: var(--gray);
  margin-top: 3px;
}

/* Parameter bars */
.ri-params { display: flex; flex-direction: column; gap: 6px; }
.ri-param-row { display: flex; align-items: center; gap: 8px; }
.ri-param-label {
  flex: 0 0 200px; font-size: 11px; color: #666;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ri-param-bar-wrap {
  flex: 1; height: 6px; background: #e8e8e8;
  border-radius: 0; overflow: hidden;
}
.ri-param-bar-fill { height: 100%; border-radius: 0; transition: width 0.4s ease; }
/* Neutral single tone — the bar LENGTH conveys the score; no red/orange/green
   rainbow across the whole EN 45554 section (kept deliberately minimal). */
.ri-bar-good, .ri-bar-medium, .ri-bar-poor { background: #a3a8b2; }
body.dark .ri-bar-good, body.dark .ri-bar-medium, body.dark .ri-bar-poor { background: #6b7280; }
.ri-param-val {
  flex-shrink: 0; width: 70px; text-align: right;
  font-size: 11px; font-weight: 600; color: var(--text);
}
.ri-param-na {
  background: repeating-linear-gradient(
    -45deg, rgba(0,0,0,0.04), rgba(0,0,0,0.04) 3px, transparent 3px, transparent 7px
  );
}
.ri-param-na-label { color: #b0b4bc !important; }
.ri-param-na-val   { color: #b0b4bc !important; font-weight: 400 !important; }

/* Component table */
.ri-table-legend {
  font-weight: 400; font-size: 9px; letter-spacing: 0.03em;
  color: var(--gray); margin-left: 6px; text-transform: none;
}
.ri-table-wrap { overflow-x: auto; }
.ri-table {
  width: 100%; border-collapse: collapse; font-size: 10px;
}
.ri-table thead th {
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--gray);
  padding: 4px 6px; text-align: center;
  border-bottom: 2px solid #dcdce1;
}
.ri-table thead th:first-child { text-align: left; }
.ri-table tbody tr:hover { background: rgba(0,0,0,0.025); }
/* Clean 1px horizontal separators so rows read as a real table. */
.ri-table tbody td { border-bottom: 1px solid #ececef; }
.ri-table tfoot td { border-top: 2px solid #dcdce1; }
.ri-td-name { padding: 5px 6px; font-weight: 500; color: var(--text); }
.ri-td-center { padding: 5px 6px; text-align: center; color: var(--gray); }
.ri-td-bar { padding: 5px 6px; min-width: 40px; }
.ri-mini-bar {
  height: 5px; background: #e8e8e8;
  border-radius: 0; overflow: hidden; min-width: 36px;
}
.ri-mini-fill { height: 100%; border-radius: 0; }

/* Footer note */
/* Intro / note box — one neutral light-grey box everywhere, so explanatory
   text is always clearly set apart and no stray blue tint appears. */
.res-intro, .dpp-crossref-note, .ri-footer-note {
  background: #f6f7f9;
  border: 1px solid #ececf0;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 10.5px; color: var(--gray); line-height: 1.5;
  margin: 0 0 12px;
}
.ri-footer-note { margin: 14px 0 0; font-size: 10px; }

/* ── DPP overview header + detail divider (neutral flat style) ───── */
.dpp-overview-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.dpp-overview-head .res-sub-label { margin: 0; }
.dpp-detail-divider {
  padding: 20px 28px 2px;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: #888;
}
body.dark .dpp-detail-divider { color: #555; }

/* ── Component drawer ───────────────────────────────────────────── */
#comp-drawer {
  position: fixed; right: 0; top: 0; bottom: 0; width: 300px;
  background: #fff;
  border-left: 1px solid #d0d0d0;
  box-shadow: -2px 0 16px rgba(0,0,0,0.06);
  z-index: 50; overflow-y: auto;
  padding: 20px 20px 36px;
  transform: translateX(0);
  transition: transform 0.22s ease;
  scrollbar-width: thin;
  scrollbar-color: #ccc #fff;
}
#comp-drawer::-webkit-scrollbar { display: none; }
#comp-drawer.drawer-hidden { transform: translateX(100%); }
#comp-drawer-close {
  position: absolute; top: 12px; right: 14px;
  background: #f0f0f0; border: 1px solid #ddd; border-radius: 2px;
  width: 24px; height: 24px; cursor: pointer;
  font-size: 12px; color: var(--gray);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s;
}
#comp-drawer-close:hover { background: #e5e5e5; }
#comp-drawer-inner { margin-top: 8px; }
.drawer-name {
  font-size: 14px; font-weight: 700; color: var(--text);
  margin-bottom: 6px; padding-right: 32px;
}
.drawer-section-label {
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--navy-deep);
  margin: 14px 0 6px; padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.07);
}
.drawer-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 3px 0; gap: 8px; border-bottom: 1px solid rgba(0,0,0,0.04);
}
.drawer-row:last-child { border-bottom: none; }
.drawer-label { font-size: 11px; color: var(--gray); flex-shrink: 0; }
.drawer-val   { font-size: 11px; font-weight: 500; color: var(--text); text-align: right; }
#results-empty { pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════════════
   Optimisation tab
   ═══════════════════════════════════════════════════════════════════════ */

body.tab-optimisation .tab-view[data-view="optimisation"] {
  pointer-events: all;
  align-items: stretch;
  justify-content: flex-start;
  padding-top: 58px;
  overflow: hidden;
}

/* Run button */
.opt-run-btn {
  margin-top: 4px;
  padding: 10px 28px;
  background: #6ab187;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  pointer-events: all;
  transition: background 0.15s;
}
.opt-run-btn:hover { background: #3d8b5e; }

/* Loading + empty states fill available height and center content */
#opt-loading-state,
#opt-empty-state {
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Spinner */
.opt-spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(107,114,128,0.2);
  border-top-color: #6ab187;
  border-radius: 50%;
  animation: opt-spin 0.8s linear infinite;
  pointer-events: none;
}
@keyframes opt-spin { to { transform: rotate(360deg); } }

/* Result layout: sidebar + tree */
.opt-result-layout {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: all;
}

.opt-sidebar {
  /* Mirror the analyse-tab #panel width so both tabs feel symmetric. */
  width: var(--panel-w, 370px);
  min-width: var(--panel-w, 370px);
  background: var(--panel-bg, #fff);
  border-right: 1px solid rgba(0,0,0,0.07);
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 10px;
  overflow: hidden;
}

.opt-tree-canvas {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* Sub-tabs: Boom / Resultaten */
.opt-sub-tabs {
  display: flex;
  gap: 4px;
  background: rgba(0,0,0,0.04);
  border-radius: 8px;
  padding: 3px;
  flex-shrink: 0;
}
.opt-sub-tab {
  flex: 1;
  padding: 5px 0;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gray, #6b7280);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.opt-sub-tab.active {
  background: var(--panel-bg, #fff);
  color: var(--text, #111);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Score table */
.opt-score-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.opt-score-table th {
  font-size: 10px;
  font-weight: 600;
  color: var(--gray, #6b7280);
  text-align: left;
  padding: 3px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  white-space: nowrap;
}
.opt-score-table th:not(:first-child) { text-align: right; }
/* Kolombreedtes: Indicator neemt resterende ruimte, cijferkolommen vast */
.opt-score-table col.col-label  { width: auto; }
.opt-score-table col.col-val    { width: 72px; }
.opt-score-table col.col-best   { width: 72px; }
.opt-score-table col.col-delta  { width: 52px; }
.opt-score-table td {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  white-space: nowrap;
}
.opt-score-label { color: var(--text, #111); font-size: 10.5px; }
.opt-score-val   { text-align: right; font-weight: 600; color: var(--gray, #6b7280); }
.opt-score-delta { text-align: right; font-weight: 700; font-size: 10px; padding-left: 4px; }
.opt-score-best  { color: #3d8b5e; }

.opt-delta-good    { color: #3d8b5e; font-weight: 700; }
.opt-delta-bad     { color: #c0392b; font-weight: 700; }
.opt-delta-neutral { color: var(--gray, #6b7280); }

/* ── Optimisation score comparison block ───────────────────────── */
.opt-score-compare {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0 4px;
}
.opt-score-item { flex: 1; text-align: center; }
.opt-score-item .opt-score-label { font-size: 10px; color: var(--gray); margin-bottom: 2px; }
.opt-score-item .opt-score-value { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.1; }
.opt-score-item .opt-score-unit  { font-size: 12px; font-weight: 400; color: var(--gray); }
.opt-score-item.opt-score-improved .opt-score-value { color: #3d8b5e; }
.opt-score-arrow { font-size: 16px; color: var(--gray); flex-shrink: 0; }

.opt-score-delta {
  font-size: 11px; font-weight: 600; text-align: center;
  padding: 3px 8px; border-radius: 6px; margin-bottom: 6px;
}
.opt-delta-positive { color: #3d8b5e; background: rgba(61,139,94,0.08); }

/* Near-optimal state — distinct indigo accent with checkmark icon
   so it reads as "design passed" instead of "nothing happened" */
.opt-delta-neutral {
  display: flex; align-items: center; gap: 10px;
  text-align: left;
  padding: 9px 12px;
  background: linear-gradient(135deg, rgba(79,70,229,0.06), rgba(79,70,229,0.02));
  border: 1px solid rgba(79,70,229,0.18);
  border-radius: 8px;
  color: #4338ca;
}
.opt-delta-icon {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(79,70,229,0.12);
  color: #4f46e5;
}
.opt-delta-icon svg { width: 15px; height: 15px; }
.opt-delta-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.opt-delta-text strong { font-size: 12px; font-weight: 700; color: #3730a3; letter-spacing: -0.01em; }
.opt-delta-sub { font-size: 10.5px; font-weight: 400; color: #6366f1; opacity: 0.85; }

/* Dark mode: lift the indigo so it still reads as an accent, not a wall */
body.dark .opt-delta-neutral {
  background: linear-gradient(135deg, rgba(129,140,248,0.10), rgba(129,140,248,0.03));
  border-color: rgba(129,140,248,0.30);
  color: #a5b4fc;
}
body.dark .opt-delta-icon { background: rgba(129,140,248,0.18); color: #a5b4fc; }
body.dark .opt-delta-text strong { color: #c7d2fe; }
body.dark .opt-delta-sub { color: #a5b4fc; }

.opt-f-metrics { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 4px; }
.opt-f-row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.opt-f-label { color: var(--gray); }
.opt-f-delta { font-weight: 700; font-size: 11px; }
.opt-f-better { color: #3d8b5e; }
.opt-f-worse  { color: #c0392b; }

.opt-changed-note {
  font-size: 11px; color: var(--gray); line-height: 1.5;
  margin-bottom: 6px; padding: 6px 8px;
  background: rgba(0,0,0,0.03); border-radius: 6px;
}

/* Radar */
.opt-radar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.opt-radar-legend {
  display: flex;
  gap: 12px;
  font-size: 10px;
  color: var(--gray, #6b7280);
}
.opt-legend-item { display: flex; align-items: center; gap: 4px; }
.opt-legend-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.opt-legend-baseline { background: rgba(156,163,175,0.6); }
.opt-legend-best     { background: #6ab187; }

/* Rerun button */
.opt-rerun-btn {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid rgba(107,114,128,0.28);
  border-radius: 2px;
  font-size: 11px;
  color: var(--gray, #6b7280);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.12s, color 0.12s;
}
.opt-rerun-btn:hover { border-color: #6ab187; color: #3d8b5e; }

/* Suggestions */
.opt-sug-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray, #6b7280);
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  flex-shrink: 0;
}
/* Calm, neutral card — no thick coloured left bar. Severity is shown by a small
   dot at the start of the header instead (see .opt-sug-header::before below). */
.opt-suggestion {
  padding: 10px 13px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #ececf0;
}
.opt-sug-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
/* Small muted severity dot (replaces the heavy left border). */
.opt-sug-header::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: #b6bac2; flex-shrink: 0;
}
.opt-sug-rule {
  font-size: 8.5px;
  font-weight: 700;
  color: #888;
  background: #f0f0f0;
  padding: 2px 5px;
  border-radius: 3px;
  flex-shrink: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.opt-sug-name  { font-size: 11px; font-weight: 600; color: var(--text, #111); flex: 1; }
.opt-sug-score { font-size: 9.5px; color: var(--sev-good); flex-shrink: 0; font-weight: 600; }
.opt-sug-desc  { font-size: 10.5px; color: #555; line-height: 1.55; margin-bottom: 4px; }
.opt-sug-effect {
  font-size: 10px;
  color: #3d8b5e;
  font-style: italic;
}
.opt-no-suggestions {
  font-size: 11px;
  color: var(--gray, #6b7280);
  text-align: center;
  padding: 20px 0;
}
/* All categories share the same calm neutral card; only the severity dot colour
   differs, so the recommendations read consistently with the rest of Analyse. */
.opt-suggestion.sug-design,
.opt-suggestion.sug-missing,
.opt-suggestion.sug-circular,
.opt-suggestion.sug-critical {
  background: #fff;
  border-color: #ececf0;
}
.opt-suggestion.sug-missing .opt-sug-name { color: #111; }

/* Severity dot per category (muted --sev tones, low emphasis). */
.sug-missing  .opt-sug-header::before { background: var(--sev-good); }  /* quick win */
.sug-design   .opt-sug-header::before { background: var(--sev-warn); }  /* redesign  */
.sug-circular .opt-sug-header::before { background: #b6bac2; }          /* info      */
.sug-critical .opt-sug-header::before { background: var(--sev-bad); }   /* hazardous */
/* Severity pills next to the title */
.sug-sev-pill {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 8px;
  margin-right: 6px;
  vertical-align: 1px;
}
.sug-sev-critical { background: rgba(156,83,76,0.14);  color: var(--sev-bad); }
.sug-sev-warn     { background: rgba(154,106,56,0.14); color: var(--sev-warn); }
.sug-sev-info     { background: rgba(79,128,105,0.14); color: var(--sev-good); }
/* Source attribution badge (RecyClass / IDEMAT / ECHA …) */
.opt-sug-src {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 3px;
  background: rgba(0,0,0,0.06);
  color: #444;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.08);
  vertical-align: 1px;
}
.opt-sug-src:hover { background: rgba(0,0,0,0.12); }
/* "Show N more" collapsible for long circularity lists */
.sug-circular-more > summary {
  cursor: pointer;
  font-size: 10.5px;
  color: #0c6b62;
  padding: 4px 0;
  list-style: none;
}
.sug-circular-more > summary::before { content: "+ "; font-weight: 700; }
.sug-circular-more[open] > summary::before { content: "− "; }

body.dark .opt-suggestion.sug-design,
body.dark .opt-suggestion.sug-missing,
body.dark .opt-suggestion.sug-circular,
body.dark .opt-suggestion.sug-critical { background: transparent; }
body.dark .opt-sug-src { background: rgba(255,255,255,0.06); color: #ccc; border-color: rgba(255,255,255,0.1); }
body.dark .sug-circular-more > summary { color: #5eead4; }

.sug-group-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: #444;
  padding: 8px 10px; border-radius: 4px;
  margin-top: 8px; margin-bottom: 4px;
  background: #f3f4f6;
}
.sug-group-label:first-child { margin-top: 0; }

/* Cluster param badge */
.res-cluster-param {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--gray, #6b7280);
  background: rgba(107,114,128,0.10);
  padding: 1px 5px;
  border-radius: 2px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ── Optimisation tab: floating overlays ── */
.opt-score-badge {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  padding: 8px 14px;
  display: flex; gap: 10px; align-items: center;
  font-size: 12px; font-weight: 600;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.opt-badge-good  { color: #3d8b5e; }
.opt-badge-bad   { color: #c0392b; }
.opt-badge-score { color: #6b7280; font-weight: 500; }
.opt-badge-moved { color: #2563eb; font-size: 11px; font-weight: 500; }

.opt-rerun-btn-overlay {
  position: absolute; bottom: 20px; right: 20px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.1);
  font-size: 16px; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s;
}
.opt-rerun-btn-overlay:hover { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.15); }

/* ── Results: repairability section ── */
.res-repair-score-row {
  display: flex; flex-direction: column; align-items: center; padding: 12px 0 4px;
}
.res-repair-big   { font-size: 42px; font-weight: 700; color: #6ab187; line-height: 1; }
.res-repair-unit  { font-size: 20px; }
.res-repair-label { font-size: 11px; color: #6b7280; margin-top: 2px; }
.res-repair-delta { font-size: 11px; margin-top: 4px; }

/* ── Input shake (empty name when clicking Generate button) ─────────────── */
@keyframes input-shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-5px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
.input-shake { animation: input-shake 0.35s ease; border-color: rgba(180,50,50,0.5) !important; }

/* ── Two-button row for name step generation options ──────────────────────── */
.name-gen-row {
  display: flex; gap: 5px; flex-wrap: wrap;
  margin-top: 6px;
}

/* ── Generate with AI / Generate from 3D STEP buttons (name step) ─────────── */
.btn-start-template,
.btn-start-step3d,
.btn-start-url,
.btn-start-pdf,
.btn-start-video {
  display: inline-flex; align-items: center; gap: 5px;
  background: none;
  border: 1px solid rgba(107,114,128,0.28);
  border-radius: 18px; padding: 3px 11px;
  font-size: 10.5px; color: var(--gray);
  font-family: var(--font); cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-start-template:hover,
.btn-start-step3d:hover,
.btn-start-url:hover,
.btn-start-pdf:hover,
.btn-start-video:hover {
  background: rgba(107,114,128,0.07);
  border-color: rgba(107,114,128,0.45);
  color: var(--text);
}
.btn-start-template:disabled,
.btn-start-step3d:disabled,
.btn-start-url:disabled,
.btn-start-pdf:disabled,
.btn-start-video:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: none;
  border-color: rgba(107,114,128,0.22);
  color: var(--gray);
}

/* Second/third rows (From URL / From PDF / From video) sit closer to row 1 */
.name-gen-row2 { margin-top: 3px; }
.name-gen-row3 { margin-top: 3px; }

/* Video/audio file picker inside the "From a video" expand panel */
.video-file-input {
  flex: 1; min-width: 0; font-size: 11px; color: var(--gray);
  font-family: var(--font); cursor: pointer;
}
.video-file-input::file-selector-button {
  font-family: var(--font); font-size: 11px; cursor: pointer;
  padding: 4px 10px; margin-right: 8px;
  border: 1px solid rgba(107,114,128,0.28); border-radius: 8px;
  background: none; color: var(--gray);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.video-file-input::file-selector-button:hover {
  background: rgba(107,114,128,0.07);
  border-color: rgba(107,114,128,0.45); color: var(--text);
}

/* ── URL expand panel ─────────────────────────────────────────────────────── */
.url-input-row {
  display: flex; gap: 7px;
}
#url-input {
  flex: 1; font-size: 12px; padding: 5px 9px; border-radius: 8px;
  border: 1px solid rgba(107,114,128,0.25); background: rgba(255,255,255,0.85);
  font-family: var(--font); color: var(--text); outline: none;
  transition: border-color 0.15s;
}
#url-input:focus { border-color: rgba(107,114,128,0.55); }
.btn-url-fetch { padding: 5px 14px; font-size: 11px; border-radius: 8px; }
.url-status { font-size: 11px; color: var(--gray); }
.url-status:empty { display: none; }
.url-status--loading { color: var(--accent); }
.url-status--ok      { color: #16a34a; }
.url-status--error   { color: #ef4444; }
/* PDF filename label: let long names wrap instead of overflowing the row.
   Flex items default to min-width:auto, which lets an unbroken filename push
   past the panel edge — min-width:0 + overflow-wrap keeps it inside while
   leaving status/error text fully readable. */
#pdf-exp-name {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Collapse empty result containers so they don't add vertical gap */
#url-result:empty, #pdf-result:empty { display: none; }

/* ── 3D STEP hint line ────────────────────────────────────────────────────── */
.step3d-hint {
  margin-top: 7px;
  font-size: 10.5px;
  color: var(--gray);
  line-height: 1.45;
}

/* ── Documentation upload row ─────────────────────────────────────────────── */
.name-docs-row {
  margin-top: 7px;
}
.btn-add-docs {
  display: inline-flex; align-items: center; gap: 4px;
  background: none;
  border: 1px dashed rgba(107,114,128,0.3);
  border-radius: 20px; padding: 3px 12px;
  font-size: 10.5px; color: var(--gray);
  font-family: var(--font); cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-add-docs:hover {
  background: rgba(107,114,128,0.07);
  border-color: rgba(107,114,128,0.5);
  color: var(--text);
}
.docs-list {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 5px;
}
.docs-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-family: var(--font);
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.docs-pill--loading { background: rgba(107,114,128,0.1); color: var(--gray); }
.docs-pill--ok      { background: rgba(52,168,83,0.1);  color: #2d7a47; }
.docs-pill--err     { background: rgba(220,53,69,0.1);  color: #c0392b; }

/* ── Documentation mode (Analyse tab) ───────────────────────────────────── */
.analyse-mode-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
.analyse-tab {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  color: #555a6a;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.analyse-tab.active {
  background: #1a1d2e;
  color: #fff;
  border-color: #1a1d2e;
}
.analyse-tab:hover:not(.active) { background: rgba(0,0,0,0.04); }

.docs-drop-zone {
  border: 1.5px dashed rgba(0,0,0,0.15);
  border-radius: 8px;
  padding: 20px 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin-bottom: 8px;
}
.docs-drop-zone:hover,
.docs-drop-zone.drag-over {
  border-color: #6366f1;
  background: rgba(99,102,241,0.04);
}
.docs-drop-icon { font-size: 24px; margin-bottom: 6px; }
.docs-drop-text { font-size: 12px; color: #555a6a; }
.docs-drop-formats { font-size: 10px; color: #9ca3af; margin-top: 4px; }

.link-btn {
  background: none; border: none;
  color: #6366f1; cursor: pointer;
  padding: 0; font-size: inherit;
  text-decoration: underline;
}
.docs-analyse-status {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #555a6a; padding: 8px 0;
}
.docs-spinner {
  width: 12px; height: 12px;
  border: 2px solid rgba(0,0,0,0.10);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: docs-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes docs-spin { to { transform: rotate(360deg); } }
.docs-analyse-error {
  font-size: 12px; color: #e11d48;
  padding: 6px 8px; border-radius: 6px;
  background: rgba(225,29,72,0.06);
}

/* Chat UI */
.docs-chat-wrap { display: flex; flex-direction: column; gap: 8px; }

.docs-status-bar {
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 8px;
  padding: 8px 10px;
}
.docs-status-title {
  font-size: 10px; font-weight: 600;
  color: #9ca3af; text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 6px;
}
.docs-field-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.docs-field-chip {
  font-size: 10px; padding: 2px 6px;
  border-radius: 4px; font-weight: 500;
}
.docs-field-ok      { background: rgba(22,163,74,0.10); color: #15803d; }
.docs-field-missing { background: rgba(225,29,72,0.08); color: #be123c; }

.docs-product-hint {
  font-size: 11px; color: #6b7280;
  margin-bottom: 7px;
}
.docs-result-wrap { display: flex; flex-direction: column; gap: 0; }
.docs-result-summary {
  font-size: 11.5px; color: #374151; line-height: 1.5;
  margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}

.docs-chat-msgs {
  max-height: 230px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding: 2px 0;
}
/* Typing bubble — appears between messages and while AI responds */
.dcm-typing-bubble {
  display: inline-flex; gap: 5px; align-items: center;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 0 10px 10px 10px;
  padding: 10px 14px;
}
.dcm-typing-bubble span {
  width: 7px; height: 7px; border-radius: 50%;
  background: #9ca3af; display: inline-block;
  animation: dcm-bounce 1.1s infinite ease-in-out;
}
.dcm-typing-bubble span:nth-child(1) { animation-delay: 0s; }
.dcm-typing-bubble span:nth-child(2) { animation-delay: 0.18s; }
.dcm-typing-bubble span:nth-child(3) { animation-delay: 0.36s; }
@keyframes dcm-bounce {
  0%, 70%, 100% { transform: translateY(0);    opacity: 0.45; }
  35%            { transform: translateY(-5px); opacity: 1; }
}
body.dark .dcm-typing-bubble { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); }

.docs-msg { display: flex; flex-direction: column; gap: 2px; }

/* ── Assistant messages: plain readable text, no bubble, sparkle marker ── */
.docs-msg--ai {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
}
/* The role element is repurposed as a small sparkle marker beside line 1. */
.docs-msg--ai .docs-msg-role {
  flex: 0 0 auto;
  width: 14px;
  line-height: 1.6;
  font-size: 13px;
  color: #9ca3af;
  text-align: center;
  user-select: none;
}
.docs-msg--ai .docs-msg-text {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  font-size: 13px; color: #374151; line-height: 1.65;
}
/* Grouped follow-up assistant lines carry no marker — indent to align. */
.docs-msg--ai:not(:has(.docs-msg-role)) .docs-msg-text { padding-left: 22px; }

/* "Thought for Xs" — subtle collapsible reasoning trace above an answer. */
.dcm-thought { margin: 6px 0 2px 22px; font-size: 11px; color: var(--gray, #9aa0a6); }
.dcm-thought > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 0; user-select: none; opacity: 0.85; transition: opacity 0.12s;
}
.dcm-thought > summary::-webkit-details-marker { display: none; }
.dcm-thought > summary::before {
  content: "✦"; font-size: 10px; opacity: 0.7;
}
.dcm-thought > summary::after {
  content: "›"; font-size: 13px; line-height: 1; opacity: 0.6; transition: transform 0.15s;
}
.dcm-thought[open] > summary::after { transform: rotate(90deg); }
.dcm-thought > summary:hover { opacity: 1; }
.dcm-thought-body {
  margin: 3px 0 0 15px; padding: 6px 10px; font-size: 11px; line-height: 1.5;
  color: var(--gray, #9aa0a6); background: rgba(0,0,0,0.03); border-radius: 7px;
}
body.dark .dcm-thought, body.dark .dcm-thought-body { color: #7a828f; }
body.dark .dcm-thought-body { background: rgba(255,255,255,0.04); }

/* Paragraph spacing + headings within assistant answers. */
.docs-msg--ai .docs-msg-text b,
.docs-msg--ai .docs-msg-text strong {
  display: inline-block;
  margin-top: 2px;
  color: var(--text);
  font-weight: 650;
}

/* ── User messages: dark rounded bubble, right-aligned ── */
.docs-msg--user { align-items: flex-end; }
.docs-msg--user .docs-msg-text {
  background: #1f2430;
  color: #fff;
  border: none;
  border-radius: 18px 18px 6px 18px;
  padding: 10px 15px; font-size: 13px; line-height: 1.5;
  max-width: 75%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}
.docs-msg--error .docs-msg-text { color: #e11d48; font-size: 12px; padding: 4px 0; }
.docs-typing-dots::after {
  content: "●●●";
  animation: docs-typing 1.2s infinite;
}
@keyframes docs-typing {
  0%,100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

.docs-chat-input-row { display: flex; gap: 6px; align-items: center; }
.docs-chat-attach-btn {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; border-radius: 6px; color: var(--gray);
  transition: background 0.15s, color 0.15s;
}
.docs-chat-attach-btn:hover { background: rgba(0,0,0,0.06); color: var(--navy-deep); }
.docs-chat-input-row input {
  flex: 1; padding: 7px 10px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 6px; font-size: 12px;
  outline: none; transition: border-color 0.15s;
}
.docs-chat-input-row input:focus { border-color: #6366f1; }
.docs-chat-send-btn {
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 50%;
  background: rgba(26,29,46,0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
  cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: background 0.15s, box-shadow 0.15s;
}
.docs-chat-send-btn:hover {
  background: rgba(45,49,80,0.75);
  box-shadow: 0 4px 16px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.22);
}
.dcm-save-btn {
  height: 34px; padding: 0 14px;
  border: 1px solid rgba(255,255,255,0.38);
  border-radius: 20px;
  background: rgba(99,102,241,0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #6366f1;
  font-size: 12px; font-family: var(--font); font-weight: 600;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(99,102,241,0.12), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.dcm-save-btn:hover { background: rgba(99,102,241,0.28); box-shadow: 0 3px 12px rgba(99,102,241,0.22); }
.dcm-save-btn.saved { background: rgba(22,163,74,0.18); color: #16a34a; border-color: rgba(22,163,74,0.35); }
body.dark .dcm-save-btn { background: rgba(99,102,241,0.15); border-color: rgba(255,255,255,0.12); color: #818cf8; }
body.dark .dcm-save-btn.saved { background: rgba(22,163,74,0.15); color: #4ade80; }

/* ── Docs sidebar (STEP_BUILD) ───────────────────────────────────────────── */
.docs-sb-wrap {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
}
.docs-sb-wrap.docs-sb-chat { padding: 0; }
.docs-sb-title {
  font-size: 11px; font-weight: 700; color: #374151;
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 0 0 2px;
}
.docs-sb-dropzone {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px;
  border: 2px dashed rgba(0,0,0,0.15); border-radius: 10px;
  padding: 28px 16px; cursor: pointer; color: #9ca3af;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.docs-sb-dropzone:hover,
.docs-sb-dropzone.drag-over { border-color: #6366f1; background: rgba(99,102,241,0.04); }
.docs-sb-drop-label { font-size: 12px; font-weight: 600; color: #374151; }
.docs-sb-hint { font-size: 10px; color: #9ca3af; }
.docs-sb-browse {
  margin-top: 4px; padding: 5px 14px;
  background: #f3f4f6; border: 1px solid rgba(0,0,0,0.10);
  border-radius: 6px; font-size: 11px; cursor: pointer; color: #374151;
  transition: background 0.15s;
}
.docs-sb-browse:hover { background: #e5e7eb; }
.docs-sb-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.docs-sb-clear-btn {
  background: none; border: none; cursor: pointer;
  color: #9ca3af; font-size: 11px; padding: 1px 4px;
  border-radius: 4px; transition: color 0.15s;
}
.docs-sb-clear-btn:hover { color: #e11d48; }
.docs-loading { font-size: 11px; color: #6b7280; }
.docs-error   { font-size: 11px; color: #e11d48; }
.docs-action-bar {
  position: sticky; bottom: 0;
  background: var(--panel-bg, #fff);
  display: flex; gap: 6px; align-items: center;
  padding: 8px 12px;
  border-top: 1px solid rgba(0,0,0,0.07);
  z-index: 2;
}
.btn-secondary {
  padding: 6px 10px; background: #f3f4f6;
  border: 1px solid rgba(0,0,0,0.10); border-radius: 7px;
  font-size: 13px; cursor: pointer; color: #374151;
  transition: background 0.15s; flex-shrink: 0;
}
.btn-secondary:hover { background: #e5e7eb; }
.docs-sb-comp-preview {
  display: flex; flex-direction: column; gap: 3px;
  padding: 6px 12px; border-top: 1px solid rgba(0,0,0,0.07);
  max-height: 120px; overflow-y: auto;
}
.docs-sb-comp-label { font-size: 10px; font-weight: 600; color: #9ca3af; margin-bottom: 2px; }
.docs-sb-comp-item { font-size: 11px; color: #374151; display: flex; align-items: center; gap: 5px; }
.docs-sb-comp-more  { font-size: 10px; color: #9ca3af; }
.docs-sb-chat .docs-status-bar { border-radius: 0; border-left: none; border-right: none; border-top: none; }
.docs-sb-chat .docs-chat-msgs  { padding: 8px 12px; }

body.dark .docs-sb-dropzone   { border-color: rgba(255,255,255,0.15); }
body.dark .docs-sb-drop-label { color: #e5e7eb; }
body.dark .docs-sb-browse     { background: rgba(255,255,255,0.06); color: #e5e7eb; }
body.dark .docs-action-bar    { background: var(--panel-bg-dark,#1e2030); border-color: rgba(255,255,255,0.08); }
body.dark .btn-secondary      { background: rgba(255,255,255,0.07); color: #e5e7eb; }
body.dark .docs-sb-comp-item  { color: #e5e7eb; }
body.dark .docs-sb-title      { color: #e5e7eb; }

/* ── Template banner ─────────────────────────────────────────────────────── */
.tpl-banner {
  background: linear-gradient(150deg, rgba(255,255,255,0.68) 0%, rgba(255,255,255,0.42) 100%);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.tpl-banner--loading {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--gray);
}
.tpl-spinner {
  width: 12px; height: 12px; flex-shrink: 0;
  border: 2px solid rgba(107,114,128,0.2);
  border-top-color: #6ab187;
  border-radius: 50%;
  animation: opt-spin 0.8s linear infinite;
}
.tpl-banner--error {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: #9a7414;
  background: rgba(254,246,224,0.85);
  border-color: rgba(200,154,26,0.35);
}
.tpl-dismiss {
  background: none; border: none; cursor: pointer;
  color: #b0b5bc; font-size: 14px; line-height: 1; padding: 0 3px;
}
.tpl-dismiss:hover { color: #c0392b; }
.tpl-header {
  display: flex; align-items: baseline; gap: 7px; margin-bottom: 6px;
}
.tpl-header strong { font-size: 12px; color: var(--text); }
.tpl-meta { font-size: 10px; color: var(--gray); }
.tpl-chips {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px;
}
.tpl-comp-chip {
  font-size: 10px; color: var(--navy);
  background: rgba(82,87,95,0.08);
  border: 1px solid rgba(82,87,95,0.14);
  border-radius: 10px;
  padding: 2px 7px;
  white-space: nowrap;
}
.tpl-actions { display: flex; gap: 6px; }
.btn-tpl-apply {
  flex: 1;
  background: linear-gradient(135deg, #52575f 0%, #6b7280 100%);
  color: #fff; border: none; border-radius: 8px;
  padding: 6px 10px; font-size: 11px; font-family: var(--font);
  cursor: pointer; font-weight: 500;
  transition: opacity 0.15s;
}
.btn-tpl-apply:hover { opacity: 0.88; }
.btn-tpl-dismiss {
  background: rgba(107,114,128,0.09); color: var(--gray);
  border: 1px solid rgba(107,114,128,0.18);
  border-radius: 8px; padding: 6px 10px;
  font-size: 11px; font-family: var(--font);
  cursor: pointer; font-weight: 500;
  transition: background 0.15s;
}
.btn-tpl-dismiss:hover { background: rgba(107,114,128,0.15); }

/* Incomplete-notice in bewerkingspaneel */
.incomplete-notice {
  background: #eff6ff; border: 1px solid var(--accent);
  border-radius: 8px; padding: 7px 10px;
  font-size: 11px; color: #1e3a8a; margin-bottom: 8px;
}

/* ── Optimisation: RI analysis panel (right side) ──────────────────── */
.opt-ri-panel {
  /* Mirror the analyse-tab left #panel width so both tabs look symmetric. */
  width: var(--panel-w, 370px);
  min-width: var(--panel-w, 370px);
  background: #f8f8f9;
  border-left: 1px solid rgba(0,0,0,0.10);
  display: flex;
  flex-direction: column;
  padding: 16px 16px;
  gap: 14px;
  overflow-y: auto;
}

.opt-ri-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.opt-ri-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Grade block */
.opt-grade-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.opt-grade-info { flex: 1; min-width: 0; }
.opt-grade-score {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.opt-grade-max { font-size: 13px; font-weight: 400; color: var(--gray); }
.opt-grade-label { font-size: 10px; color: var(--gray); margin-top: 2px; }

.opt-ri-bar-wrap {
  height: 6px;
  background: rgba(0,0,0,0.08);
  border-radius: 1px;
  overflow: hidden;
  flex-shrink: 0;
}

/* EN 45554 parameter breakdown */
.opt-param-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}
.opt-param-label {
  font-size: 10px;
  color: var(--gray, #6b7280);
  width: 140px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opt-param-bar-wrap {
  flex: 1;
  height: 5px;
  background: rgba(0,0,0,0.07);
  border-radius: 3px;
  overflow: hidden;
}
.opt-param-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.opt-param-score {
  font-size: 10px;
  font-weight: 600;
  color: var(--text, #111);
  width: 22px;
  text-align: right;
  flex-shrink: 0;
}
.opt-param-na   { color: var(--gray, #6b7280); font-weight: 400; }
.opt-param-note {
  font-size: 9px;
  color: var(--gray, #6b7280);
  margin-top: 4px;
  font-style: italic;
}

/* Comparison row: baseline → optimised, with a coloured delta chip. */
.opt-param-row-compare .opt-param-bar-wrap { flex: 0 0 86px; }
.opt-param-compare {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600; min-width: 92px;
  justify-content: flex-end;
}
.opt-param-base  { color: var(--gray, #6b7280); }
.opt-param-arrow { color: rgba(0,0,0,0.30); font-weight: 500; }
.opt-param-best  { color: var(--text, #111); }
.opt-param-best.opt-param-na { color: var(--gray, #6b7280); }
.opt-param-delta-up,
.opt-param-delta-down,
.opt-param-delta-flat {
  font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 8px;
  margin-left: 2px;
  white-space: nowrap;
}
.opt-param-delta-up   { color: #2d7a4f; background: rgba(45,122,79,0.10); }
.opt-param-delta-down { color: #c0392b; background: rgba(192,57,43,0.10); }
.opt-param-delta-flat { color: var(--gray, #6b7280); background: rgba(0,0,0,0.05); }

.opt-section-sub {
  font-size: 9px; font-weight: 500; color: var(--gray, #6b7280);
  text-transform: none; letter-spacing: 0.02em; margin-left: 6px;
}

/* Component list */
.opt-section-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0,0,0,0.09);
  margin-bottom: 0;
}
.opt-no-issues {
  font-size: 11px;
  color: #3d8b5e;
  padding: 8px 0;
}
.opt-comp-item {
  padding: 9px 0;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 0;
}
.opt-comp-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opt-comp-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.opt-comp-bar-track {
  flex: 1;
  height: 5px;
  background: rgba(0,0,0,0.08);
  border-radius: 1px;
  overflow: hidden;
}
.opt-comp-score {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray);
  flex-shrink: 0;
  min-width: 24px;
  text-align: right;
}
.opt-comp-issues {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 1px;
}
.opt-issue-badge {
  font-size: 9.5px;
  font-weight: 500;
  color: var(--gray);
  background: rgba(0,0,0,0.05);
  border: none;
  border-radius: 2px;
  padding: 1px 5px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   3D Viewer — zwevend paneel
   ═══════════════════════════════════════════════════════════════════ */

.viewer3d-panel {
  position: fixed;
  right: 48px; top: 80px;
  width: 560px; height: 420px;
  min-width: 260px; min-height: 180px;
  display: flex; flex-direction: column;
  background: rgba(248,248,250,0.82);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(180,180,192,0.38);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  z-index: 30;
  overflow: hidden;
  transition: opacity 0.15s;
}
.viewer3d-hidden { display: none !important; }

/* Fullscreen mode — 3D dekt het volledige scherm, top-bar tabs blijven erboven */
.viewer3d-panel.viewer3d-fullscreen {
  top: 0; left: 0; right: 0; bottom: 0;
  width: auto; height: auto;
  border-radius: 0;
  resize: none;
  z-index: 201;
  background: #f8f8fa;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
}
/* True fullscreen: hide the top nav bar entirely so the 3D viewer covers the
   whole screen with no bar at the top. Exit via the fullscreen button that
   stays in the viewer's own header. */
body.viewer3d-fs-active #top-bar { display: none; }
/* Left sidebar stays visible AND above the 3D fullscreen viewer */
body.viewer3d-fs-active #panel        { z-index: 260; }
/* Right toolbar still goes behind 3D fullscreen */
body.viewer3d-fs-active #side-toolbar { z-index: 5; pointer-events: none; visibility: hidden; }
/* Bottom toolbar too if present */
body.viewer3d-fs-active #bottom-toolbar { z-index: 5; pointer-events: none; visibility: hidden; }
/* Top-bar is hidden in fullscreen, so the header starts flush at the very top. */
body.viewer3d-fs-active .viewer3d-panel.viewer3d-fullscreen #viewer3d-header { padding-top: 6px; }
.viewer3d-panel.viewer3d-fullscreen #viewer3d-header {
  border-radius: 0 !important;
  cursor: default;
  background: rgba(238,238,244,0.96) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  border-bottom: 1px solid rgba(180,180,192,0.30) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.08) !important;
}
.viewer3d-panel.viewer3d-fullscreen #viewer3d-canvas-wrap {
  background: #ffffff;
}

/* Header / drag handle */
#viewer3d-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 12px;
  background: rgba(238,238,244,0.90);
  border-bottom: 1px solid rgba(180,180,192,0.25);
  border-radius: 12px 12px 0 0;
  cursor: move;
  user-select: none;
  flex-shrink: 0;
}
.viewer3d-drag-handle {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--navy, #52575f);
  flex: 1;
  pointer-events: none;
}
.viewer3d-filename {
  font-size: 10px;
  color: var(--gray, #9ca3af);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viewer3d-header-actions {
  display: flex;
  gap: 1px;
  align-items: center;
}
.viewer3d-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  color: var(--navy, #52575f);
  opacity: 0.6;
  transition: opacity 0.1s, background 0.1s;
  flex-shrink: 0;
}
.viewer3d-btn svg { width: 14px; height: 14px; }
.viewer3d-btn:hover { opacity: 1; background: rgba(0,0,0,0.07); }
.viewer3d-btn.active { opacity: 1; color: var(--accent, #e8a020); }

/* Canvas wrapper */
#viewer3d-canvas-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: #ffffff;
}
#viewer3d-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Drop zone */
#viewer3d-dropzone {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
#viewer3d-dropzone.hidden { display: none; }
#viewer3d-dropzone.drag-over {
  background: rgba(59,130,246,0.08);
}
#viewer3d-canvas-wrap.drag-over-canvas::after {
  content: '+ Add file';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59,130,246,0.12);
  border: 2px dashed rgba(59,130,246,0.5);
  border-radius: 4px;
  font-size: 12px;
  color: var(--accent, #e8a020);
  pointer-events: none;
  z-index: 5;
}
.viewer3d-drop-icon {
  opacity: 0.25;
}
.viewer3d-drop-label {
  font-size: 11.5px;
  color: var(--gray, #9ca3af);
  text-align: center;
  line-height: 1.65;
}
.viewer3d-drop-hint {
  font-size: 10px;
  color: rgba(156,163,175,0.7);
}

/* WASM loading indicator */
#viewer3d-loading {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  background: rgba(30,30,36,0.80);
  font-size: 11px;
  color: #b0b0c0;
}
#viewer3d-loading.visible { display: flex; }
.viewer3d-spinner {
  width: 22px; height: 22px;
  border: 2px solid rgba(152,152,168,0.3);
  border-top-color: var(--accent, #e8a020);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Body wrapper — canvas (left) + side panel (right) */
#viewer3d-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* Part options tab — slides in from right of canvas on part click */
#viewer3d-part-tab {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 0;
  overflow: hidden;
  background: rgba(246,246,250,0.97);
  border-left: 1px solid rgba(180,180,192,0.28);
  transition: width 0.22s ease;
  z-index: 5;
  display: flex;
  flex-direction: column;
}
#viewer3d-part-tab.open {
  width: 190px;
  overflow-y: auto;
}

/* Side panel — slides in from the right */
#viewer3d-side-panel {
  width: 0;
  overflow: hidden;
  flex-shrink: 0;
  transition: width 0.22s ease;
  background: rgba(246,246,250,0.97);
  border-left: 1px solid rgba(180,180,192,0.28);
  display: flex;
  flex-direction: column;
}
#viewer3d-side-panel.viewer3d-sp-open {
  width: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Part header */
.viewer3d-sp-part-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 5px;
  border-bottom: 1px solid rgba(180,180,192,0.22);
  flex-shrink: 0;
}
#viewer3d-sp-name {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  color: var(--navy, #52575f);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Part action buttons */
.viewer3d-sp-btns {
  padding: 5px 6px 3px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.viewer3d-sp-opt {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  font-size: 11px;
  font-family: var(--font, Inter, sans-serif);
  font-weight: 500;
  background: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  color: var(--navy, #52575f);
  text-align: left;
  transition: background 0.1s;
  width: 100%;
}
.viewer3d-sp-opt svg { width: 12px; height: 12px; flex-shrink: 0; }
.viewer3d-sp-opt:hover { background: rgba(0,0,0,0.05); }
.viewer3d-sp-opt.active { color: var(--accent, #e8a020); }
.viewer3d-sp-opt.active:hover { background: rgba(59,130,246,0.08); }
.viewer3d-sp-opt-danger:hover { color: #ef4444; background: rgba(239,68,68,0.07); }

/* Re-link section */
.viewer3d-sp-link {
  padding: 4px 8px 8px;
}
.viewer3d-sp-label {
  font-size: 9.5px;
  color: var(--gray, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
#viewer3d-sp-node-select {
  width: 100%;
  font-size: 10.5px;
  border-radius: 5px;
  border: 1px solid rgba(107,114,128,0.25);
  background: rgba(255,255,255,0.88);
  font-family: var(--font, Inter, sans-serif);
  padding: 3px 4px;
  color: var(--navy, #52575f);
  margin-bottom: 5px;
}
#viewer3d-sp-save-link { width: 100%; }

/* Floating "Link to node" control — anchored under the selected part */
#viewer3d-link-fly {
  position: absolute;
  z-index: 20;
  transform: translateX(-50%);
  pointer-events: auto;
}
#viewer3d-link-fly select {
  font-size: 10.5px;
  border-radius: 6px;
  border: 1px solid rgba(107,114,128,0.35);
  background: rgba(255,255,255,0.96);
  color: var(--navy, #52575f);
  font-family: var(--font, Inter, sans-serif);
  padding: 4px 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  cursor: pointer;
  max-width: 190px;
}
body.dark #viewer3d-link-fly select {
  background: rgba(30,33,42,0.97);
  color: #c8cdd8;
  border-color: rgba(255,255,255,0.18);
}

/* Separator */
.viewer3d-sp-sep {
  height: 1px;
  background: rgba(180,180,192,0.28);
  margin: 2px 0 4px;
  flex-shrink: 0;
}

/* Section label (Parts) */
.viewer3d-sp-section-label {
  font-size: 9.5px;
  color: var(--gray, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 6px 8px 2px;
  flex-shrink: 0;
}

/* Mapping table in side panel */
#viewer3d-sp-mapping {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

#viewer3d-mapping-table-wrap {
  padding: 4px 8px 4px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.viewer3d-mapping-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 10.5px;
}
.viewer3d-mapping-table td {
  padding: 3px 4px;
  vertical-align: middle;
}
.viewer3d-mapping-table td:first-child {
  color: var(--navy, #52575f);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viewer3d-mapping-table select {
  width: 100%;
  font-size: 10.5px;
  border-radius: 5px;
  border: 1px solid rgba(107,114,128,0.25);
  background: rgba(255,255,255,0.88);
  font-family: var(--font, Inter, sans-serif);
  padding: 2px 4px;
  color: var(--navy, #52575f);
}
.viewer3d-row-unmatched td:first-child { color: var(--accent, #e8a020); }

.viewer3d-drawer-actions {
  display: flex;
  gap: 6px;
  padding: 5px 10px 8px;
}
.viewer3d-action-btn {
  flex: 1;
  font-size: 10.5px;
  font-family: var(--font, Inter, sans-serif);
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(107,114,128,0.25);
  background: rgba(255,255,255,0.80);
  color: var(--navy, #52575f);
  cursor: pointer;
  transition: background 0.1s;
}
.viewer3d-action-btn:hover { background: rgba(255,255,255,1); }
.viewer3d-action-btn.primary {
  background: var(--accent, #e8a020);
  border-color: var(--accent, #e8a020);
  color: #fff;
}
.viewer3d-action-btn.primary:hover { filter: brightness(1.08); }

/* Resize grip (rechtsonder) */
.viewer3d-resize-grip {
  position: absolute;
  bottom: 0; right: 0;
  width: 18px; height: 18px;
  cursor: nwse-resize;
  background: linear-gradient(
    135deg,
    transparent 40%,
    rgba(140,140,155,0.35) 40%,
    rgba(140,140,155,0.35) 50%,
    transparent 50%,
    transparent 65%,
    rgba(140,140,155,0.35) 65%,
    rgba(140,140,155,0.35) 75%,
    transparent 75%
  );
  border-radius: 0 0 12px 0;
  z-index: 2;
}

/* Toggle button active state */
#btn-3d-toggle.viewer3d-open {
  color: var(--accent, #e8a020);
  opacity: 1;
}

/* ── Hover tooltip ──────────────────────────────────────────────────── */
#viewer3d-tooltip {
  display: none;
  position: fixed;
  pointer-events: none;
  z-index: 200;
  background: rgba(30,30,36,0.88);
  color: #f0f0f4;
  font-size: 10.5px;
  font-family: var(--font, Inter, sans-serif);
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  backdrop-filter: blur(4px);
}

/* ── Inline options popup ─────────────────────────────────────────────── */
#viewer3d-link-popup {
  display: none;
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  gap: 0;
  background: rgba(248,248,252,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(180,180,195,0.4);
  border-radius: 10px;
  padding: 8px;
  min-width: 190px;
  max-width: 280px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.16);
  z-index: 40;
}
.v3lp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 4px 7px 4px;
  border-bottom: 1px solid rgba(107,114,128,0.12);
  margin-bottom: 4px;
}
#viewer3dp-part-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--navy, #52575f);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v3lp-close-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--gray, #6b7280);
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  transition: background 0.1s;
}
.v3lp-close-btn:hover { background: rgba(0,0,0,0.07); }

.v3lp-options { display: flex; flex-direction: column; gap: 1px; }

.v3lp-option-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 11.5px;
  font-family: var(--font, Inter, sans-serif);
  font-weight: 500;
  color: var(--navy, #52575f);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, color 0.1s;
}
.v3lp-option-btn:hover { background: rgba(0,0,0,0.05); }
.v3lp-option-btn.active { color: var(--accent, #e8a020); }
.v3lp-option-btn.active:hover { background: rgba(59,130,246,0.08); }

.v3lp-linked-label {
  font-size: 10px;
  color: var(--gray, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 72px;
}
.v3lp-chevron { transition: transform 0.15s; }
.v3lp-option-expand.open .v3lp-chevron { transform: rotate(180deg); }

.v3lp-sep { height: 1px; background: rgba(107,114,128,0.12); margin: 3px 4px; }

.v3lp-link-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 4px 2px 4px;
}
#viewer3dp-node-select {
  width: 100%;
  font-size: 11px;
  font-family: var(--font, Inter, sans-serif);
  border-radius: 6px;
  border: 1px solid rgba(107,114,128,0.28);
  background: rgba(255,255,255,0.9);
  padding: 4px 6px;
  color: var(--navy, #52575f);
}
.v3lp-actions { display: flex; gap: 6px; }
.v3lp-btn {
  flex: 1;
  font-size: 11px;
  font-family: var(--font, Inter, sans-serif);
  font-weight: 500;
  padding: 5px 0;
  border-radius: 6px;
  border: 1px solid rgba(107,114,128,0.25);
  background: rgba(255,255,255,0.8);
  color: var(--navy, #52575f);
  cursor: pointer;
  transition: background 0.1s;
}
.v3lp-btn:hover { background: rgba(255,255,255,1); }
.v3lp-btn.primary {
  background: var(--accent, #e8a020);
  border-color: var(--accent, #e8a020);
  color: #fff;
}
.v3lp-btn.primary:hover { filter: brightness(1.08); }

/* ── File list (pills) ──────────────────────────────────────────────── */
#viewer3d-file-list {
  display: none;   /* shown via JS when files are loaded */
  position: absolute;
  top: 6px; left: 8px; right: 8px;
  z-index: 5;
  flex-wrap: wrap;
  gap: 5px;
  pointer-events: none;   /* buttons inside get their own pointer-events */
}
#viewer3d-file-list.has-files { display: flex; }

.v3d-file-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-family: var(--font, Inter, sans-serif);
  font-weight: 500;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(160,160,175,0.35);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  pointer-events: auto;
  max-width: 200px;
}
.v3d-file-pill-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--navy, #52575f);
}
.v3d-file-pill-ap {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.v3d-ap-242  { background: #dbeafe; color: #1d4ed8; }
.v3d-ap-214  { background: #dcfce7; color: #166534; }
.v3d-ap-203  { background: #fef9c3; color: #854d0e; }
.v3d-ap-step { background: #f3f4f6; color: #6b7280; }

.v3d-file-pill-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  font-size: 11px;
  line-height: 1;
  padding: 0 1px;
  transition: color 0.1s;
}
.v3d-file-pill-remove:hover { color: #c0392b; }

/* Drop-hint kleinere tekst */
.viewer3d-drop-hint {
  font-size: 9.5px;
  color: rgba(156,163,175,0.75);
  margin-top: 2px;
}

/* ── Per-node colour legend in mapping drawer ───────────────────────── */
.v3d-color-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 4px;
  vertical-align: middle;
}

.v3d-transp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  color: #9ca3af;
  transition: color .15s, background .15s;
}
.v3d-transp-btn:hover { color: #6b7280; background: rgba(0,0,0,.06); }
.v3d-transp-btn.active { color: #3b82f6; border-color: #3b82f6; background: rgba(59,130,246,.08); }
.v3d-remove-btn:hover { color: #ef4444; background: rgba(239,68,68,.08); }

/* ── Signal questionnaire in sidebar ─────────────────────────────── */
.sig-q-block { margin-bottom: 10px; }
.sig-q-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--text);
  margin-bottom: 5px;
}
.sig-q-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.check-list { display: flex; flex-direction: column; gap: 2px; padding-left: 15px; }
.check-list-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text);
  padding: 3px 4px; border-radius: 4px; cursor: pointer;
}
.check-list-item:hover { background: #f9fafb; }
.check-list-item input[type="checkbox"] { cursor: pointer; width: 13px; height: 13px; }

/* ── Signal connections collapsible ──────────────────────────────── */
details.sig-details > summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0;
}
details.sig-details > summary::-webkit-details-marker { display: none; }
details.sig-details[open] > summary { margin-bottom: 10px; }
.sig-chevron { font-size: 11px; color: var(--gray); transition: transform 0.15s; }
details.sig-details[open] .sig-chevron { transform: rotate(180deg); }
.v3d-transp-btn svg { width: 12px; height: 12px; }

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE  (body.dark)
   ═══════════════════════════════════════════════════════════════════ */
body, #tree-canvas, .tab-view,
#panel, .section-card, .edit-banner,
.top-bar-inner, .side-btn, #search-input,
#bottom-toolbar button, #legend-bar, #filter-bar,
.viewer3d-panel, #viewer3d-header, #viewer3d-canvas-wrap,
.viewer3d-action-btn, .v3d-file-pill, #viewer3d-link-popup,
.res-card, .res-nav-btn, #comp-drawer, .btn-start-template, .btn-start-step3d, .btn-start-url, .btn-start-pdf, .btn-start-video, #url-input,
.ri-score-bar-track, .ri-param-bar-wrap, .ri-mini-bar {
  transition:
    background 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

body.dark {
  --text:       #e2e8f0;
  --gray:       #94a3b8;
  --gray-l:     #334155;
  --sev-good:   #6fae90;
  --sev-warn:   #c39257;
  --sev-bad:    #c77f78;
  --navy:       #94a3b8;
  --navy-deep:  #cbd5e1;
  --panel-bg:   rgba(15,17,22,0.30);
  --shadow:     0 8px 32px rgba(0,0,0,0.40);
  background: linear-gradient(135deg, #16171b 0%, #1c1e24 50%, #22252c 100%);
  color: var(--text);
}

/* ── Tree canvas ────────────────────────────────────────────────── */
body.dark #tree-canvas {
  background: linear-gradient(135deg, #16171b 0%, #1c1e24 50%, #22252c 100%);
}
/* Dark-mode starfield colour is handled in bg-dots.js (reads body.dark). */

/* ── Results / Optimisation tab view backgrounds ────────────────── */
body.dark.tab-results .tab-view[data-view="results"] {
  background: #131417;
  background-image: none;
}
body.dark.tab-optimisation .tab-view[data-view="optimisation"] {
  background: linear-gradient(135deg, #16171b 0%, #1c1e24 50%, #22252c 100%);
}

/* ── Left panel ─────────────────────────────────────────────────── */
body.dark #panel {
  background: transparent;
  border: none;
}

/* ── Section cards ──────────────────────────────────────────────── */
body.dark .section-card {
  background: linear-gradient(150deg, rgba(52,56,70,0.90) 0%, rgba(40,44,56,0.80) 100%);
  border-color: rgba(255,255,255,0.13);
  box-shadow: 0 4px 18px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.12);
}

/* ── Edit banner ────────────────────────────────────────────────── */
body.dark .edit-banner {
  background: linear-gradient(150deg, rgba(52,56,68,0.90) 0%, rgba(44,48,60,0.82) 100%);
  border-color: rgba(255,255,255,0.09);
  box-shadow: 0 2px 10px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ── Top bar ────────────────────────────────────────────────────── */
body.dark .top-bar-inner {
  background: rgba(25,27,34,0.75);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 2px 16px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.05);
}
body.dark .nav-tab { color: var(--gray); border-color: rgba(255,255,255,0.08); }
body.dark .nav-tab.active {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
  color: var(--navy-deep);
}
body.dark .nav-tab:not(.active):hover {
  background: rgba(255,255,255,0.05);
  color: var(--text);
}
body.dark .nav-divider { background: rgba(255,255,255,0.09); }

/* ── Side toolbar buttons ───────────────────────────────────────── */
body.dark .side-btn {
  background: rgba(25,27,34,0.75);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
  color: var(--gray);
}
body.dark .side-btn:hover { background: rgba(35,38,48,0.90); color: var(--navy-deep); }

/* ── Search ─────────────────────────────────────────────────────── */
body.dark #search-input {
  background: rgba(25,27,34,0.75);
  border-color: rgba(255,255,255,0.08);
  color: var(--text);
  box-shadow: 0 2px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
}
body.dark #search-results {
  background: rgba(28,30,38,0.98);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.45);
}
body.dark .search-result-item { color: var(--text); border-bottom-color: rgba(255,255,255,0.05); }
body.dark .search-result-item:hover { background: rgba(255,255,255,0.05); }

/* ── Bottom toolbar ─────────────────────────────────────────────── */
body.dark #bottom-toolbar button {
  background: rgba(25,27,34,0.75);
  border-color: rgba(255,255,255,0.08);
  color: var(--gray);
  box-shadow: 0 2px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
}
body.dark #bottom-toolbar button:hover { background: rgba(35,38,48,0.90); color: var(--text); }

/* ── Legend bar ─────────────────────────────────────────────────── */
body.dark #legend-bar,
body.dark #filter-bar {
  background: rgba(25,27,34,0.88);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
}
body.dark #legend-close:hover,
body.dark #filter-close:hover { background: rgba(255,255,255,0.08); }
body.dark .legend-col { border-right-color: rgba(255,255,255,0.08); }
body.dark .filter-row:hover { background: rgba(255,255,255,0.05); }
body.dark .filter-sep { border-top-color: rgba(255,255,255,0.08); }

/* ── Form elements ──────────────────────────────────────────────── */
body.dark .form-row input,
body.dark input[type="number"] {
  background: rgba(44,48,60,0.90);
  border-color: rgba(255,255,255,0.14);
  color: var(--text);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
}
body.dark .form-row select,
body.dark .trio-item select,
body.dark .duo-item select {
  background-color: rgba(44,48,60,0.90);
  border-color: rgba(255,255,255,0.14);
  color: var(--text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
}
body.dark .form-row select:hover,
body.dark .trio-item select:hover { background-color: rgba(52,56,70,0.95); }
body.dark .form-row select:focus,
body.dark .trio-item select:focus { background-color: rgba(52,56,70,1); }
body.dark input[type="range"] { background: var(--gray-l); }
body.dark input[type="range"]::-webkit-slider-runnable-track { background: var(--gray-l); }
body.dark input[type="range"]::-webkit-slider-thumb { background: var(--gray); }

/* ── History / name screen cards ────────────────────────────────── */
body.dark .name-section,
body.dark .hist-section { background: rgba(28,31,40,0.70); border-color: rgba(255,255,255,0.07); }
body.dark .hist-item:hover { background: rgba(255,255,255,0.05); }
body.dark #name-input {
  background: rgba(24,26,35,0.88);
  border-color: rgba(255,255,255,0.10);
  color: var(--text);
}
body.dark .btn-create {
  background: var(--accent);
  color: #fff;
}
body.dark .btn-start-template,
body.dark .btn-start-step3d,
body.dark .btn-start-url,
body.dark .btn-start-pdf,
body.dark .btn-start-video {
  color: var(--gray);
  border-color: rgba(255,255,255,0.12);
  background: rgba(30,33,42,0.50);
}
body.dark .btn-start-template:hover,
body.dark .btn-start-step3d:hover,
body.dark .btn-start-url:hover,
body.dark .btn-start-pdf:hover,
body.dark .btn-start-video:hover {
  background: rgba(40,43,54,0.70);
  border-color: rgba(255,255,255,0.22);
  color: var(--navy-deep);
}
body.dark #url-input {
  background: rgba(24,26,35,0.88);
  border-color: rgba(255,255,255,0.10);
  color: var(--text);
}
body.dark .step3d-hint { color: #6b7280; }
body.dark .docs-pill--ok  { background: rgba(52,168,83,0.15); color: #6fcf97; }
body.dark .docs-pill--err { background: rgba(220,53,69,0.15); color: #f87171; }

body.dark .analyse-tab { border-color: rgba(255,255,255,0.12); color: #555a6a; }
body.dark .analyse-tab.active { background: #e8e9ec; color: #15171e; border-color: #e8e9ec; }
body.dark .analyse-tab:hover:not(.active) { background: rgba(255,255,255,0.05); }
body.dark .docs-drop-zone { border-color: rgba(255,255,255,0.12); }
body.dark .docs-drop-zone:hover,
body.dark .docs-drop-zone.drag-over { border-color: #818cf8; background: rgba(129,140,248,0.06); }
body.dark .docs-drop-text { color: #555a6a; }
body.dark .docs-status-bar { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.07); }
body.dark .docs-field-ok { background: rgba(22,163,74,0.15); color: #86efac; }
body.dark .docs-field-missing { background: rgba(225,29,72,0.12); color: #fca5a5; }
body.dark .docs-product-hint { color: #555a6a; }
body.dark .docs-msg--ai .docs-msg-text { background: none; border: none; color: #c8cdd8; }
body.dark .docs-msg--ai .docs-msg-text b,
body.dark .docs-msg--ai .docs-msg-text strong { color: #f1f3f6; }
body.dark .docs-msg--ai .docs-msg-role { color: #6b7280; }
body.dark .docs-msg--user .docs-msg-text { background: #e8e9ec; color: #15171e; border: none; }
body.dark .dcm-context { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
body.dark .dcm-ctx-cat { color: #e2e8f0; }
body.dark .dcm-ctx-dpp { color: #b6bcc8; }
body.dark .docs-chat-input-row input { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); color: #c8cdd8; }
body.dark .docs-chat-input-row input:focus { border-color: #818cf8; }
body.dark .docs-chat-send-btn { background: #e8e9ec; color: #15171e; }
body.dark .docs-chat-send-btn:hover { background: #fff; }
body.dark .docs-chat-attach-btn { color: #555a6a; }
body.dark .docs-chat-attach-btn:hover { background: rgba(255,255,255,0.07); color: #c8cdd8; }

/* ── HSM tooltip ────────────────────────────────────────────────── */
body.dark #hsm-tooltip {
  background: rgba(22,24,30,0.96);
  border-color: rgba(255,255,255,0.08);
  color: var(--text);
}

/* ── Placeholder text ───────────────────────────────────────────── */
body.dark .ph-title { color: #4a5068; }
body.dark .ph-sub   { color: #3a4055; }
body.dark .ph-ghost-root  { background: rgba(60,65,80,0.25); border-color: rgba(80,85,100,0.20); }
body.dark .ph-ghost-comp  { background: rgba(60,65,80,0.16); border-color: rgba(80,85,100,0.16); }

/* ── 3D viewer panel ────────────────────────────────────────────── */
body.dark .viewer3d-panel {
  background: rgba(20,22,28,0.55);
  box-shadow: 0 8px 40px rgba(0,0,0,0.50);
}
body.dark #viewer3d-header {
  background: rgba(44,48,62,0.97);
  border-bottom-color: rgba(255,255,255,0.08);
}
body.dark .viewer3d-panel.viewer3d-fullscreen #viewer3d-header .viewer3d-btn { color: #52575f !important; }
body.dark .viewer3d-panel.viewer3d-fullscreen #viewer3d-header .viewer3d-drag-handle { color: #52575f !important; }
body.dark .viewer3d-panel.viewer3d-fullscreen #viewer3d-header .viewer3d-filename { color: #6b7280 !important; }
body.dark #viewer3d-canvas-wrap { background: #1a1c22; }
body.dark .viewer3d-action-btn {
  background: rgba(30,33,42,0.90);
  border-color: rgba(255,255,255,0.10);
  color: var(--gray);
}
body.dark .viewer3d-action-btn:hover { background: rgba(40,43,54,1); }
body.dark .v3d-file-pill {
  background: rgba(30,33,42,0.90);
  border-color: rgba(255,255,255,0.08);
}
body.dark #viewer3d-link-popup {
  background: rgba(22,24,30,0.97);
  border-color: rgba(255,255,255,0.08);
}
body.dark .v3lp-header       { border-color: rgba(255,255,255,0.08); }
body.dark .v3lp-sep           { background: rgba(255,255,255,0.08); }
body.dark #viewer3dp-part-name { color: #e2e8f0; }
body.dark .v3lp-option-btn    { color: #c8cdd8; }
body.dark .v3lp-option-btn:hover { background: rgba(255,255,255,0.06); }
body.dark #viewer3dp-node-select  { background: rgba(30,33,42,0.9); color: #c8cdd8; border-color: rgba(255,255,255,0.12); }
body.dark .v3lp-btn           { background: rgba(40,43,54,0.8); color: #c8cdd8; border-color: rgba(255,255,255,0.10); }
body.dark .v3lp-btn:hover     { background: rgba(50,54,68,1); }
body.dark .viewer3d-btn { color: var(--gray); }
body.dark .viewer3d-btn:hover { background: rgba(255,255,255,0.06); }
body.dark #viewer3d-side-panel { background: rgba(28,31,40,0.97); border-color: rgba(255,255,255,0.08); }
body.dark #viewer3d-part-tab { background: rgba(28,31,40,0.97); border-color: rgba(255,255,255,0.08); }
body.dark .viewer3d-sp-part-header { border-color: rgba(255,255,255,0.08); }
body.dark #viewer3d-sp-name { color: #e2e8f0; }
body.dark .viewer3d-sp-opt { color: #c8cdd8; }
body.dark .viewer3d-sp-opt:hover { background: rgba(255,255,255,0.06); }
body.dark .viewer3d-sp-sep { background: rgba(255,255,255,0.08); }
body.dark #viewer3d-sp-node-select { background: rgba(30,33,42,0.9); color: #c8cdd8; border-color: rgba(255,255,255,0.12); }
body.dark .edit-banner-name { color: #e2e8f0; }

/* ── Canvas title ───────────────────────────────────────────────── */
body.dark #canvas-title {
  background: rgba(22,24,30,0.85);
  border-color: rgba(255,255,255,0.08);
}

/* ── Tab-view empty states ──────────────────────────────────────── */
body.dark .tab-view-title { color: #4a5068; }
body.dark .tab-view-sub   { color: #3a4055; }

/* ── Results / Optimisation panels ─────────────────────────────── */
body.dark .opt-ri-panel {
  background: #1a1c22;
  border-color: rgba(255,255,255,0.07);
}
body.dark .opt-comp-item,
body.dark .opt-suggestion,
body.dark .opt-section-title {
  border-color: rgba(255,255,255,0.07);
}
body.dark .opt-issue-badge {
  background: rgba(255,255,255,0.07);
  color: #9ca3af;
}
body.dark .opt-param-bar-wrap { background: rgba(255,255,255,0.08); }
body.dark .opt-param-note     { color: #6b7280; }
body.dark .opt-sug-rule {
  background: rgba(255,255,255,0.07);
  color: #9ca3af;
}

/* ── Theme toggle icon ──────────────────────────────────────────── */
body.dark #theme-icon-moon { display: none; }
body.dark #theme-icon-sun  { display: block; }

/* ── Results tab ────────────────────────────────────────────────── */
body.dark #results-nav {
  background: #16171c;
  border-bottom-color: rgba(255,255,255,0.09);
}
body.dark #results-content {
  background: #111216;
  scrollbar-color: #333 #111216;
}
body.dark .res-nav-btn { color: #9aa1ad; }
body.dark .res-nav-btn.active { color: #f1f1f1; background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.12); }
body.dark .res-nav-btn:not(.active):hover { color: #cbd5e1; background: rgba(255,255,255,0.05); }
body.dark .res-document { background: transparent; box-shadow: none; }
body.dark .res-scroll-section {
  background: #1c1d24;
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
}
body.dark .res-card {
  background: #1c1d24;
  border-bottom-color: rgba(255,255,255,0.06);
}
body.dark .res-card-title {
  color: #e8e8e8;
  border-bottom-color: rgba(255,255,255,0.07);
}
body.dark .res-card-count { background: rgba(255,255,255,0.08); color: #777; }
body.dark .ri-grade-a { background: rgba(79,128,105,0.20);  color: #8fbfa2; border-color: rgba(79,128,105,0.40); }
body.dark .ri-grade-b { background: rgba(79,128,105,0.16);  color: #8fbfa2; border-color: rgba(79,128,105,0.34); }
body.dark .ri-grade-c { background: rgba(154,106,56,0.20);  color: #c79a63; border-color: rgba(154,106,56,0.40); }
body.dark .ri-grade-d { background: rgba(156,83,76,0.20);   color: #c98d86; border-color: rgba(156,83,76,0.40); }
body.dark .ri-score-bar-track { background: rgba(255,255,255,0.10); }
body.dark .ri-score-bar-max   { background: rgba(255,255,255,0.28); }
body.dark .ri-param-bar-wrap  { background: rgba(255,255,255,0.10); }
body.dark .ri-mini-bar        { background: rgba(255,255,255,0.10); }
body.dark .ri-param-na {
  background: repeating-linear-gradient(
    -45deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04) 3px, transparent 3px, transparent 7px
  );
}
body.dark .ri-param-na-label { color: #475569 !important; }
body.dark .ri-param-na-val   { color: #475569 !important; }
body.dark .ri-table thead th { border-bottom-color: rgba(255,255,255,0.14); }
body.dark .ri-table tbody tr:hover { background: rgba(255,255,255,0.04); }
body.dark .ri-table tbody td { border-bottom-color: rgba(255,255,255,0.07); }
body.dark .ri-table tfoot td { border-top-color: rgba(255,255,255,0.14); }
body.dark .res-intro,
body.dark .dpp-crossref-note,
body.dark .ri-footer-note {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
body.dark .info-btn { background: rgba(255,255,255,0.08); color: var(--gray); }
body.dark .info-btn:hover { background: rgba(255,255,255,0.14); color: var(--text); }
body.dark .info-tip {
  background: rgba(22,24,30,0.98);
  border-color: rgba(255,255,255,0.08);
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
}

/* ── Results elements — dark ────────────────────────────────────── */
body.dark .res-metrics-grid { background: transparent; border-color: rgba(255,255,255,0.08); }
body.dark .res-metric { background: transparent; border-left-color: rgba(255,255,255,0.06); }
body.dark .res-metric-val { color: #e8e8e8; }
body.dark .res-stat-row { border-bottom-color: rgba(255,255,255,0.05); }
body.dark .res-stat-key { color: #888; }
body.dark .res-stat-val { color: #e0e0e0; }
body.dark .res-sub-label { color: #555; }
body.dark .res-hotspot-item { border-bottom-color: rgba(255,255,255,0.05); }
body.dark .res-hotspot-item:hover { background: rgba(255,255,255,0.03); }
body.dark .res-hotspot-name { color: #e0e0e0; }
body.dark .res-hotspot-rank { color: #555; }
body.dark .res-meta-chip { background: rgba(255,255,255,0.07); color: #777; }
body.dark .res-meta-chip.cause { background: rgba(255,255,255,0.07); color: #888; }
body.dark .res-score-bar { background: rgba(255,255,255,0.10); }
body.dark .res-chip { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.10); color: #ccc; }
body.dark .res-chip.clickable:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); color: #e5e5e5; }
body.dark .res-acc-header, body.dark .res-acc-row { border-bottom-color: rgba(255,255,255,0.05); }
body.dark .res-acc-label { color: #888; }
body.dark .res-cluster { border-bottom-color: rgba(255,255,255,0.06); }
body.dark .res-cluster-title { color: #e0e0e0; }
body.dark .res-cluster-desc { color: #888; }
body.dark .ri-footer-note { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }

/* ── Component drawer ───────────────────────────────────────────── */
body.dark #comp-drawer {
  background: #14151b;
  border-left-color: rgba(255,255,255,0.08);
  box-shadow: -4px 0 24px rgba(0,0,0,0.45);
}
body.dark #comp-drawer-close {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.10);
  color: var(--gray);
}
body.dark #comp-drawer-close:hover { background: rgba(255,255,255,0.13); color: var(--text); }
body.dark .drawer-section-label { border-top-color: rgba(255,255,255,0.07); }
body.dark .drawer-row { border-bottom-color: rgba(255,255,255,0.05); }

/* ═══════════════════════════════════════════════════════════════════
   Digital Product Passport (DPP) section
   ═══════════════════════════════════════════════════════════════════ */

.dpp-loading {
  padding: 24px 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--gray, #9ca3af);
}

.dpp-intro {
  font-size: 11.5px;
  color: var(--navy, #52575f);
  margin: 0 0 16px;
  line-height: 1.55;
}

.dpp-section-tag {
  display: inline-block;
  margin-left: 8px;
  font-size: 9.5px;
  font-weight: 500;
  background: rgba(107,114,128,0.10);
  color: var(--gray, #6b7280);
  border: 1px solid rgba(107,114,128,0.20);
  border-radius: 3px;
  padding: 1px 6px;
  vertical-align: middle;
}

/* ── Hero overview header ─────────────────────────────────────── */
.dpp-hero {
  margin-bottom: 14px;
  padding: 16px 18px;
}
.dpp-hero-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.dpp-hero-product {
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #1f2937);
  letter-spacing: -0.01em;
}
.dpp-hero-meta {
  font-size: 10.5px;
  color: var(--gray, #9ca3af);
  margin-top: 2px;
}
.dpp-hero-status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
}
.dpp-hero-readiness {
  margin-top: 4px;
}
.dpp-hero-readiness-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray, #9ca3af);
  margin-bottom: 6px;
  font-weight: 600;
}
.dpp-hero-readiness-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dpp-hero-readiness-bar {
  flex: 1;
}
.dpp-hero-readiness-bar .dpp-mini-bar-track {
  height: 8px;
}
.dpp-hero-readiness-pct {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #1f2937);
  font-variant-numeric: tabular-nums;
  min-width: 44px;
  text-align: right;
}
.dpp-hero-main {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 14px;
  align-items: stretch;
}
.dpp-hero-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(0,0,0,0.025);
  border: 1px solid rgba(0,0,0,0.05);
}
.dpp-hero-block-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--gray, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dpp-hero-block-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy, #1f2937);
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.dpp-hero-block-unit {
  font-size: 11px;
  font-weight: 400;
  color: var(--gray, #9ca3af);
  margin-left: 2px;
}
.dpp-hero-block-ring {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.dpp-hero-block-sub {
  font-size: 10.5px;
  color: var(--gray, #9ca3af);
  line-height: 1.4;
}
.dpp-hero-empty {
  font-size: 10.5px;
  color: var(--gray, #9ca3af);
  font-style: italic;
}
.dpp-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(0,0,0,0.025);
  border: 1px solid rgba(0,0,0,0.05);
}
.dpp-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dpp-hero-stat-v {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy, #1f2937);
  line-height: 1.1;
}
.dpp-hero-stat-l {
  font-size: 10px;
  color: var(--gray, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
body.dark .dpp-hero-head { border-bottom-color: rgba(255,255,255,0.06); }
body.dark .dpp-hero-product { color: #f3f4f6; }
body.dark .dpp-hero-block,
body.dark .dpp-hero-stats {
  background: rgba(255,255,255,0.025);
  border-color: rgba(255,255,255,0.06);
}
body.dark .dpp-hero-block-value,
body.dark .dpp-hero-stat-v { color: #e5e7eb; }
body.dark .dpp-hero-status {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}
@media (max-width: 860px) {
  .dpp-hero-main { grid-template-columns: 1fr 1fr; }
  .dpp-hero-stats { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
}

/* ── QR info rows (cleaner pills) ─────────────────────────────── */
.dpp-qr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(0,0,0,0.05);
}
.dpp-qr-row:last-of-type { border-bottom: none; }
.dpp-qr-pill {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.dpp-qr-pill-draft { background: rgba(0,0,0,0.05);      color: var(--gray, #6b7280); border: 1px solid rgba(0,0,0,0.08); }
.dpp-qr-pill-off   { background: rgba(0,0,0,0.05);      color: var(--gray, #9ca3af); border: 1px solid rgba(0,0,0,0.08); }
.dpp-qr-pill-info  { background: rgba(79,128,105,0.10); color: var(--sev-good); border: 1px solid rgba(79,128,105,0.20); }
.dpp-qr-note {
  margin-top: 10px;
  font-size: 10.5px;
  color: var(--gray, #9ca3af);
  line-height: 1.5;
}
body.dark .dpp-qr-row { border-bottom-color: rgba(255,255,255,0.06); }
body.dark .dpp-qr-pill-off { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #aaa; }

/* ── Summary cards grid (row of 4 + row of 3) ──────────────────── */
.dpp-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 1100px) {
  .dpp-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .dpp-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.dpp-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
/* Reserveer 2 regels voor elke DPP-card-titel zodat lange labels
   ("A — EN 45554 Repair Index") en korte ("G — Export Status")
   dezelfde verticale ruimte innemen — anders verspringt de waarde +
   bar daaronder per card en lijnen kolommen niet uit op één rij. */
.dpp-card .res-card-title {
  min-height: 34px;
  align-items: flex-start;
  line-height: 1.25;
}

/* Clickable jump-cards: navigeren naar dpp-sec-X bij klik */
.dpp-card-jump {
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.dpp-card-jump:hover {
  transform: translateY(-1px);
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.dpp-card-jump:focus-visible {
  outline: 2px solid var(--accent, #e8a020);
  outline-offset: 2px;
}
body.dark .dpp-card-jump:hover {
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Shared small modal (dossier export, group assign) — theme-aware */
.sparce-modal {
  position: fixed; inset: 0; z-index: 100001;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17, 24, 39, 0.45);
}
.sparce-modal-card {
  background: #ffffff; color: var(--text, #1f2937);
  border: 1px solid rgba(0,0,0,0.08); border-radius: 12px;
  padding: 18px; box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  max-width: 460px; width: 92%;
}
body.dark .sparce-modal-card { background: #1a2236; color: #e5e7eb; border-color: rgba(255,255,255,0.08); }
.sparce-modal-title { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.sparce-modal-hint { font-size: 12px; color: var(--gray, #6b7280); margin-bottom: 10px; }
.sparce-modal-input {
  width: 100%; box-sizing: border-box; font-size: 13px; padding: 7px 9px;
  border-radius: 6px; border: 1px solid var(--gray-l, #e5e7eb);
  background: rgba(0,0,0,0.02); color: inherit; outline: none;
}
body.dark .sparce-modal-input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); }
.sparce-modal-btn {
  font-size: 13px; padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--gray-l, #d1d5db); background: none; color: inherit; cursor: pointer;
}
.sparce-modal-btn:hover { background: var(--accent-light, rgba(59,130,246,0.08)); }
.sparce-modal-btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; font-weight: 600; }
.sparce-modal-btn-primary:hover { background: #1d4ed8; }

/* DPP intro table — clickable rows (jump to detail) */
.dpp-intro-table tr.dpp-row-jump { cursor: pointer; transition: background 0.12s ease; }
.dpp-intro-table tr.dpp-row-jump:hover { background: var(--accent-light, rgba(59,130,246,0.08)); }
.dpp-intro-table tr.dpp-row-jump:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: -2px; }
.dpp-intro-table td { vertical-align: middle; }
.dpp-intro-table .dpp-tbl-val { white-space: nowrap; }
body.dark .dpp-intro-table tr.dpp-row-jump:hover { background: rgba(255,255,255,0.05); }

.dpp-card-main {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy, #52575f);
  line-height: 1;
  /* Reserve a consistent vertical slot so the mini-bar below sits at the
     same y-position across cards regardless of whether main contains a
     grade badge, unit suffix or just a percentage. */
  min-height: 26px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dpp-card-main-sm {
  font-size: 15px;
  font-weight: 600;
}

.dpp-card-unit {
  font-size: 12px;
  font-weight: 400;
  color: var(--gray, #9ca3af);
}

.dpp-card-ring {
  display: flex;
  justify-content: flex-start;
  margin: 2px 0;
}

.dpp-card-sub {
  font-size: 10.5px;
  color: var(--gray, #9ca3af);
  line-height: 1.4;
}

.dpp-embed-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 3px;
  margin-top: 2px;
}

.dpp-embed-ok      { background: rgba(79,128,105,0.10); color: var(--sev-good); border: 1px solid rgba(79,128,105,0.22); }
.dpp-embed-missing { background: rgba(156,83,76,0.09);  color: var(--sev-bad);  border: 1px solid rgba(156,83,76,0.20); }
/* Help "?" icons: subtle by default, clear on hover — less visual noise. */
.dpp-help, .info-btn { opacity: 0.5; transition: opacity 0.12s; }
.dpp-help:hover, .info-btn:hover { opacity: 1; }

/* ── Grade badge ──────────────────────────────────────────────── */
.dpp-grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  vertical-align: middle;
  margin-left: 3px;
}
.dpp-grade-a { background: rgba(79,128,105,0.10);  color: var(--sev-good); border: 1px solid rgba(79,128,105,0.22); }
.dpp-grade-b { background: rgba(154,106,56,0.10);  color: var(--sev-warn); border: 1px solid rgba(154,106,56,0.22); }
.dpp-grade-c { background: rgba(156,83,76,0.10);  color: var(--sev-bad); border: 1px solid rgba(156,83,76,0.22); }
.dpp-grade-d { background: rgba(100,100,100,0.10); color: #555;   border: 1px solid rgba(100,100,100,0.20); }

/* ── Mini bar ─────────────────────────────────────────────────── */
.dpp-mini-bar-track {
  height: 3px;
  border-radius: 2px;
  background: rgba(0,0,0,0.07);
  overflow: hidden;
  margin: 2px 0;
}
.dpp-mini-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ── Tables ───────────────────────────────────────────────────── */
.dpp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  table-layout: fixed;
}
/* One consistent label column across ALL dpp tables + gap rows, sharing the
   same --res-split line as the stat rows so every "second column" begins at the
   exact same point across the whole analysis — no more random jumps. */
.dpp-table th:first-child, .dpp-table td:first-child { width: var(--res-split); }
.dpp-table:not(.dpp-matrix-table) .dpp-tbl-val { width: auto; word-break: break-word; }
/* 4-col matrix table (label already 40% via the rule above) */
.dpp-matrix-table .dpp-tbl-weight { width: 10%; }
.dpp-matrix-table .dpp-tbl-score  { width: 22%; }
.dpp-matrix-table .dpp-tbl-desc   { width: 28%; }
.dpp-table th {
  text-align: left;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray, #9ca3af);
  padding: 4px 6px;
  border-bottom: 2px solid #dcdce1;
}
.dpp-tbl-key {
  color: var(--navy, #52575f);
  font-weight: 500;
  padding: 4px 8px 4px 0;
  vertical-align: top;
  border-bottom: 1px solid #ececef;
}
.dpp-tbl-val {
  color: var(--navy, #52575f);
  padding: 4px 0;
  border-bottom: 1px solid #ececef;
}
.dpp-tbl-weight {
  color: var(--gray, #9ca3af);
  font-size: 10.5px;
  padding: 4px 8px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #ececef;
  vertical-align: middle;
}
.dpp-tbl-score {
  padding: 4px 8px;
  width: 110px;
  border-bottom: 1px solid #ececef;
  vertical-align: middle;
}
/* Score-cel: % en mini-bar op één lijn (anders schuiven de getallen
   verticaal mee met variërende description-hoogtes per rij). */
.dpp-score-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dpp-score-row > span {
  flex: 0 0 auto;
  min-width: 36px;
  font-size: 11px;
  white-space: nowrap;
}
.dpp-score-row .dpp-mini-bar-track {
  flex: 1 1 auto;
  margin: 0;
}
.dpp-tbl-desc {
  font-size: 10.5px;
  color: var(--gray, #9ca3af);
  padding: 4px 0 4px 4px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  line-height: 1.4;
}
.dpp-matrix-table tfoot .dpp-tbl-key,
.dpp-matrix-table tfoot .dpp-tbl-score,
.dpp-matrix-table tfoot .dpp-tbl-desc {
  border-top: 1px solid rgba(0,0,0,0.08);
  border-bottom: none;
  padding-top: 6px;
}

/* ── Cross-reference ──────────────────────────────────────────── */
.dpp-crossref-note {
  font-size: 11px;
  color: var(--gray, #9ca3af);
  margin: 0 0 10px;
  line-height: 1.5;
}

/* ── Inline help icon (?) on table keys ───────────────────────── */
.dpp-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin-left: 6px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font);
  vertical-align: 1px;
  cursor: help;
  user-select: none;
  transition: transform 0.1s, opacity 0.15s;
  opacity: 0.55;
}
.dpp-help:hover { opacity: 1; transform: scale(1.15); }
.dpp-help-req  { background: rgba(220, 38, 38, 0.10); color: #b91c1c; border: 1px solid rgba(220, 38, 38, 0.30); }
.dpp-help-opt  { background: rgba(202, 138, 4, 0.10); color: #a16207; border: 1px solid rgba(202, 138, 4, 0.30); }
.dpp-help-info { background: rgba(75, 85, 99, 0.08);  color: #4b5563; border: 1px solid rgba(75, 85, 99, 0.25); }

body.dark .dpp-help-req  { background: rgba(248, 113, 113, 0.15); color: #fca5a5; border-color: rgba(248, 113, 113, 0.30); }
body.dark .dpp-help-opt  { background: rgba(250, 204, 21, 0.12);  color: #fde047; border-color: rgba(250, 204, 21, 0.30); }
body.dark .dpp-help-info { background: rgba(255,255,255,0.06);    color: #cbd5e1; border-color: rgba(255,255,255,0.12); }

.dpp-help-legend {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 14px;
  font-size: 10.5px;
  color: var(--gray, #9ca3af);
  padding: 8px 12px;
  margin-bottom: 10px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  background: rgba(0,0,0,0.02);
}
.dpp-help-leg-item { display: inline-flex; align-items: center; gap: 4px; }
body.dark .dpp-help-legend { border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); color: #cbd5e1; }

/* ── Gaps ─────────────────────────────────────────────────────── */
.dpp-gap-group { margin-bottom: 12px; }
.dpp-gap-group-label {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray, #9ca3af);
  margin-bottom: 5px;
}
.dpp-gap-row {
  display: grid;
  /* First column shares --res-split with every dpp table + stat row, so the
     score lines up with the "second column" everywhere. Bar dropped. */
  grid-template-columns: var(--res-split) 1fr;
  align-items: center;
  gap: 0;
  padding: 4px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.dpp-gap-name { font-size: 11px; color: var(--navy, #52575f); padding-right: 10px; }
.dpp-gap-score { font-size: 11px; font-weight: 600; white-space: nowrap; }
.dpp-no-gaps { font-size: 11.5px; color: #16a34a; }

/* ── Tier badges ──────────────────────────────────────────────── */
.dpp-tier-badge {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
}
.dpp-tier-critical  { background: rgba(156,83,76,0.08); color: var(--sev-bad); }
.dpp-tier-important { background: rgba(154,106,56,0.09); color: var(--sev-warn); }
.dpp-tier-opt       { background: rgba(0,0,0,0.05);      color: #6b7280; }

/* ── Stakeholder views ────────────────────────────────────────── */
.dpp-stk-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  padding-bottom: 0;
  flex-wrap: wrap;
}
.dpp-stk-tab {
  font-size: 10.5px;
  font-weight: 500;
  font-family: var(--font, Inter, sans-serif);
  padding: 5px 10px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  color: var(--gray, #9ca3af);
  transition: color 0.1s, border-color 0.1s;
}
.dpp-stk-tab.active { color: var(--navy, #52575f); border-bottom-color: var(--accent, #e8a020); }
.dpp-stk-tab:hover:not(.active) { color: var(--navy, #52575f); }

.dpp-stk-panel { display: none; }
.dpp-stk-panel.active { display: block; }

.dpp-stk-desc {
  font-size: 11px;
  color: var(--gray, #9ca3af);
  margin: 0 0 8px;
  font-style: italic;
}

/* ── QR / Resolver ────────────────────────────────────────────── */
.dpp-qr-body {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.dpp-qr-placeholder {
  flex-shrink: 0;
  width: 64px; height: 64px;
  color: var(--gray, #9ca3af);
  opacity: 0.4;
}
.dpp-qr-canvas-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.dpp-qr-canvas {
  border: 1px solid #e8e8e8;
  border-radius: 2px;
  display: block;
}
.dpp-qr-download-btn {
  padding: 5px 12px; border-radius: 3px;
  border: 1px solid #d0d0d0; background: #f5f5f5;
  color: #444; font-size: 10px; font-weight: 600; font-family: var(--font);
  cursor: pointer; white-space: nowrap;
  transition: background 0.12s;
}
.dpp-qr-download-btn:hover { background: #e8e8e8; }
.dpp-qr-info { flex: 1; }
.dpp-qr-label {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray, #9ca3af);
  margin-bottom: 2px;
}
.dpp-qr-url {
  font-size: 11px;
  color: var(--navy, #52575f);
}

/* ── Export ───────────────────────────────────────────────────── */
.dpp-export-note {
  font-size: 11px;
  color: var(--gray, #9ca3af);
  margin: 0 0 10px;
  line-height: 1.5;
}
.dpp-export-note code {
  font-size: 10.5px;
  background: rgba(0,0,0,0.06);
  padding: 1px 4px;
  border-radius: 3px;
}
.dpp-export-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.dpp-export-btn {
  font-size: 11px;
  font-family: var(--font, Inter, sans-serif);
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 5px;
  border: 1px solid rgba(107,114,128,0.25);
  background: rgba(255,255,255,0.8);
  color: var(--navy, #52575f);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.1s;
}
.dpp-export-btn:hover { background: #fff; }
.dpp-export-preview {
  font-size: 9.5px;
  font-family: "SFMono-Regular", Consolas, monospace;
  color: var(--navy, #52575f);
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 4px;
  padding: 8px 10px;
  overflow-x: auto;
  white-space: pre;
  line-height: 1.5;
  max-height: 220px;
  overflow-y: auto;
}

/* ── Dark mode ────────────────────────────────────────────────── */
body.dark .dpp-intro,
body.dark .dpp-crossref-note,
body.dark .dpp-export-note { color: #6b7588; }

body.dark .dpp-section-tag { background: rgba(96,165,250,0.12); color: #93c5fd; border-color: rgba(96,165,250,0.22); }

body.dark .dpp-card-main,
body.dark .dpp-gap-name,
body.dark .dpp-qr-url,
body.dark .dpp-tbl-key,
body.dark .dpp-tbl-val { color: #c8cdd8; }

body.dark .dpp-card-sub,
body.dark .dpp-card-unit,
body.dark .dpp-gap-group-label,
body.dark .dpp-tbl-desc,
body.dark .dpp-stk-desc,
body.dark .dpp-qr-label,
body.dark .dpp-tbl-weight { color: #555a6a; }

body.dark .dpp-mini-bar-track { background: rgba(255,255,255,0.06); }

body.dark .dpp-table th { border-bottom-color: rgba(255,255,255,0.14); }
body.dark .dpp-tbl-key,
body.dark .dpp-tbl-val,
body.dark .dpp-tbl-weight,
body.dark .dpp-tbl-score,
body.dark .dpp-tbl-desc { border-bottom-color: rgba(255,255,255,0.07); }
body.dark .dpp-matrix-table tfoot .dpp-tbl-key,
body.dark .dpp-matrix-table tfoot .dpp-tbl-score,
body.dark .dpp-matrix-table tfoot .dpp-tbl-desc { border-top-color: rgba(255,255,255,0.08); }

body.dark .dpp-gap-row { border-bottom-color: rgba(255,255,255,0.05); }

body.dark .dpp-stk-tabs { border-bottom-color: rgba(255,255,255,0.07); }
body.dark .dpp-stk-tab { color: #555a6a; }
body.dark .dpp-stk-tab.active { color: #c8cdd8; }
body.dark .dpp-stk-tab:hover:not(.active) { color: #a0a8b8; }

body.dark .dpp-export-preview {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.07);
  color: #a0a8b8;
}
body.dark .dpp-export-note code { background: rgba(255,255,255,0.06); }
body.dark .dpp-export-btn {
  background: rgba(40,43,54,0.8);
  border-color: rgba(255,255,255,0.10);
  color: #c8cdd8;
}
body.dark .dpp-export-btn:hover { background: rgba(50,54,68,1); }
body.dark .dpp-qr-canvas { border-color: rgba(255,255,255,0.08); }
body.dark .dpp-qr-download-btn {
  background: rgba(40,43,54,0.8); border-color: rgba(255,255,255,0.10); color: #c8cdd8;
}
body.dark .dpp-qr-download-btn:hover { background: rgba(50,54,68,1); }
body.dark .res-export-csv-btn {
  background: rgba(40,43,54,0.8); border-color: rgba(255,255,255,0.10); color: #c8cdd8;
}
body.dark .res-export-csv-btn:hover { background: rgba(50,54,68,1); }

body.dark .dpp-grade-a { background: rgba(22,101,52,0.20); color: #86efac; border-color: rgba(134,239,172,0.25); }
body.dark .dpp-grade-b { background: rgba(133,77,14,0.20); color: #fde047; border-color: rgba(253,224,71,0.25); }
body.dark .dpp-grade-c { background: rgba(192,57,43,0.18); color: #fca5a5; border-color: rgba(252,165,165,0.25); }
body.dark .dpp-grade-d { background: rgba(255,255,255,0.06); color: #9ca3af; border-color: rgba(255,255,255,0.12); }

/* ─────────────────── MOBILE ─ rotate-to-landscape overlay ─────────────────── */
#rotate-overlay { display: none; }

/* Phones (max-width 932px covers most modern phones in landscape) in portrait:
   block the app behind a friendly "draai je telefoon" overlay. */
@media (orientation: portrait) and (max-width: 932px) {
  #rotate-overlay {
    display: flex;
    position: fixed; inset: 0;
    z-index: 100000;
    align-items: center; justify-content: center;
    background: linear-gradient(160deg, #f5f6fa 0%, #e9eaf2 100%);
    color: var(--navy, #2a3242);
    text-align: center;
    padding: 24px;
  }
  body.dark #rotate-overlay {
    background: linear-gradient(160deg, #14161c 0%, #1c1f29 100%);
    color: #d1d5db;
  }
  .rotate-overlay-inner {
    max-width: 320px;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
  }
  .rotate-overlay-inner svg {
    color: var(--navy-deep, #1f2937);
    animation: rotate-hint 2.4s ease-in-out infinite;
  }
  body.dark .rotate-overlay-inner svg { color: #e5e7eb; }
  .rotate-overlay-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
  .rotate-overlay-sub   { font-size: 13.5px; line-height: 1.5; opacity: 0.72; }
  @keyframes rotate-hint {
    0%, 45%   { transform: rotate(0deg); }
    55%, 90%  { transform: rotate(-90deg); }
    100%      { transform: rotate(0deg); }
  }
  /* Hide all other UI while overlay is up so taps don't reach hidden buttons.
     Exclude body.printing — the PDF report window is also 794px wide
     (A4 portrait) and would otherwise trigger this rule and blank the
     entire export. */
  body:not(.printing) > *:not(#rotate-overlay) { visibility: hidden !important; pointer-events: none !important; }
}

/* Mobile-only panel collapse toggle — hidden on desktop. */
#mobile-panel-toggle { display: none; }

/* Phones in LANDSCAPE: keep the desktop layout but shrink the left panel
   so the tree gets room. No transform:scale tricks — those break
   absolute-positioned children that reference the original size. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --panel-w: 260px; }
  #panel { font-size: 12.5px; }
  #panel-header h1 { font-size: 15px; }
  .viewer3d-panel { width: min(560px, 70vw) !important; height: min(420px, 65vh) !important; }

  /* Hide things that don't really help on a phone landscape view */
  #search-wrap   { display: none !important; }
  #btn-save-db   { display: none !important; }
  #download-btn  { display: none !important; }
  #theme-btn     { display: none !important; }
  /* Keep #btn-3d-toggle visible — 3D viewer is the core mobile use case */

  /* RESULTS tab: shrink the chunky desktop titles and metric numbers */
  body.tab-results .tab-view[data-view="results"] { padding-top: 48px; }
  .res-scroll-section { padding: 14px 14px 0 !important; }
  .res-card { padding: 14px 16px 12px !important; }
  .res-card-title { font-size: 12px !important; margin-bottom: 10px !important; padding-bottom: 8px !important; }
  .ri-grade-badge { height: 18px !important; min-width: 20px !important; font-size: 12px !important; }
  .ri-score-big { font-size: 21px !important; }
  .ri-score-denom { font-size: 12px !important; }
  .res-metric-val { font-size: 16px !important; }
  .res-repair-unit { font-size: 16px !important; }
  .opt-score-item .opt-score-value { font-size: 17px !important; }
  .opt-grade-score { font-size: 17px !important; }
  .dpp-card-main { font-size: 17px !important; }
  #step-name h2 { font-size: 14px !important; margin-bottom: 16px !important; }
  .res-nav-btn { padding: 9px 10px !important; font-size: 9px !important; }
  #results-nav { padding: 0 14px !important; }
  /* OPTIMISATION tab: same treatment */
  .opt-section-title { font-size: 13px !important; }

  /* 3D viewer FULLSCREEN on mobile: more aggressive space-saving. The
     top-bar tabs and the left sidebar would otherwise eat ~40% of the
     viewport on a landscape phone. */
  body.viewer3d-fs-active #top-bar { display: none !important; }
  body.viewer3d-fs-active #panel   { visibility: hidden; pointer-events: none; }
  body.viewer3d-fs-active #mobile-panel-toggle { display: none !important; }
  body.viewer3d-fs-active .viewer3d-panel.viewer3d-fullscreen #viewer3d-header {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  body.viewer3d-fs-active .viewer3d-panel.viewer3d-fullscreen #viewer3d-header .viewer3d-drag-handle {
    display: none;  /* "3D View" label — redundant on phone */
  }
  body.viewer3d-fs-active .viewer3d-panel.viewer3d-fullscreen #viewer3d-header .viewer3d-filename {
    font-size: 10.5px;
    max-width: 120px;
  }
  body.viewer3d-fs-active .viewer3d-panel.viewer3d-fullscreen .viewer3d-btn {
    padding: 4px 6px;
  }
  body.viewer3d-fs-active .viewer3d-panel.viewer3d-fullscreen .viewer3d-btn svg {
    width: 13px; height: 13px;
  }

  /* Mobile sidebar collapse: button + slide animation on #panel */
  #mobile-panel-toggle {
    display: flex;
    align-items: center; justify-content: center;
    position: fixed;
    top: 50%;
    left: calc(var(--panel-w) + 14px);
    width: 26px; height: 44px;
    border-radius: 0 8px 8px 0;
    border: 1px solid rgba(180,180,192,0.40);
    border-left: none;
    background: rgba(248,248,250,0.92);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    box-shadow: 2px 2px 8px rgba(0,0,0,0.08);
    color: var(--navy, #4b5563);
    cursor: pointer;
    z-index: 251;  /* above #panel z-index 250 */
    will-change: left, transform;
    /* Match panel slide easing so they move in sync */
    transition: left   0.36s cubic-bezier(0.32, 0.72, 0, 1),
                background 0.22s ease;
    transform: translateY(-50%);
  }
  #mobile-panel-toggle:active {
    background: rgba(238,238,244,0.96);
  }
  #mobile-panel-toggle svg {
    width: 14px; height: 14px;
    transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
  }
  body.dark #mobile-panel-toggle {
    background: rgba(22,24,34,0.92);
    border-color: rgba(255,255,255,0.10);
    color: #d1d5db;
  }
  body.dark #mobile-panel-toggle:active { background: rgba(40,44,58,0.96); }
  /* Collapsed state: panel slides off-screen, toggle moves to left edge,
     chevron flips. Tree-canvas and 3D viewer become fully usable. */
  body.panel-collapsed #panel {
    transform: translateX(calc(-1 * (var(--panel-w) + 28px)));
    opacity: 0.0;
    pointer-events: none;
  }
  body.panel-collapsed #mobile-panel-toggle {
    left: 0;
  }
  body.panel-collapsed #mobile-panel-toggle svg { transform: rotate(180deg); }
}

/* Dyson Sans Modern — used by the PDF cover. Falls back to Inter for
   on-screen UI where the font isn't loaded yet. */
@font-face {
  font-family: 'Dyson Sans';
  src: url('/static/fonts/DysonSansModern.ttf') format('truetype');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ─────────────────── PDF EXPORT: pre-print loading overlay ───────────────────
   Het print-window staat ~400ms zichtbaar voordat w.print() triggert. Tijdens
   dat moment zijn de @media print rules nog niet actief, dus de gebruiker
   ziet kort de unstyled HTML (eyebrow + h1 + ToC + Results) als platte
   blokken. Verberg dat met een gecentreerde 'Preparing report…' melding;
   in @media print toggelen we het terug naar de echte inhoud. */
body.printing > * { visibility: hidden !important; }
body.printing { background: #f4f6fa !important; }
body.printing::before {
  content: "preparing report…";
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 300 24pt/1 'Dyson Sans', 'Inter', system-ui, sans-serif;
  letter-spacing: 0.01em;
  color: rgba(31, 41, 55, 0.55);
  background: #f5f5f7;
  z-index: 2147483647;
}

/* ─────────────────── PDF EXPORT (print) ─────────────────── */
@media print {
  body.printing > * { visibility: visible !important; }
  body.printing::before { display: none !important; content: "" !important; }

  @page {
    size: A4;
    margin: 12mm 14mm 16mm 14mm;
    @bottom-left {
      content: var(--print-product, "SPARCE Analysis");
      font: 400 9px/1 'Inter', system-ui, sans-serif;
      color: #6b7280;
    }
    @bottom-right {
      content: counter(page) " / " counter(pages);
      font: 400 9px/1 'Inter', system-ui, sans-serif;
      color: #6b7280;
    }
  }
  @page :first {
    margin: 0;
    @bottom-left  { content: ""; }
    @bottom-right { content: ""; }
  }

  html, body {
    background: #fff !important;
    color: #1a1a1e !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-family: 'Dyson Sans', 'Inter', system-ui, sans-serif;
  }

  .res-document {
    display: block !important;
    gap: 0 !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body::before, body::after { display: none !important; content: none !important; }

  #tabs-bar, #results-nav, #comp-drawer, .edit-banner,
  .info-wrap, .info-tooltip, .dpp-help, .dpp-help-legend,
  .ri-mode-toggle, .dpp-export-actions, .dpp-qr-download-btn,
  .res-export-csv-btn, #bottom-toolbar, #tree-canvas, #tree-placeholder,
  #panel, .tab-view-inner, #viewer3d-side-panel, #viewer3d-tooltip,
  button:not(.print-keep) {
    display: none !important;
  }

  #results-container,
  #results-content {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    flex: none !important;
  }

  .res-scroll-section {
    background: #fff !important;
    box-shadow: none !important;
    overflow: visible !important;
    page-break-inside: auto;
    break-inside: auto;
    padding: 0 0 6mm 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
  .res-scroll-section + .res-scroll-section {
    page-break-before: auto;
    break-before: auto;
  }

  table, tr, .res-card, .res-hotspot-item,
  .dpp-card, .dpp-summary-card, .res-metric {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* JSON-export preview: geen scrollbar, geen max-height in print */
  .dpp-export-preview {
    max-height: none !important;
    overflow: visible !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
    font-size: 8pt !important;
    line-height: 1.35 !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .dpp-stk-tabs { display: none !important; }
  .dpp-stk-panel {
    display: block !important;
    break-inside: avoid;
    margin-bottom: 6mm;
    border-top: 1px solid #e5e7eb;
    padding-top: 6mm;
  }
  .dpp-stk-panel:first-child { border-top: none; padding-top: 0; }

  /* Cover page — clean light wash, no coloured glow. Lowercase wordmark
     in Dyson Sans. */
  .print-cover {
    height: 297mm;
    width: 210mm;
    position: relative;
    overflow: hidden;
    background: #f4f6fa !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 24mm;
    page-break-after: always;
    break-after: page;
    box-sizing: border-box;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    font-family: 'Dyson Sans', 'Inter', system-ui, sans-serif;
  }
  .print-cover-stage {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6pt;
    text-align: center;
  }
  /* All-lowercase + lighter weights -> Dyson Sans hairline feel,
     niet bold. */
  .print-cover-wordmark {
    font: 200 60pt/1 'Dyson Sans', 'Inter', system-ui, sans-serif;
    letter-spacing: -0.02em;
    color: #1f2937;
    margin: 0;
    text-transform: lowercase;
  }
  .print-cover-tagline {
    font: 300 14pt/1.3 'Dyson Sans', 'Inter', system-ui, sans-serif;
    letter-spacing: 0.02em;
    color: rgba(31, 41, 55, 0.62);
    margin-top: 12pt;
    text-transform: lowercase;
  }
  .print-cover-product {
    font: 400 16pt/1.3 'Dyson Sans', 'Inter', system-ui, sans-serif;
    color: rgba(31, 41, 55, 0.82);
    margin-top: 18pt;
    letter-spacing: 0.01em;
    text-transform: lowercase;
  }
  .print-cover-date {
    font: 300 10pt/1.4 'Dyson Sans', 'Inter', system-ui, sans-serif;
    color: rgba(31, 41, 55, 0.42);
    margin-top: 6pt;
    letter-spacing: 0.02em;
    text-transform: lowercase;
  }

  .print-toc {
    padding: 14mm 18mm;
    page-break-after: always;
    break-after: page;
  }
  .print-toc h2 {
    font: 400 14pt/1.2 'Dyson Sans', 'Inter', system-ui, sans-serif;
    margin: 0 0 16pt;
    color: #1a1a1e;
    letter-spacing: 0.04em;
    text-transform: lowercase;
  }
  .print-toc ol {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc;
  }
  .print-toc li {
    display: flex;
    align-items: baseline;
    padding: 8pt 0;
    border-bottom: 1px dotted #d1d5db;
    font: 300 11pt/1.4 'Dyson Sans', 'Inter', system-ui, sans-serif;
    color: #1a1a1e;
    counter-increment: toc;
  }
  .print-toc li::before {
    content: counter(toc, decimal-leading-zero) ".";
    color: #9ca3af;
    min-width: 28pt;
    font-weight: 500;
  }
}


/* ── CO2 footprint section ──────────────────────────────────────── */
/* CO2 footprint — gestileerd in lijn met de DPP secties A-G:
   compact, .dpp-table look, gap-row layout (38% / auto / 1fr) zoals
   .dpp-gap-row, mini-bar in plaats van dikke gradient. */
.co2-pane { padding-top: 4px; }
.co2-headline {
  padding: 6px 0 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 12px;
}
.co2-headline-total {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy, #52575f);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.co2-headline-context {
  font-size: 11.5px;
  color: var(--gray, #9ca3af);
  margin-bottom: 4px;
  line-height: 1.4;
}
.co2-headline-coverage {
  font-size: 10.5px;
  color: var(--gray, #9ca3af);
  font-style: italic;
}
.co2-block { margin: 10px 0 14px; }
.co2-block-title {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray, #9ca3af);
  font-weight: 600;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.co2-bar-row {
  display: grid;
  /* Match .dpp-gap-row template: 38% label · auto value · 1fr bar */
  grid-template-columns: 38% 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 3px 0;
  font-size: 11px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.co2-bar-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--navy, #52575f);
  font-weight: 500;
}
.co2-bar-track {
  height: 3px;
  background: rgba(0,0,0,0.07);
  border-radius: 2px;
  overflow: hidden;
}
.co2-bar-fill {
  height: 100%;
  /* Neutral tone — length conveys the share, no decorative accent colour. */
  background: #a3a8b2;
  border-radius: 2px;
  transition: width 0.3s ease;
}
body.dark .co2-bar-fill { background: #6b7280; }
.co2-bar-val {
  text-align: right;
  color: var(--navy, #52575f);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  white-space: nowrap;
}
.co2-bar-share { color: var(--gray, #9ca3af); margin-left: 4px; font-size: 10px; }
.co2-bar-conf {
  display: inline-block;
  width: 13px;
  height: 13px;
  text-align: center;
  line-height: 13px;
  border-radius: 3px;
  font-size: 8px;
  font-weight: 700;
  margin-left: 6px;
  background: rgba(0,0,0,0.06);
  color: var(--gray, #9ca3af);
}
/* Data-quality flag — real meaning, so kept coloured but muted to the sev tones. */
.co2-conf-high   { background: rgba(79,128,105,0.13);  color: var(--sev-good); }
.co2-conf-medium { background: rgba(154,106,56,0.14);  color: var(--sev-warn); }
.co2-conf-low,
.co2-conf-unknown { background: rgba(156,83,76,0.13);  color: var(--sev-bad); }

.co2-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  table-layout: fixed;
}
.co2-table th, .co2-table td {
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  color: var(--navy, #52575f);
}
.co2-table th {
  color: var(--gray, #9ca3af);
  font-weight: 600;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(0,0,0,0.10);
}
.co2-table tbody tr:hover { background: rgba(0,0,0,0.02); }

.co2-unknown {
  background: #f6f7f9;
  border: 1px solid #ececf0;
  padding: 8px 12px;
  font-size: 10.5px;
  color: var(--navy, #52575f);
  margin: 10px 0;
  border-radius: 6px;
  line-height: 1.5;
}
.co2-unknown strong { color: var(--navy, #52575f); }
.co2-unknown-list code {
  background: rgba(255,255,255,0.7);
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 3px;
  font-size: 10px;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
}

body.dark .co2-headline { border-bottom-color: rgba(255,255,255,0.07); }
body.dark .co2-headline-total { color: #e2e8f0; }
body.dark .co2-headline-context,
body.dark .co2-headline-coverage,
body.dark .co2-block-title,
body.dark .co2-bar-share { color: #8a8f9c; }
body.dark .co2-block-title { border-bottom-color: rgba(255,255,255,0.07); }
body.dark .co2-bar-row { border-bottom-color: rgba(255,255,255,0.05); }
body.dark .co2-bar-label,
body.dark .co2-bar-val,
body.dark .co2-table td { color: #c8cdd8; }
body.dark .co2-bar-track { background: rgba(255,255,255,0.06); }
body.dark .co2-table tbody tr:hover { background: rgba(255,255,255,0.03); }
body.dark .co2-unknown {
  background: rgba(245,158,11,0.10);
  border-color: rgba(245,158,11,0.30);
  color: #c8cdd8;
}
body.dark .co2-unknown-list code {
  background: rgba(255,255,255,0.06);
}
.co2-footer {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
  font-size: 11px;
  color: #888;
  line-height: 1.5;
}
.co2-footer code {
  background: #f6f6f6; padding: 1px 5px;
  border-radius: 2px; font-size: 10px;
}

/* Strategy-relevance icons attached to suggestion cards (optimisation.js) */
.opt-sug-relevance {
  display: inline-flex; align-items: center;
  width: 10px; height: 10px; border-radius: 50%;
  margin-right: 6px;
}
.opt-sug-rel-strong  { background: #16a34a; }
.opt-sug-rel-neutral { background: #9ca3af; }
.opt-sug-rel-weak    { background: rgba(156,163,175,0.40); }

/* ── Material autocomplete popover (always above #f-mat) ───────────────── */
#mat-suggest {
  position: fixed;
  z-index: 400;        /* above #panel (250) and legend (260) */
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  max-height: 240px;
  overflow-y: auto;
  font-family: var(--font);
  font-size: 12px;
  padding: 4px;
}
#mat-suggest.mat-suggest-hidden { display: none; }
.mat-suggest-item {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 5px;
  cursor: pointer;
  color: #1f2937;
}
.mat-suggest-item:hover, .mat-suggest-on {
  background: rgba(37,99,235,0.10);
}
.mat-suggest-name { font-weight: 500; }
.mat-suggest-meta { font-size: 10.5px; color: #6b7280; flex-shrink: 0; }
.mat-suggest-empty {
  padding: 8px 10px;
  color: #9ca3af;
  font-style: italic;
}
body.dark #mat-suggest {
  background: rgba(28,28,32,0.98);
  border-color: rgba(255,255,255,0.10);
  color: #e5e7eb;
}
body.dark .mat-suggest-item { color: #e5e7eb; }
body.dark .mat-suggest-meta { color: #9ca3af; }
body.dark .mat-suggest-item:hover, body.dark .mat-suggest-on { background: rgba(96,165,250,0.18); }

/* ══════════════════════════════════════════════════════════════════════
   Video annotation editor popup (M1) — .va-*  (theme-aware)
   ══════════════════════════════════════════════════════════════════════ */
.va-modal {
  position: fixed; inset: 0; z-index: 100002;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17, 24, 39, 0.55);
  padding: 24px;
}
.va-card {
  background: #ffffff; color: var(--text, #1f2937);
  border: 1px solid rgba(0,0,0,0.08); border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.30);
  width: min(1080px, 96vw); max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
}
body.dark .va-card { background: #1a2236; color: #e5e7eb; border-color: rgba(255,255,255,0.08); }
.va-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid rgba(0,0,0,0.07);
}
body.dark .va-header { border-bottom-color: rgba(255,255,255,0.08); }
.va-title { font-size: 15px; font-weight: 600; }
.va-close {
  border: none; background: none; cursor: pointer; font-size: 16px;
  color: var(--gray, #6b7280); line-height: 1; padding: 4px 6px; border-radius: 6px;
}
.va-close:hover { background: rgba(0,0,0,0.06); color: inherit; }
body.dark .va-close:hover { background: rgba(255,255,255,0.08); }
.va-body { padding: 16px 18px; overflow: auto; flex: 1; }

.va-explainer { font-size: 13px; color: var(--gray, #6b7280); margin: 0 0 14px; line-height: 1.5; }
.va-dropzone {
  border: 2px dashed var(--gray-l, #d1d5db); border-radius: 12px;
  padding: 28px 18px; text-align: center; background: rgba(0,0,0,0.015);
  transition: border-color 0.15s ease, background 0.15s ease;
}
body.dark .va-dropzone { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.18); }
.va-dropzone.va-dz-over { border-color: #9aa0a6; background: rgba(0,0,0,0.03); }
.va-dz-icon { color: #9aa0a6; margin-bottom: 8px; display: flex; justify-content: center; }
.va-dz-text { font-size: 13px; margin-bottom: 10px; }
.va-dz-hint { font-size: 11px; color: var(--gray, #9ca3af); margin-top: 8px; }
.va-dz-file { font-size: 12px; margin-top: 8px; font-weight: 600; color: var(--navy-deep, #383c42); word-break: break-all; }
body.dark .va-dz-file { color: #e2e6ed; }
.va-status { font-size: 12px; margin: 12px 2px 0; min-height: 16px; }
.va-status--error { color: var(--sev-bad, #9c534c); }
.va-status--loading { color: var(--gray, #6b7280); }
body.dark .va-status--error { color: #d3a19b; }
.va-state1-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* "or paste a URL" alternative to file upload (State 1, Step B). */
.va-or {
  text-align: center; font-size: 10.5px; color: var(--gray, #9ca3af);
  text-transform: uppercase; letter-spacing: 0.09em; margin: 12px 0 10px;
}
.va-url-input {
  width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--gray-l, #d1d5db); font-size: 13px; font-family: var(--font);
  background: #fff; color: var(--text, #1f2937);
}
.va-url-input::placeholder { color: var(--gray, #9ca3af); }
.va-url-input:focus { outline: none; border-color: #9aa0a6; }
body.dark .va-url-input { background: #1a1c22; border-color: rgba(255,255,255,0.14); color: #e2e6ed; }

/* Recording guidance + suggested table-layout mockup (State 1). */
/* Guidance step: a slim tips header above a large table-layout mockup (hero). */
.va-guide {
  border: 1px solid #ececf0; background: #fafbfc; border-radius: 10px;
  padding: 10px 14px; margin: 0 0 12px;
}
body.dark .va-guide { border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); }
.va-guide-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gray, #6b7280); margin-bottom: 4px;
}
.va-guide-list { margin: 0 0 10px; padding-left: 16px; }
.va-guide-list li { font-size: 11.5px; line-height: 1.35; color: var(--text, #1f2937); margin-bottom: 1px; }
body.dark .va-guide-list li { color: #c8cdd8; }
/* Mockup is the hero of the guidance step — full width, no cap. */
.va-mockup { width: 100%; max-width: 440px; margin: 6px auto 0; }
.va-mockup svg { display: block; width: 100%; height: auto; }

.va-btn {
  font-size: 13px; padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--gray-l, #d1d5db); background: none; color: inherit; cursor: pointer;
}
.va-btn:hover:not(:disabled) { background: rgba(0,0,0,0.04); }
body.dark .va-btn:hover:not(:disabled) { background: rgba(255,255,255,0.06); }
.va-btn:disabled { opacity: 0.5; cursor: default; }
.va-btn-primary { background: #2b3038; border-color: #2b3038; color: #fff; font-weight: 600; }
.va-btn-primary:hover:not(:disabled) { background: #1f2329; }
body.dark .va-btn-primary { background: #e8e8ea; border-color: #e8e8ea; color: #1a1a1a; }
body.dark .va-btn-primary:hover:not(:disabled) { background: #d6d6da; }
.va-btn-sm { font-size: 12px; padding: 4px 10px; }
body.dark .va-btn { border-color: rgba(255,255,255,0.18); }

.va-spinner {
  display: inline-block; width: 12px; height: 12px; margin-right: 7px;
  border: 2px solid rgba(120,120,120,0.35); border-top-color: #2b3038;
  border-radius: 50%; vertical-align: -1px; animation: va-spin 0.7s linear infinite;
}
@keyframes va-spin { to { transform: rotate(360deg); } }

/* editor layout */
.va-editor { display: grid; grid-template-columns: minmax(320px, 42%) 1fr; gap: 18px; }
@media (max-width: 900px) { .va-editor { grid-template-columns: 1fr; } }
.va-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.va-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.va-player-wrap { background: #000; border-radius: 10px; overflow: hidden; }
.va-video { width: 100%; max-height: 300px; display: block; background: #000; }
.va-audio { width: 100%; display: block; }

.va-sub-title { font-size: 9.5px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.08em; }
body.dark .va-sub-title { color: #8b93a1; }
.va-timeline-wrap { display: flex; flex-direction: column; gap: 3px; }
.va-timeline {
  position: relative; height: 42px; border-radius: 8px;
  background: linear-gradient(0deg, rgba(0,0,0,0.04), rgba(0,0,0,0.04));
  border: 1px solid var(--gray-l, #e5e7eb);
}
body.dark .va-timeline { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
.va-marker {
  position: absolute; top: 4px; bottom: 4px; transform: translateX(-50%);
  width: auto; max-width: 90px; padding: 0 5px; border: none; cursor: pointer;
  background: #3b82f6; color: #fff; border-radius: 5px; font-size: 10px;
  display: flex; align-items: center; opacity: 0.85; overflow: hidden;
}
.va-marker:hover { opacity: 1; }
.va-marker-active { outline: 2px solid #f59e0b; opacity: 1; z-index: 3; }
.va-marker-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--sev-bad, #9c534c); transform: translateX(-50%); pointer-events: none; z-index: 6; }
.va-timeline-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--gray, #9ca3af); }

.va-summary-block { display: flex; flex-direction: column; gap: 6px; }
.va-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.va-tool-card {
  border: 1px solid var(--gray-l, #e5e7eb); border-radius: 8px; padding: 7px 10px;
  min-width: 96px; background: rgba(0,0,0,0.015);
}
body.dark .va-tool-card { border-color: rgba(255,255,255,0.10); background: rgba(255,255,255,0.03); }
.va-tname { font-size: 12px; font-weight: 600; }
.va-tdef { font-size: 10px; color: var(--gray, #9ca3af); min-height: 12px; }
.va-big { font-size: 16px; font-weight: 700; margin-top: 2px; }
.va-sub { font-size: 10px; color: var(--gray, #9ca3af); }
.va-muted { font-size: 12px; color: var(--gray, #9ca3af); margin: 0; }

.va-table-head { display: flex; align-items: center; justify-content: space-between; }
.va-table-wrap { overflow: auto; border: 1px solid var(--gray-l, #e5e7eb); border-radius: 8px; max-height: 340px; }
body.dark .va-table-wrap { border-color: rgba(255,255,255,0.10); }
.va-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.va-table th {
  position: sticky; top: 0; z-index: 1; background: #f3f4f6; color: var(--gray, #6b7280);
  font-weight: 600; text-align: left; padding: 6px 6px; white-space: nowrap;
  border-bottom: 1px solid var(--gray-l, #e5e7eb);
}
body.dark .va-table th { background: #232c42; border-bottom-color: rgba(255,255,255,0.10); }
.va-table td { padding: 3px 5px; border-bottom: 1px solid rgba(0,0,0,0.05); vertical-align: middle; }
body.dark .va-table td { border-bottom-color: rgba(255,255,255,0.06); }
.va-row { cursor: pointer; }
.va-row:hover { background: rgba(59,130,246,0.05); }
.va-row-active { background: rgba(245,158,11,0.14) !important; }
.va-table input, .va-table select {
  font-size: 11px; padding: 3px 4px; border: 1px solid var(--gray-l, #d1d5db);
  border-radius: 5px; background: #fff; color: inherit; box-sizing: border-box; width: 100%;
}
body.dark .va-table input, body.dark .va-table select { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); }
.va-num { width: 58px; }
.va-idx { color: var(--gray, #9ca3af); text-align: center; width: 22px; }
.va-ro { color: var(--gray, #6b7280); white-space: nowrap; }
.va-dur { background: rgba(0,0,0,0.04) !important; }
.va-tooldef, .va-component { min-width: 90px; }
.va-conf-high { color: #16a34a; font-weight: 600; }
.va-conf-low { color: #d97706; }
.va-src { font-size: 10px; }
.va-row-actions { text-align: center; }
.va-row-del {
  border: none; background: none; cursor: pointer; color: #dc2626;
  font-size: 12px; padding: 2px 5px; border-radius: 5px;
}
.va-row-del:hover { background: rgba(220,38,38,0.12); }

.va-details { font-size: 12px; }
.va-details > summary { cursor: pointer; color: var(--gray, #6b7280); padding: 4px 0; }
.va-transcript { font-size: 12px; white-space: pre-wrap; max-height: 160px; overflow: auto; color: var(--text, #374151); padding: 6px 2px; }
.va-warnings { font-size: 12px; color: #b45309; padding: 4px 2px; }
.va-warnings ul { margin: 0; padding-left: 18px; }

.va-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-top: 1px solid rgba(0,0,0,0.07); gap: 12px;
}
body.dark .va-footer { border-top-color: rgba(255,255,255,0.08); }
.va-foot-note { font-size: 12px; color: var(--gray, #6b7280); }
.va-foot-actions { display: flex; gap: 8px; }

/* ── State 1 two-step nav (guidance → upload) ── */
.va-substep { display: flex; flex-direction: column; gap: 14px; }
.va-substep-actions,
.va-state1-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ── M2 event-level timeline, legend, and events table ── */
.va-tl-lane { display: flex; flex-direction: column; gap: 2px; }
.va-tl-label {
  font-size: 10px; font-weight: 600; color: var(--gray, #9ca3af);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.va-timeline-ev { height: 34px; }

/* event markers — colour set inline per tool-instance (muted palette) */
.va-ev-marker {
  position: absolute; top: 4px; bottom: 4px; transform: translateX(-50%);
  min-width: 16px; max-width: 130px; padding: 0 4px; border: none; cursor: pointer;
  color: #fff; border-radius: 5px; font-size: 9px; line-height: 1;
  display: flex; align-items: center; opacity: 0.9; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}
.va-ev-marker--bar { transform: none; }
.va-ev-marker:hover { opacity: 1; }
.va-ev-marker-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* topology-defining events get a subtle inset edge; pickup/putdown a lighter tint */
.va-ev-type-removal { box-shadow: inset 3px 0 0 rgba(0,0,0,0.28), 0 0 0 1px rgba(0,0,0,0.06); }
.va-ev-type-pickup,
.va-ev-type-putdown { opacity: 0.78; }

/* instance legend chips */
.va-legend-block { display: flex; flex-direction: column; gap: 6px; }
.va-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.va-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
  padding: 3px 9px; border: 1px solid var(--gray-l, #e5e7eb); border-radius: 999px;
  background: rgba(0,0,0,0.015); color: var(--text, #374151);
}
body.dark .va-chip { border-color: rgba(255,255,255,0.10); background: rgba(255,255,255,0.03); color: #e2e6ed; }
.va-chip-sw {
  width: 10px; height: 10px; border-radius: 3px; flex: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10);
}

/* collapsible events section */
.va-ev-section {
  border: 1px solid var(--gray-l, #e5e7eb); border-radius: 8px; padding: 6px 9px;
}
body.dark .va-ev-section { border-color: rgba(255,255,255,0.10); }
.va-ev-toggle { cursor: pointer; list-style: none; }
.va-ev-toggle::-webkit-details-marker { display: none; }
.va-ev-toggle::before {
  content: "▸"; display: inline-block; margin-right: 6px;
  color: var(--gray, #9ca3af); transition: transform 0.15s ease;
}
.va-ev-section[open] > .va-ev-toggle::before { transform: rotate(90deg); }
.va-ev-body { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.va-ev-inst { width: 44px; text-align: center; }

/* ════════════════════════════════════════════════════════════════════
   Redesigned State-2: one zoomable + draggable event timeline + a side
   detail panel. Neutral / light language shared with the analyse view —
   #fafbfc surfaces, #ececf0 borders, muted greys, no bright colour except
   the muted per-instance marker palette (set inline) and severity.
   ════════════════════════════════════════════════════════════════════ */
.va-editor2 { grid-template-columns: 1fr minmax(280px, 320px); }
@media (max-width: 900px) { .va-editor2 { grid-template-columns: 1fr; } }

/* timeline block */
.va-tl-block { display: flex; flex-direction: column; gap: 7px; }
.va-tl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.va-tl-zoom { display: inline-flex; align-items: center; gap: 5px; }
.va-tl-zoom .va-btn-sm { min-width: 26px; text-align: center; }
.va-zoom-label { font-size: 10px; color: var(--gray, #6b7280); min-width: 38px; text-align: center; }

.va-tl-scroll {
  position: relative; overflow-x: auto; overflow-y: hidden;
  border: 1px solid #ececf0; border-radius: 8px; background: #fafbfc;
}
body.dark .va-tl-scroll { border-color: rgba(255,255,255,0.10); background: rgba(255,255,255,0.03); }
.va-tl-track { position: relative; height: 94px; width: 100%; min-width: 100%; }

/* time axis: hairline ticks with second labels */
.va-tl-axis { position: absolute; inset: 0; pointer-events: none; }
.va-tl-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0,0,0,0.06); }
body.dark .va-tl-tick { background: rgba(255,255,255,0.08); }
.va-tl-tick-lbl { position: absolute; top: 3px; left: 3px; font-size: 9px; color: var(--gray, #9ca3af); white-space: nowrap; }

/* marker area sits below the axis labels */
.va-tl-markers { position: absolute; left: 0; right: 0; top: 20px; bottom: 8px; }
.va-ev2-span { position: absolute; height: 3px; bottom: 6px; border-radius: 2px; opacity: 0.35; pointer-events: none; }
.va-ev2-marker {
  position: absolute; bottom: 13px; transform: translateX(-50%);
  height: 28px; min-width: 28px; max-width: 168px; padding: 0 7px; border: none;
  cursor: grab; color: #fff; border-radius: 6px; font-size: 10px; line-height: 1;
  display: flex; align-items: center; opacity: 0.92; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.05);
  touch-action: none; user-select: none; font-family: var(--font);
}
.va-ev2-marker:hover { opacity: 1; }
.va-ev2-marker--drag { cursor: grabbing; opacity: 1; z-index: 5; }
.va-ev2-marker--sel { outline: 2px solid var(--sev-warn, #9a6a38); outline-offset: 1px; opacity: 1; z-index: 4; }
.va-ev2-marker--playing { box-shadow: 0 0 0 2px var(--sev-bad, #9c534c), 0 1px 2px rgba(0,0,0,0.14); opacity: 1; }
.va-ev2-marker-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.va-tl-hint { font-size: 10.5px; }

/* side detail panel */
.va-detail {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid #ececf0; border-radius: 10px; padding: 12px; background: #fafbfc;
}
body.dark .va-detail { border-color: rgba(255,255,255,0.10); background: rgba(255,255,255,0.03); }
.va-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.va-detail-nav { display: inline-flex; align-items: center; gap: 5px; }
.va-detail-nav .va-btn-sm { min-width: 26px; text-align: center; }
.va-detail-count { font-size: 10px; color: var(--gray, #6b7280); min-width: 46px; text-align: center; }
.va-detail-body { display: flex; flex-direction: column; gap: 7px; }
.va-field { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 8px; }
.va-field > label { font-size: 11px; color: var(--gray, #6b7280); }
.va-field input, .va-field select {
  font-size: 11px; padding: 4px 7px; border: 1px solid #dcdde2; border-radius: 6px;
  background: #fff; color: var(--text, #1f2937); box-sizing: border-box; width: 100%;
  font-family: var(--font);
}
.va-field input:focus, .va-field select:focus { outline: none; border-color: #9aa0a6; }
.va-field input[readonly] { background: rgba(0,0,0,0.03); color: var(--gray, #6b7280); }
body.dark .va-field input, body.dark .va-field select { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: #e2e6ed; }
body.dark .va-field input[readonly] { background: rgba(255,255,255,0.03); }
.va-field-ro > span { font-size: 11px; }
.va-detail-actions { display: flex; gap: 8px; justify-content: space-between; margin-top: 2px; }
.va-btn-danger { color: var(--sev-bad, #9c534c); border-color: rgba(156,83,76,0.35); }
.va-btn-danger:hover:not(:disabled) { background: rgba(156,83,76,0.08); }

/* degrade: read-only structured-component list */
.va-fallback { display: flex; flex-direction: column; gap: 8px; }
.va-fallback-list { margin: 0; padding-left: 20px; font-size: 11px; color: var(--text, #374151); }
.va-fallback-list li { margin-bottom: 2px; }
body.dark .va-fallback-list { color: #c8cdd8; }