/* Knowei Problem Solver — design tokens borrowed from knowei_leadBuddy / knowei.nl */
:root {
  color-scheme: light;

  --color-90: #54585f;
  --color-70: #9f9d98;
  --color-50: #d6d2cb;
  --color-30: #f2ede6;
  --color-10: #faf7f3;

  /* Accent palette from the "Zwarte Doos" toolbox cards on knowei.nl */
  --accent-blue: #9b9fba;
  --accent-tan: #d0b189;
  --accent-green: #8fc9aa;
  --accent-coral: #de9889;

  /* Pastel tints of the accents, used for the keyword table columns */
  --accent-blue-tint: #e3e4ec;
  --accent-coral-tint: #f7e3df;
  --accent-tan-tint: #f1e6d8;
  --accent-green-tint: #dcf0e4;

  --page-max-width: 1100px;
  /* The per-section intro column (see `.section-intro`) puts more visual
     weight on the right half of `main`, so the page is centered a bit left
     of true viewport-center to compensate — applied identically to the
     topbar so its content stays aligned with `main` below it. `max()`
     collapses this back to 0 once the viewport is too narrow to spare it,
     leaving the normal edge-to-edge mobile layout untouched. */
  --page-shift: max(0px, calc(50% - var(--page-max-width) / 2 - 4.5rem));
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: var(--color-30);
  color: var(--color-90);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--color-70);
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 2px solid var(--color-70);
  background-color: var(--color-30);
}

.topbar-inner {
  max-width: var(--page-max-width);
  margin-left: var(--page-shift);
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.75rem 1.5rem;
}

.logo-img {
  height: 1.9rem;
  width: auto;
  display: block;
}

/* ---------- Step indicator ---------- */
.steps {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-70);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.step .step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid var(--color-70);
  color: var(--color-70);
  font-size: 0.7rem;
}

.step.is-active {
  color: var(--color-90);
  border-bottom-color: var(--color-90);
}

.step.is-active .step-num {
  background-color: var(--color-90);
  border-color: var(--color-90);
  color: var(--color-10);
}

.step.is-done .step-num {
  background-color: var(--color-70);
  border-color: var(--color-70);
  color: var(--color-10);
}

.step {
  cursor: default;
}

.step:not(.is-locked) {
  cursor: pointer;
}

.step.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Narrow phones: the three step labels + logo don't fit at full size,
   forcing the whole page to overflow horizontally. Shrink just enough to
   fit rather than wrapping or hiding anything. */
@media (max-width: 420px) {
  .topbar-inner {
    gap: 0.5rem;
    padding: 0.75rem 0.6rem;
  }

  .logo-img {
    height: 1.4rem;
  }

  .steps {
    gap: 0.3rem;
  }

  .step {
    gap: 0.25rem;
    font-size: 0.58rem;
    letter-spacing: 0.02em;
  }

  .step .step-num {
    width: 1.15rem;
    height: 1.15rem;
    font-size: 0.6rem;
  }
}

/* ---------- Main layout ---------- */
main {
  max-width: var(--page-max-width);
  margin-left: var(--page-shift);
  margin-right: auto;
  padding: 0 1.5rem 4rem;
}

/* Each section flows horizontally: a fixed-width intro column (eyebrow,
   title, description — always visible, even locked, so the full journey is
   visible up front) beside the section's actual content. */
.onepage-section {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
  padding: 3rem 0;
  scroll-margin-top: 5.5rem;
}

.onepage-section + .onepage-section {
  border-top: 1px solid var(--color-50);
}

.section-intro {
  flex: 0 0 260px;
  max-width: 260px;
  transition: opacity 0.2s ease;
  /* Stays in view for the length of its own section — taller sections
     (Verbanden, Advies) would otherwise scroll the "Stap X" label away
     while their content is still on screen. Bounded by the section's own
     box, so it naturally scrolls away again once that section ends. */
  position: sticky;
  top: 5.5rem;
}

.onepage-section.is-locked .section-intro {
  opacity: 0.55;
}

.section-body {
  flex: 1;
  min-width: 0;
}

.section-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-70);
  margin: 0 0 0.4rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--color-90);
  outline: none;
}

.section-desc {
  font-size: 0.9rem;
  color: var(--color-70);
  margin: 0;
}

@media (max-width: 880px) {
  .onepage-section {
    flex-direction: column;
    gap: 1.25rem;
  }

  .section-intro {
    max-width: none;
    position: static;
  }
}

/* ---------- Locked section state ---------- */
/* `display: flex` must stay scoped to `:not([hidden])` — an unconditional
   `display` here would override the `[hidden]` UA rule (author styles beat
   UA styles regardless of specificity), leaving the lock banner visible even
   once JS sets `hidden` on it after unlocking. */
.section-lock:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border: 2px dashed var(--color-50);
  background-color: var(--color-30);
  padding: 1.25rem 1.5rem;
}

.section-lock-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--color-70);
  color: var(--color-70);
}

.section-lock-text {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-70);
}

/* Plays whenever `.section-content` goes from `[hidden]` (display: none) to
   visible — animations don't run while display:none, so removing `hidden`
   on unlock replays this from the top with no extra JS needed. */
.section-content {
  animation: section-reveal 0.45s ease-out;
}

@keyframes section-reveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--color-50);
  background-color: var(--color-10);
  padding: 1.5rem;
}

.card + .card {
  margin-top: 1.5rem;
}

/* Cards placed side-by-side in a grid use `gap` for spacing instead —
   the sibling rule above is only meant for stacked single-column cards. */
.upload-grid .card + .card {
  margin-top: 0;
}

.card-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-70);
  margin: 0 0 0.75rem;
}

/* ---------- Upload screen ---------- */
.upload-grid {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

.upload-grid .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media (max-width: 720px) {
  .upload-grid {
    grid-template-columns: 1fr;
  }
}

.kaart-select {
  width: 100%;
  border: 1px solid var(--color-50);
  background-color: #fff;
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--color-90);
}

.kaart-select:focus {
  outline: none;
  border-color: var(--color-90);
  box-shadow: 0 0 0 1px var(--color-90);
}

.kaart-preview {
  margin-top: 1rem;
}

.kaart-preview:empty {
  margin-top: 0;
}

.kaart-preview-img {
  display: block;
  width: 100%;
  /* Reference kaart artwork is always exported at 859x633 */
  aspect-ratio: 859 / 633;
  object-fit: cover;
  border: 1px solid var(--color-50);
  background-color: #fff;
}

.kaart-preview-placeholder {
  border: 2px dashed var(--color-50);
  background-color: var(--color-30);
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.75rem;
  font-size: 0.78rem;
  color: var(--color-70);
}

.kaart-photo-label {
  margin-top: 1.25rem;
}

.dropzone {
  border: 2px dashed var(--color-50);
  background-color: var(--color-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.dropzone:hover {
  border-color: var(--color-70);
  background-color: var(--color-30);
}

.dropzone.has-file {
  border-style: solid;
  border-color: var(--color-90);
}

.dropzone-icon {
  width: 2rem;
  height: 2rem;
  /* `.dropzone-content` (its parent) isn't itself a flex container, so
     `.dropzone`'s `align-items: center` doesn't reach this — it only
     centers `.dropzone-content` as a whole, not this fixed-width block
     inside it. Auto margins center it directly instead. */
  margin: 0 auto;
  border: 1px solid var(--color-70);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-70);
}

.dropzone-icon svg {
  display: block;
}

.dropzone-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-90);
}

.dropzone-sub {
  font-size: 0.72rem;
  color: var(--color-70);
}

.dropzone-preview {
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
  border: 1px solid var(--color-50);
}

.dropzone-compact {
  min-height: 110px;
  padding: 0.9rem;
}

textarea,
input[type='text'] {
  width: 100%;
  border: 1px solid var(--color-50);
  background-color: #fff;
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--color-90);
  resize: vertical;
}

textarea:focus,
input[type='text']:focus {
  outline: none;
  border-color: var(--color-90);
  box-shadow: 0 0 0 1px var(--color-90);
}

.field {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.field textarea {
  flex: 1;
  min-height: 220px;
}

.text-set-display {
  flex: 1;
  min-height: 220px;
  border: 1px solid var(--color-50);
  background-color: #fff;
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-90);
  white-space: pre-wrap;
}

.field-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

/* ---------- AI "reading" simulation ---------- */
.ai-reading {
  flex: 1;
  min-height: 220px;
  border: 1px solid var(--color-50);
  background-color: #fff;
  padding: 0.9rem;
}

.ai-reading-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-70);
  margin: 0 0 0.9rem;
}

.ai-reading-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent-green);
  animation: knowei-pulse 1s ease-in-out infinite;
}

.ai-line {
  height: 0.7rem;
  background-color: var(--color-50);
  margin-bottom: 0.6rem;
  animation: knowei-pulse 1.2s ease-in-out infinite;
}

.ai-line.w-full { width: 100%; }
.ai-line.w-5-6 { width: 84%; }
.ai-line.w-4-6 { width: 68%; }

@keyframes knowei-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.hl {
  padding: 0.05em 0.2em;
  font-weight: 600;
}

.hl-feiten {
  background-color: var(--accent-blue-tint);
  box-shadow: inset 0 -2px 0 var(--accent-blue);
}
.hl-ervaren {
  background-color: var(--accent-coral-tint);
  box-shadow: inset 0 -2px 0 var(--accent-coral);
}
.hl-doen {
  background-color: var(--accent-tan-tint);
  box-shadow: inset 0 -2px 0 var(--accent-tan);
}
.hl-effect {
  background-color: var(--accent-green-tint);
  box-shadow: inset 0 -2px 0 var(--accent-green);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1px solid var(--color-70);
  background-color: transparent;
  color: var(--color-90);
  padding: 0.6rem 1.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
}

.btn:hover {
  background-color: var(--color-30);
}

.btn-primary {
  background-color: var(--color-70);
  border-color: var(--color-70);
  color: var(--color-10);
}

.btn-primary:hover {
  background-color: var(--color-90);
  border-color: var(--color-90);
}

.btn-text {
  border: none;
  background: none;
  color: var(--color-70);
  text-decoration: underline;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
  padding: 0.25rem 0;
}

.btn-text:hover {
  color: var(--color-90);
  background: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
}

/* ---------- Devtool: manual keyword table ---------- */
.devtool {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--color-50);
}

.devtool-note {
  font-size: 0.78rem;
  color: var(--color-70);
  max-width: 70ch;
  margin: 0 0 1rem;
}

.keyword-table-wrap {
  display: none;
  overflow-x: auto;
  margin-top: 1rem;
}

.keyword-table-wrap.is-visible {
  display: block;
}

table.keyword-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.keyword-table th {
  text-align: left;
  padding: 0.75rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-90);
  border: 1px solid var(--color-50);
}

.keyword-table th.col-feiten {
  background-color: var(--accent-blue-tint);
  border-top: 3px solid var(--accent-blue);
}
.keyword-table th.col-ervaren {
  background-color: var(--accent-coral-tint);
  border-top: 3px solid var(--accent-coral);
}
.keyword-table th.col-doen {
  background-color: var(--accent-tan-tint);
  border-top: 3px solid var(--accent-tan);
}
.keyword-table th.col-effect {
  background-color: var(--accent-green-tint);
  border-top: 3px solid var(--accent-green);
}

.keyword-table td {
  border: 1px solid var(--color-50);
  padding: 0;
  vertical-align: top;
  background-color: #fff;
}

.keyword-table td input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0.65rem 0.9rem;
  font-size: 0.85rem;
  color: var(--color-90);
  font-family: inherit;
}

.keyword-table td input:focus {
  outline: none;
  background-color: var(--color-10);
}

.keyword-table-footer {
  display: flex;
  justify-content: flex-start;
  margin-top: 0.75rem;
}

/* ---------- Concepts debug table (Stage 2) ---------- */
.concepts-table th {
  background-color: var(--color-30);
}

.concepts-table td {
  padding: 0.6rem 0.9rem;
  font-size: 0.8rem;
  color: var(--color-90);
  max-width: 220px;
  vertical-align: top;
}

.concepts-cell-content {
  max-height: 5.5em;
  overflow-y: auto;
  white-space: pre-wrap;
}

/* ---------- Connections diagram (Stage 3) ---------- */
.connections-canvas-wrap {
  position: relative;
  border: 2px dashed var(--color-50);
  background-color: var(--color-10);
  min-height: 560px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.connections-canvas-wrap.is-ready {
  border-style: solid;
}

/* `display: flex` must stay scoped to `:not([hidden])` — an unconditional
   `display` here would override the `[hidden]` UA rule (author styles beat
   UA styles regardless of specificity), leaving the text visible/behind the
   diagram even while the `hidden` attribute is set. */
.connections-loading {
  position: absolute;
  inset: 0;
  padding: 1.5rem;
  text-align: center;
}

.connections-loading:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.connections-loading .ai-reading-label {
  margin: 0;
  font-size: 0.85rem;
}

.connections-empty {
  position: absolute;
  inset: 0;
  text-align: center;
  padding: 2rem;
  font-size: 0.85rem;
  color: var(--color-70);
  max-width: 42ch;
  margin: 0 auto;
}

.connections-empty:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.connections-canvas {
  position: relative;
  width: 100%;
  height: 560px;
  /* The diagram is scaled to fit this box exactly (see
     .connections-canvas-inner) instead of overflowing it, so bubbles never
     render partially off-screen — no scrollbars needed. */
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* Sized to the diagram's natural (unscaled) layout; renderConnectionsCanvas
   applies a CSS transform (translate + scale) so the whole thing — bubbles,
   labels, lines — shrinks together to fit `.connections-canvas` when the
   natural layout would otherwise be wider than the viewport. */
.connections-canvas-inner {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

.connections-canvas svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.connections-canvas svg line {
  stroke: var(--color-70);
  stroke-width: 1.5;
}

/* ---------- Complexity picker (Stage 3) ---------- */
.complexity-picker {
  margin-top: 2rem;
}

.complexity-picker-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-90);
  margin: 0 0 0.35rem;
}

.complexity-picker-desc {
  font-size: 0.85rem;
  color: var(--color-70);
  max-width: 60ch;
  margin: 0 0 1.25rem;
}

.complexity-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.complexity-option {
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 2px solid var(--color-50);
  background-color: #fff;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.complexity-option img {
  display: block;
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.complexity-option-label {
  display: block;
  padding: 0.4rem 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-70);
  border-top: 1px solid var(--color-50);
}

.complexity-option:hover {
  border-color: var(--color-70);
}

.complexity-option.is-selected {
  border-color: var(--accent-coral);
  box-shadow: 0 0 0 2px var(--accent-coral-tint);
}

.complexity-option.is-selected .complexity-option-label {
  color: var(--accent-coral);
  border-top-color: var(--accent-coral);
}

@media (max-width: 720px) {
  .complexity-options {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Selection requirement hint (stap 2) ---------- */
.selection-requirement {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-coral);
}

.selection-requirement.is-satisfied {
  color: var(--color-70);
  font-weight: 400;
}

.node {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  scale: 1;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.75rem;
  transition: scale 0.15s ease, box-shadow 0.15s ease;
  animation: node-in 0.35s ease-out;
}

.node:hover {
  scale: 1.08;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  z-index: 5;
}

.node-hub {
  background-color: var(--accent-coral-tint);
  color: var(--color-90);
  border: 2px solid var(--accent-coral);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  z-index: 2;
}

.node-leaf {
  background-color: var(--accent-coral);
  color: #fff;
  z-index: 3;
}

/* The central keyword bubble is informational only (hover still works via
   .node:hover above) — no pointer cursor and no "clickable" hover lift, so
   it doesn't visually invite a click that does nothing. */
.node.is-not-clickable {
  cursor: default;
}

.node.is-not-clickable:hover {
  scale: 1;
  box-shadow: none;
}

.node.is-selected {
  box-shadow: 0 0 0 4px var(--color-10), 0 0 0 6px var(--color-90);
}

@keyframes node-in {
  from {
    opacity: 0;
    scale: 0.5;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

/* ---------- Hover tooltip: pinned to the canvas corner, connected to the
   hovered bubble by a thin line + dot (see connections.js buildTooltip) ---------- */
.connections-tooltip {
  display: none;
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 240px;
  z-index: 10;
  border: 1px solid var(--color-50);
  background-color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  padding: 1rem;
  pointer-events: none;
}

.connections-tooltip.is-visible {
  display: block;
}

.connections-tooltip-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-70);
  margin: 0 0 0.3rem;
}

.connections-tooltip-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-90);
  margin: 0 0 0.4rem;
}

.connections-tooltip-body {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--color-90);
  white-space: pre-wrap;
  margin: 0;
}

.connections-tooltip-line {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9;
}

.connections-tooltip-line.is-visible {
  display: block;
}

.connections-tooltip-line line {
  stroke: var(--color-90);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.connections-tooltip-line circle {
  fill: var(--color-90);
}

/* ---------- Advice/toolbox screen ---------- */
.complexity-banner {
  border: 1px solid var(--color-50);
  border-left: 6px solid var(--color-70);
  background-color: var(--color-10);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.complexity-banner.complexity-eenvoudig {
  border-left-color: var(--accent-green);
}
.complexity-banner.complexity-ingewikkeld {
  border-left-color: var(--accent-blue);
}
.complexity-banner.complexity-complex {
  border-left-color: var(--accent-tan);
}
.complexity-banner.complexity-chaotisch {
  border-left-color: var(--accent-coral);
}

.complexity-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-70);
  margin: 0 0 0.3rem;
}

.complexity-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-90);
  margin: 0 0 0.4rem;
}

.complexity-note {
  font-size: 0.85rem;
  color: var(--color-70);
  margin: 0;
}

.advice-loading {
  padding: 3rem 1.5rem;
  text-align: center;
}

.advice-loading .ai-reading-label {
  justify-content: center;
  margin: 0;
}

.advice-empty {
  border: 2px dashed var(--color-50);
  background-color: var(--color-10);
  padding: 3rem 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-70);
}

.advice-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Two distinguishable tag styles inside an expanded oorzaak: keyword tags
   (why this oorzaak was surfaced) vs. bestaande-module tags (what to do
   about it) — same accent colors already used elsewhere in the app. */
.advice-tag-keyword {
  color: var(--color-90);
  background-color: var(--accent-blue-tint);
  border: 1px solid var(--accent-blue);
}

.advice-tag-module {
  color: var(--color-90);
  background-color: var(--accent-green-tint);
  border: 1px solid var(--accent-green);
}

/* ---------- Advice layout: oorzaken accordion (left) + toolbox summary/note (right) ---------- */
.advice-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 880px) {
  .advice-layout {
    grid-template-columns: 1fr;
  }
}

/* Margin (not padding, since there's no visible box around this title)
   mirrors .toolbox-summary's 1.25rem card padding, so this title lines up
   with "Toolboxen" next to it despite the accordion list itself having no
   inset of its own. */
.oorzaken-list-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-90);
  margin: 1.25rem 0 0.75rem 1.25rem;
}

.oorzaken-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-50);
  background-color: var(--color-10);
}

.oorzaak-item {
  border-bottom: 1px solid var(--color-50);
}

.oorzaak-item:last-child {
  border-bottom: none;
}

.oorzaak-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
}

.oorzaak-summary::-webkit-details-marker {
  display: none;
}

.oorzaak-summary:hover {
  background-color: var(--color-30);
}

.oorzaak-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-90);
}

.oorzaak-toggle {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--color-70);
  color: var(--color-70);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.oorzaak-toggle::before {
  content: '+';
  font-size: 0.95rem;
  line-height: 1;
}

.oorzaak-item[open] .oorzaak-toggle::before {
  content: '\2212';
}

.oorzaak-body {
  padding: 0 1.25rem 1.25rem;
}

.oorzaak-uitleg {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-90);
  margin: 0 0 1rem;
}

.oorzaak-tags-group + .oorzaak-tags-group {
  margin-top: 1.5rem;
}

.oorzaak-tags-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-70);
  margin: 0 0 0.4rem;
}

.oorzaak-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.oorzaak-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.1rem;
}

/* Same solid neutral fill as .btn-primary elsewhere in the app, so it reads
   as "an action" rather than another tag (the tags use tinted accent
   backgrounds with a border; this is solid and borderless). */
.advice-row-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.9rem;
  background-color: var(--color-70);
  color: var(--color-10);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.advice-row-cta:hover {
  background-color: var(--color-90);
}

/* ---------- Right column: toolbox summary + advice note ---------- */
.advice-side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.toolbox-summary {
  border: 1px solid var(--color-50);
  border-left: 4px solid var(--accent-coral);
  background-color: var(--color-10);
  padding: 1.25rem;
}

.toolbox-summary-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-90);
  margin: 0 0 0.2rem;
}

.toolbox-summary-sub {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--color-70);
  margin: 0 0 1rem;
}

.toolbox-summary-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.toolbox-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  background-color: var(--color-10);
  border: 1px solid var(--color-50);
  color: var(--color-90);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.toolbox-row:hover {
  border-color: var(--color-90);
  background-color: #fff;
}

.toolbox-row-pct {
  font-size: 0.95rem;
  font-weight: 700;
  min-width: 2.6rem;
}

.toolbox-row-label {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
}

.toolbox-row-arrow {
  color: var(--accent-coral);
  font-weight: 700;
}

.toolbox-summary-empty {
  font-size: 0.78rem;
  color: var(--color-70);
  margin: 0;
}

.advice-note {
  border: 2px dashed var(--color-50);
  padding: 1.25rem;
}

.advice-note-text {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-90);
  margin: 0 0 1rem;
}

.advice-note-question {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-90);
  margin: 0 0 0.75rem;
}

.advice-note-cta {
  text-decoration: none;
  display: inline-flex;
}