/* Command Center — design system (BB7.21). Professioneel, rustig, responsive. Één semantische
   kleurset (ok/warn/bad/muted/unknown) die alle widgets delen. Light + dark via prefers-color-scheme. */

:root {
  --cc-bg: #f6f7f9;
  --cc-surface: #ffffff;
  --cc-border: #e4e7ec;
  --cc-text: #1a1d23;
  --cc-muted: #667085;
  --cc-accent: #2f5bea;
  --cc-ok: #12805c;
  --cc-ok-bg: #e6f4ef;
  --cc-warn: #b25e09;
  --cc-warn-bg: #fbf1e3;
  --cc-bad: #b42318;
  --cc-bad-bg: #fdecea;
  --cc-mut: #667085;
  --cc-mut-bg: #eef0f3;
  --cc-radius: 10px;
  --cc-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --cc-bg: #0e1116;
    --cc-surface: #171b22;
    --cc-border: #262c36;
    --cc-text: #e6e9ef;
    --cc-muted: #98a2b3;
    --cc-accent: #6c8cff;
    --cc-ok-bg: #0f261f;
    --cc-warn-bg: #2a1e0d;
    --cc-bad-bg: #2a1414;
    --cc-mut-bg: #20252e;
  }
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family:
    system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--cc-bg);
  color: var(--cc-text);
  font-size: 14px;
  line-height: 1.5;
}

.cc-shell {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh;
}
.cc-sidebar {
  background: var(--cc-surface);
  border-right: 1px solid var(--cc-border);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
/* BB10.4 — persistente content-kolom met vaste topbar; alleen .cc-main wisselt per route. */
.cc-content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
}
.cc-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: color-mix(in srgb, var(--cc-surface) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--cc-border);
}
.cc-topbar__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.cc-topbar__refresh {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  color: var(--cc-muted, #8a93a6);
  transition: opacity 0.15s ease;
}
.cc-topbar__refresh[hidden] {
  display: none;
}
.cc-topbar__spinner {
  display: inline-block;
  animation: cc-spin 0.9s linear infinite;
}
@keyframes cc-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cc-topbar__spinner {
    animation: none;
  }
}
.cc-main {
  flex: 1;
  padding: 24px;
  overflow-x: hidden;
}

/* BB10.4 — Connect Wizard (modale overlay). */
.cc-wizard__overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, #000 55%, transparent);
}
.cc-wizard {
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.cc-wizard__title {
  margin: 0 0 14px;
  font-size: 1.15rem;
}
.cc-wizard__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  font-size: 0.78rem;
}
.cc-wizard__step {
  color: var(--cc-muted, #8a93a6);
}
.cc-wizard__step--active {
  color: var(--cc-text, #e6e9ef);
  font-weight: 650;
}
.cc-wizard__step--done {
  color: var(--cc-ok, #4ade80);
}
.cc-wizard__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0;
}
.cc-wizard__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cc-wizard__field-label {
  font-size: 0.82rem;
  color: var(--cc-muted, #8a93a6);
}
.cc-input {
  width: 100%;
  padding: 9px 11px;
  background: var(--cc-bg, #0e1116);
  border: 1px solid var(--cc-border);
  border-radius: 8px;
  color: var(--cc-text, #e6e9ef);
  font: inherit;
}
.cc-wizard__body {
  margin: 8px 0 18px;
}
.cc-wizard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* Navigatie */
.cc-nav {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cc-nav__brand {
  font-weight: 700;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--cc-border);
}
.cc-nav__list {
  list-style: none;
  margin: 8px 0;
  padding: 0 8px;
  flex: 1;
}
.cc-nav__link {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--cc-text);
  text-decoration: none;
}
.cc-nav__link:hover {
  background: var(--cc-mut-bg);
}
.cc-nav__link--active {
  background: var(--cc-accent);
  color: #fff;
}
.cc-nav__foot {
  padding: 12px 18px;
  color: var(--cc-muted);
  font-size: 12px;
  border-top: 1px solid var(--cc-border);
}

/* Pagina + layout */
.cc-page {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cc-section-heading h2 {
  margin: 0;
  font-size: 20px;
}
.cc-section-heading p {
  margin: 2px 0 0;
  color: var(--cc-muted);
}
.cc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
.cc-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

/* Kaart */
.cc-card {
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  overflow: hidden;
}
.cc-card--span-2 {
  grid-column: span 2;
}
.cc-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cc-border);
}
.cc-card__title {
  margin: 0;
  font-size: 15px;
}
.cc-card__subtitle {
  margin: 2px 0 0;
  color: var(--cc-muted);
  font-size: 12px;
}
.cc-card__body {
  padding: 14px 16px;
}

/* KPI */
.cc-kpi {
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 14px;
  box-shadow: var(--cc-shadow);
  border-left: 3px solid var(--cc-border);
}
.cc-kpi--ok {
  border-left-color: var(--cc-ok);
}
.cc-kpi--warn {
  border-left-color: var(--cc-warn);
}
.cc-kpi--bad {
  border-left-color: var(--cc-bad);
}
.cc-kpi--muted {
  border-left-color: var(--cc-mut);
}
.cc-kpi__label {
  color: var(--cc-muted);
  font-size: 12px;
}
.cc-kpi__value {
  font-size: 24px;
  font-weight: 700;
  margin-top: 4px;
}
.cc-kpi__unit {
  font-size: 13px;
  color: var(--cc-muted);
  margin-left: 4px;
}
.cc-kpi__delta {
  font-size: 12px;
  margin-top: 2px;
}
.cc-kpi__delta--up {
  color: var(--cc-ok);
}
.cc-kpi__delta--down {
  color: var(--cc-bad);
}
.cc-kpi__hint {
  color: var(--cc-muted);
  font-size: 12px;
  margin-top: 4px;
}

/* Status / health */
.cc-status__label {
  color: var(--cc-muted);
  font-size: 12px;
  margin-bottom: 4px;
}
.cc-health {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.cc-health__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cc-mut);
}
.cc-health--ok .cc-health__dot {
  background: var(--cc-ok);
}
.cc-health--warn .cc-health__dot {
  background: var(--cc-warn);
}
.cc-health--bad .cc-health__dot {
  background: var(--cc-bad);
}
.cc-health--unknown .cc-health__dot {
  background: var(--cc-mut);
}

/* Badge */
.cc-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--cc-mut-bg);
  color: var(--cc-mut);
}
.cc-badge--ok {
  background: var(--cc-ok-bg);
  color: var(--cc-ok);
}
.cc-badge--warn {
  background: var(--cc-warn-bg);
  color: var(--cc-warn);
}
.cc-badge--bad {
  background: var(--cc-bad-bg);
  color: var(--cc-bad);
}

/* Toestandsblokken */
.cc-state {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  color: var(--cc-muted);
  border: 1px dashed var(--cc-border);
  border-radius: 8px;
  justify-content: center;
}
.cc-state__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cc-mut);
}
.cc-state--ok .cc-state__dot {
  background: var(--cc-ok);
}
.cc-state--warn {
  color: var(--cc-warn);
  background: var(--cc-warn-bg);
  border-style: solid;
  border-color: var(--cc-warn-bg);
}
.cc-state--warn .cc-state__dot {
  background: var(--cc-warn);
}
.cc-state--bad {
  color: var(--cc-bad);
  background: var(--cc-bad-bg);
  border-style: solid;
  border-color: var(--cc-bad-bg);
}
.cc-state--bad .cc-state__dot {
  background: var(--cc-bad);
}

/* Tabel */
.cc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cc-th {
  text-align: left;
  color: var(--cc-muted);
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid var(--cc-border);
}
.cc-td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--cc-border);
}
.cc-tr:last-child .cc-td {
  border-bottom: none;
}
.cc-align-right {
  text-align: right;
}
.cc-align-center {
  text-align: center;
}

/* Connector-tegels */
.cc-connector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.cc-connector {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--cc-border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--cc-text);
  background: var(--cc-surface);
}
.cc-connector:hover {
  border-color: var(--cc-accent);
}
.cc-connector--soon {
  opacity: 0.75;
}
.cc-connector__label {
  font-weight: 600;
}

/* Coming soon */
.cc-coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cc-coming-soon__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: var(--cc-mut-bg);
  color: var(--cc-mut);
}

/* Detail / diversen */
.cc-detail__list {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 6px 12px;
  margin: 0;
}
.cc-detail__key {
  color: var(--cc-muted);
}
.cc-detail__val--ok {
  color: var(--cc-ok);
}
.cc-detail__val--warn {
  color: var(--cc-warn);
}
.cc-detail__val--bad {
  color: var(--cc-bad);
}
.cc-reserved__item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--cc-border);
}
.cc-reserved__item:last-child {
  border-bottom: none;
}
.cc-links,
.cc-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cc-navlink,
.cc-filter {
  padding: 6px 12px;
  border: 1px solid var(--cc-border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--cc-text);
  font-size: 13px;
}
.cc-filter--active {
  background: var(--cc-accent);
  color: #fff;
  border-color: var(--cc-accent);
}
.cc-note {
  color: var(--cc-muted);
  font-size: 12px;
}
.cc-code {
  background: var(--cc-mut-bg);
  padding: 12px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 12px;
}

/* Responsive */
@media (max-width: 800px) {
  .cc-shell {
    grid-template-columns: 1fr;
  }
  .cc-sidebar {
    position: static;
    height: auto;
  }
  .cc-card--span-2 {
    grid-column: span 1;
  }
}

/* BB7.35 — Jarvis Chat */
.cc-btn {
  cursor: pointer;
  border: 1px solid var(--cc-border, #2a2f3a);
  background: var(--cc-accent, #3b82f6);
  color: #fff;
  border-radius: 6px;
  padding: 8px 14px;
  font: inherit;
}
.cc-btn:hover { filter: brightness(1.08); }
.cc-chat { display: flex; flex-direction: column; gap: 10px; }
.cc-chat-controls { display: flex; flex-wrap: wrap; gap: 12px; }
.cc-chat-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.cc-chat-field select { padding: 6px 8px; border-radius: 6px; }
.cc-chat-thread {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 220px; max-height: 46vh; overflow-y: auto;
  padding: 10px; border: 1px solid var(--cc-border, #2a2f3a); border-radius: 8px;
}
.cc-chat-msg { max-width: 88%; padding: 8px 12px; border-radius: 10px; }
.cc-chat-msg--user { align-self: flex-end; background: var(--cc-accent, #3b82f6); color: #fff; }
.cc-chat-msg--assistant { align-self: flex-start; background: rgba(148, 163, 184, 0.14); }
.cc-chat-msg__meta { font-size: 11px; opacity: 0.75; margin-bottom: 4px; }
.cc-chat-sources { font-size: 12px; margin-top: 6px; opacity: 0.85; }
.cc-chat-warning { font-size: 12px; color: #f59e0b; margin-top: 4px; }
.cc-chat-next { font-size: 12px; margin-top: 6px; font-weight: 600; }
.cc-chat-card { margin-top: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--cc-border, #2a2f3a); }
.cc-chat-card--approval { border-left: 3px solid #f59e0b; }
.cc-chat-card--exec { border-left: 3px solid #3b82f6; }
.cc-chat-input { display: flex; gap: 8px; }
.cc-chat-input input { flex: 1; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--cc-border, #2a2f3a); font: inherit; }
.cc-chat-voice-note { font-size: 12px; opacity: 0.7; }
.cc-chat-sessions { display: flex; flex-direction: column; gap: 8px; }
.cc-chat-session-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cc-chat-session { padding: 6px 8px; border-radius: 6px; cursor: pointer; background: rgba(148,163,184,0.1); }

/* --- Jarvis Conversation Console (BB8.2A) ------------------------------------------------------- */
.jv-console { display: flex; flex-direction: column; gap: 14px; }
.jv-header { display: flex; flex-direction: column; gap: 4px; }
.jv-header__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.jv-header__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.jv-title { margin: 0; font-size: 22px; }
.jv-sub { margin: 0; color: var(--cc-muted); font-size: 13px; }
/* Verbindingsindicator (req 12) */
.jv-conn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--cc-muted); }
.jv-conn__dot { width: 9px; height: 9px; border-radius: 999px; background: var(--cc-mut); display: inline-block; }
.jv-conn--online .jv-conn__dot { background: var(--cc-ok); }
.jv-conn--online .jv-conn__label { color: var(--cc-ok); }
.jv-conn--offline .jv-conn__dot { background: var(--cc-bad); }
.jv-conn--offline .jv-conn__label { color: var(--cc-bad); }
.jv-conn--checking .jv-conn__dot { background: var(--cc-warn); }
/* Tenant-badge (req 2/4) */
.jv-tenant { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--cc-border); background: var(--cc-mut-bg); }
.jv-tenant__key { color: var(--cc-muted); }
.jv-tenant__val { font-weight: 700; }
/* Nieuw-gesprek-knop (req 11) */
.jv-newconv { font: inherit; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--cc-border); background: var(--cc-surface); color: var(--cc-text); cursor: pointer; }
.jv-newconv:hover { border-color: var(--cc-accent); color: var(--cc-accent); }
.jv-msg__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.jv-layout { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .jv-layout { grid-template-columns: 1fr; } }
.jv-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.jv-thread {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 320px; max-height: 56vh; overflow-y: auto;
  padding: 14px; border: 1px solid var(--cc-border); border-radius: var(--cc-radius);
  background: var(--cc-surface);
}
.jv-msg { max-width: 92%; padding: 10px 12px; border-radius: 12px; }
.jv-msg--user { align-self: flex-end; background: var(--cc-accent); color: #fff; }
.jv-msg--assistant { align-self: flex-start; background: var(--cc-mut-bg); border: 1px solid var(--cc-border); }
.jv-msg__role { font-size: 11px; font-weight: 600; opacity: 0.75; margin-bottom: 3px; }
.jv-msg__text { white-space: pre-wrap; word-break: break-word; line-height: 1.45; }
.jv-msg__status { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.jv-msg__status--ok { background: var(--cc-ok-bg); color: var(--cc-ok); }
.jv-msg__status--warn { background: var(--cc-warn-bg); color: var(--cc-warn); }
.jv-msg__status--bad { background: var(--cc-bad-bg); color: var(--cc-bad); }
.jv-msg__status--busy { background: var(--cc-mut-bg); color: var(--cc-mut); }
.jv-prov { margin-top: 8px; font-size: 12px; border-top: 1px dashed var(--cc-border); padding-top: 6px; }
.jv-prov summary { cursor: pointer; font-weight: 600; color: var(--cc-muted); }
.jv-prov__meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0; color: var(--cc-muted); }
.jv-prov__row { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; border-top: 1px solid var(--cc-border); }
.jv-prov__ec, .jv-prov__fresh, .jv-prov__avail { color: var(--cc-muted); }
/* BB8.2D — datamodus-chips in de provenance */
.jv-prov__ec--live { color: var(--cc-ok); font-weight: 600; }
.jv-prov__ec--snapshot { color: var(--cc-accent); font-weight: 600; }
.jv-prov__ec--inmemory { color: var(--cc-muted); font-weight: 600; }
/* De modifier komt uit de dataMode-enum (live|snapshot|inmemory|unconfigured|unavailable|partial), niet uit het
   Nederlandse label — selectors op de labeltekst zouden nooit matchen. */
.jv-prov__ec--unconfigured { color: var(--cc-warn); font-weight: 600; }
.jv-prov__ec--partial { color: var(--cc-warn); font-weight: 600; }
.jv-prov__ec--unavailable { color: var(--cc-bad); font-weight: 600; }
/* BB8.2D — quick prompts */
.jv-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jv-quick__label { font-size: 12px; color: var(--cc-muted); font-weight: 600; }
.jv-quick__btn { font: inherit; font-size: 12px; cursor: pointer; padding: 6px 11px; border: 1px solid var(--cc-border); border-radius: 999px; background: var(--cc-mut-bg); color: var(--cc-text); }
.jv-quick__btn:hover { border-color: var(--cc-accent); color: var(--cc-accent); }
.jv-prov__snip { flex-basis: 100%; color: var(--cc-muted); font-style: italic; }
.jv-prov__empty { color: var(--cc-muted); }
.jv-starters { display: flex; flex-wrap: wrap; gap: 8px; }
.jv-starter {
  font: inherit; font-size: 13px; cursor: pointer; padding: 6px 12px;
  border: 1px solid var(--cc-border); border-radius: 999px; background: var(--cc-surface); color: var(--cc-text);
}
.jv-starter:hover { border-color: var(--cc-accent); color: var(--cc-accent); }
/* BB8.2B — voice-bar (microfoon, voorlezen, instellingen) */
.jv-voice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--cc-border); border-radius: 10px; background: var(--cc-surface); }
.jv-voice__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.jv-voice__mic { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--cc-border); background: var(--cc-mut-bg); color: var(--cc-text); cursor: pointer; }
.jv-voice__mic:hover { border-color: var(--cc-accent); color: var(--cc-accent); }
.jv-voice__mic--listening { background: var(--cc-bad-bg); color: var(--cc-bad); border-color: var(--cc-bad); animation: jv-pulse 1.2s ease-in-out infinite; }
.jv-voice__mic--disabled { opacity: 0.55; cursor: not-allowed; }
.jv-voice__mic-icon { font-size: 15px; }
@keyframes jv-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(220, 53, 69, 0); } }
.jv-voice__stopspeak { font: inherit; font-size: 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--cc-border); background: var(--cc-surface); color: var(--cc-text); cursor: pointer; }
.jv-voice__stopspeak:hover { border-color: var(--cc-accent); color: var(--cc-accent); }
.jv-voice__status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--cc-muted); }
.jv-voice__dot { width: 9px; height: 9px; border-radius: 999px; background: var(--cc-mut); display: inline-block; }
.jv-voice__status--listening .jv-voice__dot { background: var(--cc-bad); animation: jv-pulse 1.2s ease-in-out infinite; }
.jv-voice__status--listening .jv-voice__statustext { color: var(--cc-bad); }
.jv-voice__status--speaking .jv-voice__dot, .jv-voice__status--thinking .jv-voice__dot, .jv-voice__status--processing .jv-voice__dot { background: var(--cc-accent); }
.jv-voice__status--permission .jv-voice__dot, .jv-voice__status--error .jv-voice__dot { background: var(--cc-warn); }
.jv-voice__status--permission .jv-voice__statustext, .jv-voice__status--error .jv-voice__statustext { color: var(--cc-warn); }
.jv-voice__settings { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.jv-voice__setting { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cc-muted); cursor: pointer; }
.jv-voice__lang { font: inherit; font-size: 12px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--cc-border); background: var(--cc-surface); color: var(--cc-text); }
@media (max-width: 900px) { .jv-voice { justify-content: flex-start; } }
.jv-input { display: flex; gap: 8px; align-items: flex-end; }
.jv-input__text { flex: 1; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--cc-border); font: inherit; background: var(--cc-surface); color: var(--cc-text); resize: vertical; min-height: 44px; max-height: 160px; line-height: 1.4; }
.jv-input__send { font: inherit; font-weight: 600; padding: 0 18px; min-height: 44px; border-radius: 10px; border: none; background: var(--cc-accent); color: #fff; cursor: pointer; }
.jv-msg__badges .jv-msg__status { margin-top: 0; }
.jv-side { display: flex; flex-direction: column; gap: 14px; }
.jv-readiness, .jv-approvals { border: 1px solid var(--cc-border); border-radius: var(--cc-radius); background: var(--cc-surface); padding: 12px; }
.jv-panel__title { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.jv-readiness__row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 13px; }
.jv-readiness__badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.jv-readiness__badge--ok { background: var(--cc-ok-bg); color: var(--cc-ok); }
.jv-readiness__badge--warn { background: var(--cc-warn-bg); color: var(--cc-warn); }
.jv-readiness__badge--bad { background: var(--cc-bad-bg); color: var(--cc-bad); }
.jv-readiness__badge--muted { background: var(--cc-mut-bg); color: var(--cc-mut); }
.jv-approvals__row { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0; border-top: 1px solid var(--cc-border); font-size: 12px; }
.jv-approvals__cap { font-weight: 600; }
.jv-approvals__empty { color: var(--cc-muted); font-size: 13px; }

/* ══ Jarvis Command Core (BB9.2) — control-room surface ══════════════════════════════════════════ */
/* Bewust een eigen donker control-room-palet, los van het licht/donker-thema, zodat de Command Core op een
   groot scherm consistent en professioneel oogt. Status wordt NOOIT alleen met kleur gecommuniceerd: elke
   node toont een tekstlabel naast de gekleurde stip. */
.ccx {
  --ccx-bg: #0a0e17;
  --ccx-panel: #111725;
  --ccx-panel-2: #0e1420;
  --ccx-border: #223049;
  --ccx-text: #dbe4f0;
  --ccx-muted: #8492a8;
  --ccx-accent: #4f7cff;
  --ccx-glow: rgba(79, 124, 255, 0.35);
  --ccx-ok: #38d6a0;
  --ccx-warn: #f2b53d;
  --ccx-bad: #ff6b6b;
  --ccx-mut: #5b6880;
  --ccx-orbit-r: 190px;
  color: var(--ccx-text);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(79, 124, 255, 0.08), transparent 70%),
    var(--ccx-bg);
  border-radius: var(--cc-radius);
  padding: 16px;
}
.ccx .cc-card {
  background: var(--ccx-panel);
  border-color: var(--ccx-border);
  color: var(--ccx-text);
  box-shadow: none;
}
.ccx .cc-card__title { color: var(--ccx-text); }
.ccx .cc-card__subtitle, .ccx .cc-note { color: var(--ccx-muted); }

/* Header */
.ccx-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ccx-header__tenant { font-size: 22px; font-weight: 800; letter-spacing: 0.3px; }
.ccx-header__sub { font-size: 12px; color: var(--ccx-muted); }
.ccx-header__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ccx-btn { background: var(--ccx-panel); color: var(--ccx-text); border: 1px solid var(--ccx-border); border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ccx-btn:hover { border-color: var(--ccx-accent); }
.ccx-banner { border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px; }
.ccx-banner--warn { background: rgba(242, 181, 61, 0.12); border: 1px solid rgba(242, 181, 61, 0.4); color: var(--ccx-warn); }
.ccx-degraded-note { color: var(--ccx-warn) !important; }

/* Layout */
.ccx-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.ccx-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Central stage + core */
.ccx-stage { position: relative; min-height: 440px; display: flex; align-items: center; justify-content: center; }
.ccx-ring-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid var(--ccx-border); border-radius: 50%; opacity: 0.5; pointer-events: none; }
.ccx-ring-bg--1 { width: 180px; height: 180px; }
.ccx-ring-bg--2 { width: 300px; height: 300px; }
.ccx-ring-bg--3 { width: 420px; height: 420px; }
.ccx-core { position: relative; z-index: 2; width: 150px; height: 150px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; color: var(--ccx-text); background: radial-gradient(circle at 50% 35%, #1a2743, #0d1526); border: 2px solid var(--ccx-accent); box-shadow: 0 0 30px var(--ccx-glow); }
.ccx-core__ring { position: absolute; inset: -8px; border-radius: 50%; border: 1px solid var(--ccx-accent); opacity: 0.5; }
.ccx-core__label { font-size: 18px; font-weight: 800; letter-spacing: 2px; }
.ccx-core__status { font-size: 12px; color: var(--ccx-muted); }
.ccx-core__flows { font-size: 11px; color: var(--ccx-accent); }
.ccx-core--ok { border-color: var(--ccx-ok); box-shadow: 0 0 30px rgba(56, 214, 160, 0.3); }
.ccx-core--warn { border-color: var(--ccx-warn); }
.ccx-core--bad { border-color: var(--ccx-bad); }
.ccx-core--pulse { animation: ccx-pulse 2.4s ease-in-out infinite; }
@keyframes ccx-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--ccx-glow); } 50% { box-shadow: 0 0 0 14px rgba(79, 124, 255, 0); } }

/* Director orbit (radiaal via --i/--n) */
.ccx-orbit { position: absolute; inset: 0; pointer-events: none; }
.ccx-orbit-slot { position: absolute; top: 50%; left: 50%; pointer-events: auto; transform: translate(-50%, -50%) rotate(calc(var(--i) / var(--n) * 360deg)) translateY(calc(-1 * var(--ccx-orbit-r))) rotate(calc(var(--i) / var(--n) * -360deg)); }

/* Nodes */
.ccx-node { display: inline-flex; align-items: center; gap: 6px; background: var(--ccx-panel); border: 1px solid var(--ccx-border); border-radius: 999px; padding: 5px 10px; font-size: 12px; color: var(--ccx-text); cursor: pointer; max-width: 100%; }
.ccx-node:hover { border-color: var(--ccx-accent); }
.ccx-node--wide { border-radius: 8px; width: 100%; justify-content: flex-start; }
.ccx-node--orbit { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); white-space: nowrap; }
.ccx-node__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ccx-mut); flex: none; }
.ccx-node__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ccx-node__status { color: var(--ccx-muted); font-size: 11px; margin-left: auto; padding-left: 6px; }
.ccx-node--ok .ccx-node__dot { background: var(--ccx-ok); }
.ccx-node--warn .ccx-node__dot { background: var(--ccx-warn); }
.ccx-node--bad .ccx-node__dot { background: var(--ccx-bad); }
.ccx-node--muted .ccx-node__dot { background: var(--ccx-mut); }

/* Connector layer + agent clusters */
.ccx-connector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.ccx-clusters { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ccx-cluster { border: 1px solid var(--ccx-border); border-radius: 8px; padding: 10px; background: var(--ccx-panel-2); }
.ccx-cluster__title { font-size: 12px; font-weight: 700; color: var(--ccx-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.ccx-cluster__nodes { display: flex; flex-wrap: wrap; gap: 6px; }

/* Live intelligence flow */
.ccx-flow { display: flex; align-items: stretch; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.ccx-flow__step { border: 1px solid var(--ccx-border); border-radius: 8px; padding: 8px 10px; min-width: 96px; background: var(--ccx-panel-2); }
.ccx-flow__step--ok { border-left: 3px solid var(--ccx-ok); }
.ccx-flow__step--bad { border-left: 3px solid var(--ccx-bad); }
.ccx-flow__step--muted { border-left: 3px solid var(--ccx-mut); }
.ccx-flow__label { font-size: 12px; font-weight: 700; }
.ccx-flow__sub { font-size: 11px; color: var(--ccx-muted); }
.ccx-flow__arrow { display: flex; align-items: center; color: var(--ccx-muted); }
.ccx-flow__note { color: var(--ccx-warn) !important; margin-top: 8px; }

/* Side panels */
.ccx-status-list, .ccx-flowlist, .ccx-alertlist { display: flex; flex-direction: column; gap: 6px; }
.ccx-status-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.ccx-flowlist, .ccx-alertlist { list-style: none; margin: 0; padding: 0; }
.ccx-flowlist__item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ccx-flowlist__route { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccx-flowlist__meta { color: var(--ccx-muted); margin-left: auto; }
.ccx-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ccx-dot--ok { background: var(--ccx-ok); } .ccx-dot--bad { background: var(--ccx-bad); } .ccx-dot--muted { background: var(--ccx-mut); }
.ccx-approvals { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.ccx-alertlist__item { display: flex; flex-direction: column; padding: 6px 0; border-top: 1px solid var(--ccx-border); }
.ccx-alertlist__code { font-size: 11px; font-weight: 700; color: var(--ccx-warn); }
.ccx-alertlist__item--critical .ccx-alertlist__code { color: var(--ccx-bad); }
.ccx-alertlist__msg { font-size: 12px; color: var(--ccx-muted); }
.ccx-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ccx-kpi { border: 1px solid var(--ccx-border); border-radius: 8px; padding: 8px; text-align: center; background: var(--ccx-panel-2); }
.ccx-kpi__value { font-size: 22px; font-weight: 800; }
.ccx-kpi__label { font-size: 12px; }
.ccx-kpi__hint { font-size: 10px; color: var(--ccx-muted); }
.ccx-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ccx-detail-slot { margin-top: 14px; }
.ccx-detail-link { color: var(--ccx-accent); font-size: 13px; display: inline-block; margin-top: 8px; }

/* Wallboard-modus: verberg navigatie, vergroot de kern. Blijft read-only; geen fullscreen afdwingen. */
body.ccx-wallboard #cc-nav-slot { display: none; }
body.ccx-wallboard .ccx-header__sub { font-size: 14px; }
body.ccx-wallboard .ccx-core { width: 190px; height: 190px; }
body.ccx-wallboard .ccx { --ccx-orbit-r: 230px; }

/* Responsief: op smalle schermen valt de orbit terug op een leesbare chiprij (geen fragiele cirkel). */
@media (max-width: 1080px) {
  .ccx-grid { grid-template-columns: 1fr; }
  .ccx-orbit { position: static; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
  .ccx-orbit-slot { position: static; transform: none; }
  .ccx-stage { flex-direction: column; min-height: 0; }
  .ccx-ring-bg { display: none; }
}

/* Reduced motion: geen puls/animatie. */
@media (prefers-reduced-motion: reduce) {
  .ccx-core--pulse { animation: none; }
}

/* ══ Executive Visualization Engine (BB9.3) — animaties gated door .ccx-animate (motor-gestuurd) ═══════ */
/* Alle beweging draait UITSLUITEND wanneer de motor .ccx-animate op #ccx-root zet (route actief, bewegings-
   voorkeur aan, tab zichtbaar). Zonder die klasse is alles statisch en leesbaar. */

/* Kernpuls alleen wanneer toegestaan. */
.ccx-core--pulse { animation: none; }
.ccx-animate .ccx-core--pulse { animation: ccx-pulse 2.4s ease-in-out infinite; }

/* Energiestroom over de flow-verbindingen (alleen bij een echte, live flow). */
.ccx-conn { position: relative; width: 30px; min-width: 30px; display: flex; align-items: center; justify-content: center; }
.ccx-conn__line { position: absolute; left: 3px; right: 3px; height: 2px; background: var(--ccx-border); border-radius: 2px; }
.ccx-conn__dot { position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--ccx-accent); opacity: 0; }
.ccx-animate .ccx-flow--live .ccx-conn__line { background: linear-gradient(90deg, var(--ccx-border), var(--ccx-accent), var(--ccx-border)); }
.ccx-animate .ccx-flow--live .ccx-conn__dot { opacity: 0.9; left: calc(3px + var(--ccx-energy, 0) * (100% - 6px)); box-shadow: 0 0 8px var(--ccx-accent); }

/* Actieve node (uit de meest recente echte flow) — statische rand altijd zichtbaar; glow alleen bij animate. */
.ccx-node--active { border-color: var(--ccx-accent); }
.ccx-animate .ccx-node--active { box-shadow: 0 0 0 1px var(--ccx-accent), 0 0 12px var(--ccx-glow); }
.ccx-animate .ccx-node--active .ccx-node__dot { box-shadow: 0 0 6px currentColor; }

/* Flash bij een NIEUWE flow (motor voegt .ccx-flash kort toe). */
.ccx-flash { animation: ccx-flash 1.6s ease-out; }
@keyframes ccx-flash {
  0% { box-shadow: 0 0 0 0 var(--ccx-glow); }
  30% { box-shadow: 0 0 0 4px var(--ccx-glow), 0 0 16px var(--ccx-accent); }
  100% { box-shadow: 0 0 0 0 rgba(79, 124, 255, 0); }
}

/* Executive heatmap */
.ccx-heatmap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ccx-heat { position: relative; overflow: hidden; border: 1px solid var(--ccx-border); border-radius: 8px; padding: 10px; background: var(--ccx-panel-2); }
.ccx-heat__layer { position: absolute; inset: 0; background: var(--ccx-accent); opacity: calc(var(--heat, 0) * 0.28); pointer-events: none; }
.ccx-heat--warn .ccx-heat__layer { background: var(--ccx-warn); opacity: calc(0.14 + var(--heat, 0) * 0.24); }
.ccx-heat__value { position: relative; font-size: 20px; font-weight: 800; display: block; }
.ccx-heat__label { position: relative; font-size: 11px; color: var(--ccx-muted); }

/* Executive timeline */
.ccx-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ccx-timeline__item { display: flex; gap: 10px; padding: 6px 0; border-left: 2px solid var(--ccx-border); padding-left: 10px; }
.ccx-timeline__item--ok { border-left-color: var(--ccx-ok); }
.ccx-timeline__item--bad { border-left-color: var(--ccx-bad); }
.ccx-timeline__time { font-variant-numeric: tabular-nums; color: var(--ccx-muted); font-size: 12px; min-width: 40px; }
.ccx-timeline__body { display: flex; flex-direction: column; min-width: 0; }
.ccx-timeline__action { font-size: 12px; font-weight: 700; }
.ccx-timeline__meta { font-size: 11px; color: var(--ccx-muted); overflow: hidden; text-overflow: ellipsis; }

/* Root cause */
.ccx-rootcause { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ccx-rc__step { border: 1px solid var(--ccx-border); border-radius: 8px; padding: 8px 12px; background: var(--ccx-panel-2); text-align: center; min-width: 60%; }
.ccx-rc__label { font-size: 13px; font-weight: 700; }
.ccx-rc__detail { display: block; font-size: 11px; color: var(--ccx-muted); }
.ccx-rc__arrow { color: var(--ccx-muted); }

/* Reduced motion: alle beweging uit (belt-and-suspenders bovenop de motor-gating). */
@media (prefers-reduced-motion: reduce) {
  .ccx-core--pulse,
  .ccx-animate .ccx-core--pulse,
  .ccx-flash { animation: none !important; }
  .ccx-conn__dot { display: none; }
}

/* ══ Voice Executive Assistant (BB9.4) ══════════════════════════════════════════════════════════ */
.ccx-voice { display: flex; flex-direction: column; gap: 10px; }
.ccx-voice__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ccx-voice__mic { display: inline-flex; align-items: center; gap: 6px; background: var(--ccx-accent); color: #fff; border: none; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.ccx-voice__mic:hover { filter: brightness(1.08); }
.ccx-voice__mic--live { background: var(--ccx-ok); }
.ccx-voice__mic-icon { font-size: 15px; }
.ccx-voice__phase { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ccx-muted); margin-left: auto; }
.ccx-voice__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ccx-mut); }
.ccx-voice__phase--ok .ccx-voice__dot { background: var(--ccx-ok); }
.ccx-voice__phase--warn .ccx-voice__dot { background: var(--ccx-warn); }
.ccx-voice__phase--bad .ccx-voice__dot { background: var(--ccx-bad); }
.ccx-animate .ccx-voice__mic--live .ccx-voice__mic-icon { animation: ccx-voice-pulse 1.2s ease-in-out infinite; }
.ccx-voice__error { font-size: 12px; color: var(--ccx-bad); background: rgba(255, 107, 107, 0.1); border: 1px solid rgba(255, 107, 107, 0.35); border-radius: 8px; padding: 6px 8px; }
.ccx-voice__meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: 12px; }
.ccx-voice__meta dt { color: var(--ccx-muted); }
.ccx-voice__meta dd { margin: 0; overflow: hidden; text-overflow: ellipsis; }

/* Kern-indicator wanneer een voice-opdracht LIVE is (data-gedreven; statisch zichtbaar, puls alleen bij animate). */
.ccx-voice-active .ccx-core { border-color: var(--ccx-ok); box-shadow: 0 0 24px rgba(56, 214, 160, 0.4); }
.ccx-voice-active .ccx-core__flows::before { content: '🎙 '; }
.ccx-animate.ccx-voice-active .ccx-core { animation: ccx-voice-pulse 1.4s ease-in-out infinite; }
@keyframes ccx-voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56, 214, 160, 0.5); }
  50% { box-shadow: 0 0 0 12px rgba(56, 214, 160, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ccx-animate.ccx-voice-active .ccx-core,
  .ccx-animate .ccx-voice__mic--live .ccx-voice__mic-icon { animation: none !important; }
}

/* ══ Business Memory Graph (BB9.5) ══════════════════════════════════════════════════════════════ */
.ccx-memory-slot { margin-top: 14px; }
.ccx-mem { display: flex; flex-direction: column; gap: 12px; }
.ccx-mem__search { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ccx-mem__input { flex: 1; min-width: 200px; background: var(--ccx-panel-2); border: 1px solid var(--ccx-border); border-radius: 8px; color: var(--ccx-text); padding: 8px 10px; font-size: 13px; }
.ccx-mem__input::placeholder { color: var(--ccx-muted); }
.ccx-mem__patterns { display: flex; flex-wrap: wrap; gap: 6px; }
.ccx-mem__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.ccx-mem__item { border: 1px solid var(--ccx-border); border-radius: 8px; padding: 10px; background: var(--ccx-panel-2); }
.ccx-mem__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.ccx-mem__time { font-size: 11px; color: var(--ccx-muted); font-variant-numeric: tabular-nums; }
.ccx-mem__title { font-size: 13px; font-weight: 700; }
.ccx-mem__summary { font-size: 12px; color: var(--ccx-muted); margin-top: 2px; }
.ccx-mem__meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; color: var(--ccx-muted); margin-top: 6px; }
.ccx-mem__source { font-weight: 600; }
.ccx-mem__tags { color: var(--ccx-accent); }
.ccx-mem__recall { border: 1px solid rgba(56, 214, 160, 0.35); border-radius: 8px; padding: 10px; background: rgba(56, 214, 160, 0.06); }

/* BB9.6 — Workflow Queue */
.ccx-workflow-slot { margin-top: 14px; }
.ccx-wf { display: flex; flex-direction: column; gap: 12px; }
.ccx-wf__propose { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ccx-wf__select { flex: 1; min-width: 240px; background: var(--ccx-panel-2); border: 1px solid var(--ccx-border); border-radius: 8px; color: var(--ccx-text); padding: 8px 10px; font-size: 13px; }
.ccx-btn--primary { background: var(--ccx-accent); border-color: var(--ccx-accent); color: #04121b; }
.ccx-btn--ghost { background: transparent; }
.ccx-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.ccx-wf__summary { display: flex; flex-wrap: wrap; gap: 6px; }
.ccx-wf__notice { border-radius: 8px; padding: 8px 10px; font-size: 12px; border: 1px solid var(--ccx-border); }
.ccx-wf__notice--info { border-color: rgba(56, 214, 160, 0.4); background: rgba(56, 214, 160, 0.07); }
.ccx-wf__notice--warn { border-color: rgba(240, 190, 80, 0.45); background: rgba(240, 190, 80, 0.08); }
.ccx-wf__notice--bad { border-color: rgba(232, 96, 96, 0.45); background: rgba(232, 96, 96, 0.08); }
.ccx-wf__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.ccx-wf__card { border: 1px solid var(--ccx-border); border-radius: 10px; padding: 12px; background: var(--ccx-panel-2); display: flex; flex-direction: column; gap: 6px; }
.ccx-wf__card-head { display: flex; align-items: center; gap: 8px; }
.ccx-wf__domain { font-size: 11px; color: var(--ccx-accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.ccx-wf__time { margin-left: auto; font-size: 11px; color: var(--ccx-muted); font-variant-numeric: tabular-nums; }
.ccx-wf__title { font-size: 14px; font-weight: 700; }
.ccx-wf__why { font-size: 12px; color: var(--ccx-muted); }
.ccx-wf__impact { font-size: 12px; }
.ccx-wf__meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--ccx-muted); }
.ccx-wf__steps { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ccx-wf__step { display: flex; align-items: baseline; gap: 6px; font-size: 12px; }
.ccx-wf__step-mark { width: 14px; text-align: center; color: var(--ccx-muted); }
.ccx-wf__step--done .ccx-wf__step-mark { color: var(--ccx-accent); }
.ccx-wf__step--blocked { color: var(--ccx-muted); }
.ccx-wf__step-detail { color: var(--ccx-muted); font-size: 11px; }
.ccx-wf__rollback { font-size: 11px; }
.ccx-wf__rollback--none { color: #f0be50; }
.ccx-wf__rollback--ok { color: var(--ccx-accent); }
.ccx-wf__rollback-detail { color: var(--ccx-muted); }
.ccx-wf__effect { font-size: 11px; }
.ccx-wf__effect--readonly { color: var(--ccx-accent); }
.ccx-wf__effect--mutating { color: #f0be50; }
.ccx-wf__gate { font-size: 12px; border-left: 3px solid rgba(240, 190, 80, 0.6); padding: 4px 8px; background: rgba(240, 190, 80, 0.06); border-radius: 0 6px 6px 0; }
.ccx-wf__gate--ok { border-left-color: rgba(56, 214, 160, 0.6); background: rgba(56, 214, 160, 0.06); }
.ccx-wf__result { font-size: 12px; border-radius: 6px; padding: 6px 8px; background: var(--ccx-panel); }
.ccx-wf__result--failed { color: #e86060; }
.ccx-wf__result-meta { font-size: 11px; color: var(--ccx-muted); margin-top: 2px; }
.ccx-wf__actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.ccx-btn--danger { background: transparent; border-color: rgba(232, 96, 96, 0.6); color: #e86060; }
.ccx-btn--danger:hover { border-color: #e86060; }
.ccx-wf__approval { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; }
.ccx-wf__approval-meta { display: flex; gap: 8px; flex-wrap: wrap; color: var(--ccx-muted); }
.ccx-wf__approval-reason { font-style: italic; }

/* BB9.7 — Jarvis RC1 badge */
.ccx-rc1-slot { margin: 10px 0 4px; }
.ccx-rc1 { border: 1px solid var(--ccx-border); border-radius: 10px; padding: 10px 12px; background: var(--ccx-panel-2); display: flex; flex-direction: column; gap: 6px; }
.ccx-rc1--ok { border-color: rgba(56, 214, 160, 0.4); }
.ccx-rc1--warn { border-color: rgba(240, 190, 80, 0.5); }
.ccx-rc1--bad { border-color: rgba(232, 96, 96, 0.5); }
.ccx-rc1__head { display: flex; align-items: center; gap: 8px; }
.ccx-rc1__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ccx-muted); }
.ccx-rc1__dot--ok { background: #38d6a0; }
.ccx-rc1__dot--warn { background: #f0be50; }
.ccx-rc1__name { font-size: 13px; letter-spacing: 0.02em; }
.ccx-rc1__tenant { font-size: 11px; color: var(--ccx-accent); font-weight: 600; }
.ccx-rc1__health { margin-left: auto; font-size: 11px; color: var(--ccx-muted); }
.ccx-rc1__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ccx-rc1__degraded { font-size: 11px; color: #f0be50; }

/* BB9.8 — Website Intelligence */
.ccx-website-slot { margin-top: 14px; }
.ccx-ws { display: flex; flex-direction: column; gap: 10px; }
.ccx-ws__actions { display: flex; gap: 6px; align-items: center; }
.ccx-ws__notice { border-radius: 8px; padding: 8px 10px; font-size: 12px; border: 1px solid var(--ccx-border); }
.ccx-ws__notice--info { border-color: rgba(56, 214, 160, 0.4); background: rgba(56, 214, 160, 0.07); }
.ccx-ws__notice--warn { border-color: rgba(240, 190, 80, 0.45); background: rgba(240, 190, 80, 0.08); }
.ccx-ws__notice--bad { border-color: rgba(232, 96, 96, 0.45); background: rgba(232, 96, 96, 0.08); }
.ccx-ws__site { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ccx-ws__site-status { font-size: 11px; color: var(--ccx-muted); }
.ccx-ws__time { margin-left: auto; font-size: 11px; color: var(--ccx-muted); font-variant-numeric: tabular-nums; }
.ccx-ws__sources { display: flex; flex-wrap: wrap; gap: 6px; }
.ccx-ws__quality { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ccx-ws__warnings { font-size: 11px; color: #f0be50; }
.ccx-ws__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.ccx-ws__stat { border: 1px solid var(--ccx-border); border-radius: 8px; padding: 8px; background: var(--ccx-panel-2); display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--ccx-muted); }
.ccx-ws__stat strong { font-size: 18px; color: var(--ccx-text); }
.ccx-ws__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ccx-ws__opp { border: 1px solid var(--ccx-border); border-radius: 8px; padding: 10px; background: var(--ccx-panel-2); display: flex; flex-direction: column; gap: 4px; }
.ccx-ws__opp-head { display: flex; align-items: center; gap: 8px; }
.ccx-ws__opp-score { font-size: 11px; color: var(--ccx-accent); font-variant-numeric: tabular-nums; }
.ccx-ws__opp-title { font-size: 13px; font-weight: 700; }
.ccx-ws__opp-why, .ccx-ws__opp-impact { font-size: 12px; color: var(--ccx-muted); }
.ccx-ws__opp-page, .ccx-ws__issue-page { font-size: 11px; color: var(--ccx-accent); }
.ccx-ws__issue { border: 1px solid var(--ccx-border); border-radius: 8px; padding: 8px; background: var(--ccx-panel-2); display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.ccx-ws__issue-title { font-weight: 600; }
.ccx-ws__issue-ev { font-size: 11px; color: var(--ccx-muted); }
.ccx-ws__pages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ccx-ws__page { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--ccx-border); border-radius: 8px; cursor: pointer; font-size: 12px; background: var(--ccx-panel-2); }
.ccx-ws__page:hover { border-color: var(--ccx-accent); }
.ccx-ws__page-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccx-ws__detail { border: 1px solid rgba(56, 214, 160, 0.35); border-radius: 10px; padding: 12px; background: rgba(56, 214, 160, 0.05); display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ccx-ws__detail-head { display: flex; align-items: center; gap: 8px; }
.ccx-ws__detail-type { font-size: 11px; color: var(--ccx-accent); text-transform: uppercase; }
.ccx-ws__detail-head .ccx-btn { margin-left: auto; }
.ccx-ws__detail-url { font-size: 11px; color: var(--ccx-muted); word-break: break-all; }
.ccx-ws__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.ccx-ws__kpi { display: flex; flex-direction: column; font-size: 11px; color: var(--ccx-muted); }
.ccx-ws__kpi strong { font-size: 15px; color: var(--ccx-text); }
.ccx-ws__degraded { font-size: 11px; color: #f0be50; }
/* BB9.9 — pilot board / registration / readiness */
.ccx-ws__brand { font-size: 12px; font-weight: 700; color: var(--ccx-text); }
.ccx-ws__reg { font-size: 11px; color: var(--ccx-muted); }
.ccx-ws__board { border: 1px solid rgba(56, 214, 160, 0.35); border-radius: 10px; padding: 10px 12px; background: rgba(56, 214, 160, 0.05); display: flex; flex-direction: column; gap: 6px; }
.ccx-ws__board-head { font-size: 13px; font-weight: 700; color: var(--ccx-accent); }
.ccx-ws__board-sec { display: flex; flex-direction: column; gap: 4px; }
.ccx-ws__board-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ccx-ws__board-page { font-size: 11px; color: var(--ccx-accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccx-ws__readiness { border: 1px solid var(--ccx-border); border-radius: 8px; padding: 8px 10px; background: var(--ccx-panel-2); }
.ccx-ws__gap { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ccx-ws__gap-unlocks { color: var(--ccx-muted); font-size: 11px; }

/* BB9.10 — Website Optimization Workspace */
.ccx-optimization-slot { margin-top: 14px; }
.ccx-opt { display: flex; flex-direction: column; gap: 10px; }
.ccx-opt__notice { border-radius: 8px; padding: 8px 10px; font-size: 12px; border: 1px solid var(--ccx-border); }
.ccx-opt__notice--info { border-color: rgba(56, 214, 160, 0.4); background: rgba(56, 214, 160, 0.07); }
.ccx-opt__notice--warn { border-color: rgba(240, 190, 80, 0.45); background: rgba(240, 190, 80, 0.08); }
.ccx-opt__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ccx-opt__page { font-size: 11px; color: var(--ccx-accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccx-opt__current, .ccx-opt__intel { border: 1px solid var(--ccx-border); border-radius: 8px; padding: 8px 10px; background: var(--ccx-panel-2); font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
.ccx-opt__conflict { color: #f0be50; font-size: 12px; }
.ccx-opt__review { font-size: 12px; color: var(--ccx-muted); }
.ccx-opt__changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ccx-opt__change { border: 1px solid var(--ccx-border); border-radius: 10px; padding: 10px; background: var(--ccx-panel-2); display: flex; flex-direction: column; gap: 6px; }
.ccx-opt__change--blocked { border-color: rgba(232, 96, 96, 0.5); }
.ccx-opt__change--accepted, .ccx-opt__change--edited { border-color: rgba(56, 214, 160, 0.4); }
.ccx-opt__change-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ccx-opt__change-by { font-size: 11px; color: var(--ccx-muted); margin-left: auto; }
.ccx-opt__change-rationale { font-size: 12px; color: var(--ccx-muted); }
.ccx-opt__diff { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ccx-opt__diff-col { display: flex; flex-direction: column; gap: 2px; }
.ccx-opt__diff-cur, .ccx-opt__diff-new { font-size: 12px; border: 1px solid var(--ccx-border); border-radius: 6px; padding: 6px 8px; background: var(--ccx-panel); white-space: pre-wrap; word-break: break-word; }
.ccx-opt__diff-new { border-color: rgba(56, 214, 160, 0.35); }
.ccx-opt__claims { font-size: 11px; color: #f0be50; }
.ccx-opt__blocked { font-size: 11px; color: #e86060; }
.ccx-opt__note { font-size: 11px; color: var(--ccx-muted); font-style: italic; }
.ccx-opt__change-actions, .ccx-opt__pkg { display: flex; gap: 6px; flex-wrap: wrap; }
/* BB9.11 — generatie-provenance, varianten en generatie-statusregel. */
.ccx-opt__gen { margin: 6px 0; padding: 6px 8px; border: 1px solid rgba(120, 140, 180, 0.18); border-radius: 6px; }
.ccx-opt__gen-badges, .ccx-opt__genstatus { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ccx-opt__genstatus { margin: 6px 0; }
.ccx-opt__variants { margin: 6px 0; display: flex; flex-direction: column; gap: 4px; }
.ccx-opt__variant { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ccx-opt__variant-val { font-size: 12px; color: var(--ccx-muted); }

/* ============================================================================
   BB9.13 — Jarvis RC2: Executive Command Center design layer
   Glass panels, hero, health tiles, directors, timeline, system status.
   Alle kleuren via de bestaande semantische tokens (light + dark).
   ============================================================================ */
:root {
  --cc-glass: rgba(255, 255, 255, 0.72);
  --cc-glass-border: rgba(255, 255, 255, 0.5);
  --cc-elev-1: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px rgba(16, 24, 40, 0.06);
  --cc-elev-2: 0 2px 6px rgba(16, 24, 40, 0.08), 0 12px 28px rgba(16, 24, 40, 0.1);
  --cc-accent-2: #6c8cff;
  --cc-radius-lg: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --cc-glass: rgba(28, 33, 42, 0.62);
    --cc-glass-border: rgba(255, 255, 255, 0.06);
    --cc-elev-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.28);
    --cc-elev-2: 0 4px 10px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.4);
  }
}

@keyframes cc-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.cc-home > * { animation: cc-fade-up 0.32s ease both; }
.cc-home > *:nth-child(2) { animation-delay: 0.04s; }
.cc-home > *:nth-child(3) { animation-delay: 0.07s; }
.cc-home > *:nth-child(4) { animation-delay: 0.1s; }
.cc-home > *:nth-child(5) { animation-delay: 0.13s; }
@media (prefers-reduced-motion: reduce) {
  .cc-home > * { animation: none; }
}

/* Navigatie (gegroepeerd, iconen) */
.cc-nav__brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; text-decoration: none; color: var(--cc-text); }
.cc-nav__logo { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--cc-accent), var(--cc-accent-2)); color: #fff; font-size: 15px; box-shadow: var(--cc-elev-1); }
.cc-nav__logo--image { background: var(--cc-surface); border: 1px solid var(--cc-border); padding: 3px; }
.cc-nav__logo--image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cc-nav__brandtext { font-weight: 700; font-size: 16px; letter-spacing: 0.2px; }
.cc-nav__scroll { overflow-y: auto; flex: 1; padding-bottom: 12px; }
.cc-nav__group { padding: 6px 10px; }
.cc-nav__grouptitle { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--cc-muted); padding: 8px 10px 4px; font-weight: 600; }
.cc-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.cc-nav__link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; text-decoration: none;
  color: var(--cc-text); font-size: 13.5px; transition: background 0.14s ease, color 0.14s ease; }
.cc-nav__link:hover { background: var(--cc-mut-bg); }
.cc-nav__link--active { background: color-mix(in srgb, var(--cc-accent) 14%, transparent); color: var(--cc-accent); font-weight: 600; }
.cc-nav__icon { width: 20px; text-align: center; font-size: 14px; }
.cc-nav__foot { padding: 12px 18px; font-size: 11px; color: var(--cc-muted); border-top: 1px solid var(--cc-border); }

/* Hero */
.cc-hero { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: stretch;
  padding: 26px 28px; border-radius: var(--cc-radius-lg); margin-bottom: 20px;
  background:
    radial-gradient(1200px 320px at -5% -40%, color-mix(in srgb, var(--cc-accent) 22%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--cc-accent) 8%, var(--cc-surface)), var(--cc-surface));
  border: 1px solid var(--cc-border); box-shadow: var(--cc-elev-2); }
.cc-hero__eyebrow { font-size: 12.5px; color: var(--cc-muted); text-transform: capitalize; letter-spacing: 0.2px; }
.cc-hero__greeting { font-size: 30px; line-height: 1.15; margin: 6px 0 4px; font-weight: 750; letter-spacing: -0.5px; }
.cc-hero__sub { color: var(--cc-muted); margin: 0 0 16px; font-size: 14px; max-width: 60ch; }
.cc-hero__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.cc-hbadge { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 11px;
  background: var(--cc-glass); border: 1px solid var(--cc-glass-border); backdrop-filter: blur(8px); box-shadow: var(--cc-elev-1); }
.cc-hbadge__icon { font-size: 15px; }
.cc-hbadge__label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--cc-muted); }
.cc-hbadge__value { display: block; font-size: 13.5px; font-weight: 600; }
.cc-hbadge--ok .cc-hbadge__value { color: var(--cc-ok); }
.cc-hbadge--warn .cc-hbadge__value { color: var(--cc-warn); }
.cc-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.cc-hero__aside { display: flex; }
.cc-syspill { display: flex; flex-direction: column; gap: 8px; justify-content: center; min-width: 210px;
  padding: 18px; border-radius: 14px; background: var(--cc-glass); border: 1px solid var(--cc-glass-border);
  backdrop-filter: blur(8px); box-shadow: var(--cc-elev-1); }
.cc-syspill__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--cc-muted); }
.cc-syspill__meta { font-size: 12px; color: var(--cc-muted); }
.cc-syspill__link { font-size: 12.5px; color: var(--cc-accent); text-decoration: none; margin-top: 2px; }
.cc-syspill__link:hover { text-decoration: underline; }

/* Buttons */
.cc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 10px; font-size: 13.5px;
  font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.14s ease, background 0.14s ease; }
.cc-btn:active { transform: translateY(1px); }
.cc-btn--primary { background: linear-gradient(135deg, var(--cc-accent), var(--cc-accent-2)); color: #fff; box-shadow: var(--cc-elev-1); }
.cc-btn--primary:hover { box-shadow: var(--cc-elev-2); }
.cc-btn--ghost { background: var(--cc-surface); color: var(--cc-text); border-color: var(--cc-border); }
.cc-btn--ghost:hover { background: var(--cc-mut-bg); }

/* Section labels */
.cc-section-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--cc-muted);
  font-weight: 700; margin: 22px 2px 12px; }

/* Health tiles */
.cc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 14px; }
.cc-tile-link { text-decoration: none; color: inherit; }
.cc-tile { padding: 16px; border-radius: 14px; background: var(--cc-surface); border: 1px solid var(--cc-border);
  box-shadow: var(--cc-elev-1); transition: transform 0.14s ease, box-shadow 0.16s ease; position: relative; overflow: hidden; }
.cc-tile-link:hover .cc-tile { transform: translateY(-2px); box-shadow: var(--cc-elev-2); }
.cc-tile::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--cc-mut); opacity: 0.8; }
.cc-tile--ok::before { background: var(--cc-ok); }
.cc-tile--warn::before { background: var(--cc-warn); }
.cc-tile--bad::before { background: var(--cc-bad); }
.cc-tile__top { display: flex; justify-content: space-between; align-items: center; }
.cc-tile__icon { font-size: 20px; }
.cc-tile__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cc-mut); }
.cc-tile--ok .cc-tile__dot { background: var(--cc-ok); box-shadow: 0 0 0 4px var(--cc-ok-bg); }
.cc-tile--warn .cc-tile__dot { background: var(--cc-warn); box-shadow: 0 0 0 4px var(--cc-warn-bg); }
.cc-tile--bad .cc-tile__dot { background: var(--cc-bad); box-shadow: 0 0 0 4px var(--cc-bad-bg); }
.cc-tile__value { font-size: 22px; font-weight: 750; margin-top: 12px; letter-spacing: -0.4px; }
.cc-tile__label { font-size: 13px; color: var(--cc-muted); margin-top: 2px; }
.cc-tile__hint { font-size: 11.5px; color: var(--cc-muted); margin-top: 6px; opacity: 0.85; }

/* Glass cards + home grid */
.cc-home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.cc-gcard { padding: 0; border-radius: var(--cc-radius-lg); background: var(--cc-glass); border: 1px solid var(--cc-glass-border);
  backdrop-filter: blur(10px); box-shadow: var(--cc-elev-1); overflow: hidden; }
.cc-gcard--accent { border-top: 3px solid var(--cc-accent); }
.cc-gcard__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px 8px; }
.cc-gcard__titlewrap { display: flex; gap: 10px; align-items: center; }
.cc-gcard__icon { font-size: 18px; }
.cc-gcard__title { margin: 0; font-size: 15px; font-weight: 700; }
.cc-gcard__subtitle { margin: 2px 0 0; font-size: 12px; color: var(--cc-muted); }
.cc-gcard__body { padding: 6px 18px 18px; }
.cc-inline-link { font-size: 12.5px; color: var(--cc-accent); text-decoration: none; }
.cc-inline-link:hover { text-decoration: underline; }

/* Flow lists */
.cc-flowlist { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cc-flowitem { display: flex; gap: 10px; align-items: center; font-size: 13.5px; }
.cc-flowitem > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.cc-empty-line { font-size: 13px; color: var(--cc-muted); padding: 10px 2px; }

/* Mini stats */
.cc-ministats { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cc-ministat { padding: 10px 14px; border-radius: 11px; background: var(--cc-mut-bg); min-width: 90px; }
.cc-ministat__value { font-size: 18px; font-weight: 700; }
.cc-ministat__label { font-size: 11px; color: var(--cc-muted); }
.cc-ministat--ok { background: var(--cc-ok-bg); }
.cc-ministat--warn { background: var(--cc-warn-bg); }

/* Director cards */
.cc-director-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.cc-dcard { padding: 14px 12px; border-radius: 13px; background: var(--cc-surface); border: 1px solid var(--cc-border);
  text-align: center; box-shadow: var(--cc-elev-1); transition: transform 0.14s ease; }
.cc-dcard:hover { transform: translateY(-2px); }
.cc-dcard__icon { font-size: 22px; }
.cc-dcard__name { font-weight: 700; font-size: 13px; margin-top: 6px; }
.cc-dcard__status { margin-top: 6px; display: flex; justify-content: center; }
.cc-dcard__meta { font-size: 11px; color: var(--cc-muted); margin-top: 6px; }

/* Timeline */
.cc-timeline { list-style: none; margin: 0; padding: 4px 0 0; }
.cc-tl-item { display: grid; grid-template-columns: 52px 16px 1fr; align-items: start; gap: 4px; padding: 6px 0; position: relative; }
.cc-tl-time { font-size: 12px; color: var(--cc-muted); font-variant-numeric: tabular-nums; padding-top: 1px; }
.cc-tl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cc-mut); margin: 4px auto 0; position: relative; z-index: 1; }
.cc-tl-item::after { content: ''; position: absolute; left: 57px; top: 16px; bottom: -6px; width: 2px; background: var(--cc-border); }
.cc-tl-item:last-child::after { display: none; }
.cc-tl-item--ok .cc-tl-dot { background: var(--cc-ok); }
.cc-tl-item--warn .cc-tl-dot { background: var(--cc-warn); }
.cc-tl-item--bad .cc-tl-dot { background: var(--cc-bad); }
.cc-tl-body { display: flex; flex-direction: column; }
.cc-tl-label { font-size: 13.5px; font-weight: 600; }
.cc-tl-detail { font-size: 12px; color: var(--cc-muted); }

/* System status grid */
.cc-status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cc-scard { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 13px; background: var(--cc-surface);
  border: 1px solid var(--cc-border); box-shadow: var(--cc-elev-1); }
.cc-scard__icon { font-size: 20px; width: 26px; text-align: center; }
.cc-scard__main { flex: 1; }
.cc-scard__label { font-weight: 700; font-size: 14px; }
.cc-scard__detail { font-size: 12px; color: var(--cc-muted); }
.cc-scard--ok { border-left: 3px solid var(--cc-ok); }
.cc-scard--warn { border-left: 3px solid var(--cc-warn); }
.cc-scard--bad { border-left: 3px solid var(--cc-bad); }
.cc-status-note { margin-top: 16px; }

/* Website score */
.cc-webscore { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; padding: 22px; border-radius: var(--cc-radius-lg);
  background: var(--cc-surface); border: 1px solid var(--cc-border); box-shadow: var(--cc-elev-1); margin-bottom: 16px; }
.cc-webscore__ring { width: 116px; height: 116px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cc-mut-bg); position: relative; }
.cc-webscore__ring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--cc-surface); }
.cc-webscore__ring--ok { background: conic-gradient(var(--cc-ok) 75%, var(--cc-mut-bg) 0); }
.cc-webscore__ring--warn { background: conic-gradient(var(--cc-warn) 55%, var(--cc-mut-bg) 0); }
.cc-webscore__ring--bad { background: conic-gradient(var(--cc-bad) 35%, var(--cc-mut-bg) 0); }
.cc-webscore__num { position: relative; font-size: 32px; font-weight: 800; letter-spacing: -1px; }
.cc-webscore__max { position: relative; font-size: 11px; color: var(--cc-muted); }
.cc-webscore__dims { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; flex: 1; }
.cc-webdim { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 11px; background: var(--cc-mut-bg); }
.cc-webdim__icon { font-size: 15px; }
.cc-webdim__label { font-size: 12.5px; flex: 1; }
.cc-webdim__val { font-weight: 700; font-size: 15px; }
.cc-webdim__val--ok { color: var(--cc-ok); }
.cc-webdim__val--warn { color: var(--cc-warn); }
.cc-webdim__val--bad { color: var(--cc-bad); }

/* Jarvis welkomstkaart (ChatGPT-achtig) */
.jv-welcome { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; margin-bottom: 12px;
  border-radius: var(--cc-radius-lg); background: var(--cc-glass); border: 1px solid var(--cc-glass-border);
  backdrop-filter: blur(10px); box-shadow: var(--cc-elev-1); animation: cc-fade-up 0.3s ease both; }
.jv-welcome__avatar { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(135deg, var(--cc-accent), var(--cc-accent-2)); color: #fff; font-size: 18px; flex: none; }
.jv-welcome__hi { font-weight: 700; font-size: 15px; }
.jv-welcome__status { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.jv-welcome__line { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--cc-text); }
.jv-welcome__ic { width: 16px; text-align: center; }
.jv-welcome__ask { font-size: 13.5px; color: var(--cc-muted); margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .jv-welcome { animation: none; } }

/* Optimization Workspace — duidelijker 3-koloms gevoel (links pagina · midden voorstel · rechts bewijs) */
.ccx-opt { max-width: 1180px; }
.ccx-opt__change { border: 1px solid var(--cc-border); border-radius: 12px; padding: 14px; margin-bottom: 12px;
  background: var(--cc-surface); box-shadow: var(--cc-elev-1); }
.ccx-opt__diff { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ccx-opt__diff-col { display: flex; flex-direction: column; gap: 4px; }
.ccx-opt__diff-cur, .ccx-opt__diff-new { padding: 10px; border-radius: 9px; background: var(--cc-mut-bg); font-size: 13px; }
.ccx-opt__diff-new { background: var(--cc-ok-bg); }
.ccx-opt__gen { background: var(--cc-mut-bg); border-radius: 9px; }
@media (max-width: 720px) { .ccx-opt__diff { grid-template-columns: 1fr; } }

/* Responsive */
@media (max-width: 900px) {
  .cc-shell { grid-template-columns: 1fr; }
  .cc-sidebar { position: static; height: auto; }
  .cc-hero { grid-template-columns: 1fr; }
  .cc-hero__greeting { font-size: 25px; }
}

/* ============================================================================
   BB9.14 — Jarvis personality & AI experience
   Jarvis-bericht, command bar, dominante actie, assistentpaneel, twee-lagen status.
   ============================================================================ */

/* Toegankelijkheid: zichtbare focus + reduced motion overal. */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--cc-accent); outline-offset: 2px; border-radius: 6px;
}

/* 1 — Jarvis-bericht (het hart van de home) */
.cc-jhero { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; border-radius: var(--cc-radius-lg);
  margin-bottom: 14px; background:
    radial-gradient(900px 260px at -5% -60%, color-mix(in srgb, var(--cc-accent) 20%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--cc-accent) 7%, var(--cc-surface)), var(--cc-surface));
  border: 1px solid var(--cc-border); box-shadow: var(--cc-elev-2); }
.cc-jhero__avatar { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; flex: none;
  background: linear-gradient(135deg, var(--cc-accent), var(--cc-accent-2)); color: #fff; font-size: 20px; box-shadow: var(--cc-elev-1); }
.cc-jhero__body { flex: 1; min-width: 0; }
.cc-jhero__greeting { font-size: 24px; font-weight: 750; margin: 0 0 6px; letter-spacing: -0.4px; text-wrap: balance; }
.cc-jhero__summary { font-size: 15px; line-height: 1.55; margin: 0 0 12px; max-width: 68ch; color: var(--cc-text); }
.cc-jhero__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cc-jfact { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--cc-mut-bg); font-size: 12.5px; color: var(--cc-text); }
.cc-jhero__advice { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 11px;
  background: color-mix(in srgb, var(--cc-accent) 10%, transparent); margin-bottom: 8px; }
.cc-jhero__advice-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--cc-accent); font-weight: 700; }
.cc-jhero__advice-link { font-size: 14px; font-weight: 600; color: var(--cc-accent); text-decoration: none; }
.cc-jhero__advice-link:hover { text-decoration: underline; }
.cc-jhero__missing { font-size: 12.5px; color: var(--cc-warn); margin-bottom: 8px; }
.cc-jhero__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--cc-muted); }
.cc-jhero__sys { color: var(--cc-accent); text-decoration: none; }
.cc-jhero__sys:hover { text-decoration: underline; }

/* 2 — Command bar */
.cc-cmdbar { margin-bottom: 16px; }
.cc-cmdbar__form { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 14px;
  background: var(--cc-surface); border: 1px solid var(--cc-border); box-shadow: var(--cc-elev-1); }
.cc-cmdbar__form:focus-within { border-color: var(--cc-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-accent) 20%, transparent); }
.cc-cmdbar__icon { font-size: 18px; opacity: 0.8; }
.cc-cmdbar__input { flex: 1; border: none; background: transparent; color: var(--cc-text); font-size: 15px; padding: 8px 4px; outline: none; }
.cc-cmdbar__input::placeholder { color: var(--cc-muted); }
.cc-cmdbar__send { flex: none; }
.cc-cmdbar__quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cc-chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; font-size: 12.5px;
  text-decoration: none; color: var(--cc-text); background: var(--cc-surface); border: 1px solid var(--cc-border);
  transition: background 0.14s ease, border-color 0.14s ease; }
.cc-chip:hover { background: var(--cc-mut-bg); border-color: var(--cc-accent); }

/* 3/4/5 — dominante actie + aandachtsbanners */
.cc-attention { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.cc-topaction { padding: 20px 22px; border-radius: var(--cc-radius-lg); background: var(--cc-surface);
  border: 1px solid var(--cc-border); box-shadow: var(--cc-elev-2); border-left: 4px solid var(--cc-accent); }
.cc-topaction--high { border-left-color: var(--cc-warn); }
.cc-topaction__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--cc-muted); font-weight: 700; }
.cc-topaction__title { font-size: 20px; font-weight: 700; margin: 6px 0 12px; text-wrap: balance; }
.cc-topaction__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cc-topaction__chip { font-size: 12px; padding: 4px 10px; border-radius: 8px; background: var(--cc-mut-bg); color: var(--cc-text); }
.cc-topaction__chip--src { background: transparent; color: var(--cc-muted); }
.cc-topaction__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.cc-attn { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 12px; text-decoration: none;
  color: var(--cc-text); border: 1px solid var(--cc-border); background: var(--cc-surface); box-shadow: var(--cc-elev-1); }
.cc-attn__ic { font-size: 16px; }
.cc-attn__go { margin-left: auto; font-size: 12.5px; color: var(--cc-accent); font-weight: 600; white-space: nowrap; }
.cc-attn--warn { border-left: 3px solid var(--cc-warn); }
.cc-attn--muted { border-left: 3px solid var(--cc-mut); }
.cc-attn--ok { border-left: 3px solid var(--cc-ok); }

/* Directors — menselijke rij */
.cc-director-list { display: flex; flex-direction: column; gap: 10px; }
.cc-drow { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--cc-surface);
  border: 1px solid var(--cc-border); border-left: 3px solid var(--cc-mut); }
.cc-drow--ok { border-left-color: var(--cc-ok); }
.cc-drow--warn { border-left-color: var(--cc-warn); }
.cc-drow--bad { border-left-color: var(--cc-bad); }
.cc-drow__icon { font-size: 20px; }
.cc-drow__body { flex: 1; min-width: 0; }
.cc-drow__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cc-drow__name { font-weight: 700; font-size: 14px; }
.cc-drow__obs { font-size: 13px; color: var(--cc-text); margin: 4px 0; font-style: italic; }
.cc-drow__meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--cc-muted); }
.cc-drow__action { color: var(--cc-accent); }

/* 7 — contextueel Jarvis-assistentpaneel */
.cc-jpanel { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--cc-radius-lg);
  background: var(--cc-glass); border: 1px solid var(--cc-glass-border); backdrop-filter: blur(10px); box-shadow: var(--cc-elev-1);
  position: sticky; top: 16px; align-self: start; }
.cc-jpanel__head { display: flex; align-items: center; gap: 10px; }
.cc-jpanel__avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--cc-accent), var(--cc-accent-2)); color: #fff; font-size: 15px; }
.cc-jpanel__title { font-weight: 700; }
.cc-jpanel__body { display: flex; flex-direction: column; gap: 10px; }
.cc-jpanel__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--cc-muted); font-weight: 700; }
.cc-jpanel__val { font-size: 13px; line-height: 1.5; }
.cc-jpanel__ask { justify-content: center; }

/* 8 — Website Intelligence (actiegericht) */
.cc-web__layout { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
.cc-web__main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cc-webscore { align-items: stretch; }
.cc-webscore__side { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.cc-webscore__explain { margin: 0; font-size: 14.5px; line-height: 1.5; max-width: 64ch; }
.cc-webscore__facts { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-webscore__src { font-size: 12px; color: var(--cc-muted); }
.cc-webscore__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.cc-webdims { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.cc-webdcard { padding: 14px; border-radius: 12px; background: var(--cc-surface); border: 1px solid var(--cc-border);
  box-shadow: var(--cc-elev-1); border-top: 3px solid var(--cc-mut); }
.cc-webdcard--ok { border-top-color: var(--cc-ok); }
.cc-webdcard--warn { border-top-color: var(--cc-warn); }
.cc-webdcard--bad { border-top-color: var(--cc-bad); }
.cc-webdcard__head { display: flex; align-items: center; gap: 8px; }
.cc-webdcard__icon { font-size: 16px; }
.cc-webdcard__label { font-weight: 700; font-size: 14px; flex: 1; }
.cc-webdcard__val { font-size: 20px; font-weight: 800; }
.cc-webdcard__val--ok { color: var(--cc-ok); }
.cc-webdcard__val--warn { color: var(--cc-warn); }
.cc-webdcard__val--bad { color: var(--cc-bad); }
.cc-webdcard__meaning { font-size: 12.5px; color: var(--cc-muted); margin: 6px 0 4px; }
.cc-webdcard__action { font-size: 12.5px; color: var(--cc-accent); }
.cc-webdcard__missing { font-size: 12px; color: var(--cc-muted); font-style: italic; }

/* 13 — System status twee lagen */
.cc-sys-summary { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 13px; margin-bottom: 14px;
  background: var(--cc-surface); border: 1px solid var(--cc-border); box-shadow: var(--cc-elev-1); }
.cc-sys-summary--connected { border-left: 4px solid var(--cc-ok); }
.cc-sys-summary--warning { border-left: 4px solid var(--cc-warn); }
.cc-sys-summary--muted { border-left: 4px solid var(--cc-mut); }
.cc-sys-summary__text { font-size: 16px; font-weight: 600; }
.cc-sys-simple { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 8px; }
.cc-sys-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 11px;
  background: var(--cc-surface); border: 1px solid var(--cc-border); }
.cc-sys-item__label { font-size: 13.5px; font-weight: 600; }

/* Responsive */
@media (max-width: 1000px) {
  .cc-web__layout { grid-template-columns: 1fr; }
  .cc-jpanel { position: static; }
}
@media (max-width: 700px) {
  .cc-jhero { flex-direction: column; }
  .cc-cmdbar__form { flex-wrap: wrap; }
  .cc-cmdbar__send { width: 100%; justify-content: center; }
}

/* Jarvis-chat: voorgestelde vervolgvragen + iets prominentere invoer/voice */
.jv-welcome__suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.jv-suggest { padding: 6px 12px; border-radius: 999px; font-size: 12.5px; cursor: pointer; color: var(--cc-text);
  background: var(--cc-surface); border: 1px solid var(--cc-border); transition: background 0.14s ease, border-color 0.14s ease; }
.jv-suggest:hover { background: var(--cc-mut-bg); border-color: var(--cc-accent); }
.jv-input { position: sticky; bottom: 0; }

/* BB9.17 — productie-login + sessie-footer */
/* ── BB14.3 — niet-ingelogde toestand ────────────────────────────────────────────────────
   Eén klasse op <body> bepaalt de hele presentatie. De shell (zijbalk + topbar) verdwijnt
   volledig: geen half geladen applicatie achter een inlogkaartje, en geen systeemstructuur
   die zichtbaar is voor wie nog niets mag zien. De navigatie wordt daarnaast door main.js
   ook echt leeggemaakt — verbergen alleen laat hem in de voorleesvolgorde staan. */
.cc-unauth .cc-sidebar,
.cc-unauth .cc-topbar {
  display: none;
}
.cc-unauth .cc-shell {
  display: block;
}
.cc-unauth .cc-content {
  min-height: 100vh;
}
.cc-unauth .cc-main {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background: var(--cc-bg);
}

/* Merkkop op de inlogkaart. Het logo staat op een lichte ondergrond: het aangeleverde
   bestand is bijna zwart en zou op een gekleurd vlak verdwijnen. */
.cc-login__brand {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 26px 24px 8px;
}
.cc-login__logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.cc-login__title {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--cc-text);
}
.cc-login__subtitle {
  margin: 0;
  font-size: 12px;
  color: var(--cc-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.cc-unauth .cc-login__card {
  box-shadow: var(--cc-elev-2);
}

.cc-login { display: grid; place-items: center; min-height: 70vh; }
.cc-login__card { width: min(420px, 92vw); }
.cc-login .cc-chat-field { margin-bottom: 12px; }
.cc-login input { padding: 8px 10px; border-radius: 6px; border: 1px solid var(--cc-border); background: var(--cc-surface); color: var(--cc-text); font-size: 14px; }
.cc-login .cc-btn { width: 100%; margin-top: 6px; }
.cc-login select { width: 100%; padding: 8px 10px; border-radius: 6px; margin-bottom: 12px; }
.cc-nav__session { display: flex; flex-direction: column; gap: 6px; }
.cc-nav__user { font-weight: 600; color: var(--cc-text); overflow: hidden; text-overflow: ellipsis; }
.cc-nav__tenant { color: var(--cc-muted); }
.cc-nav__session .cc-btn { font-size: 11px; padding: 4px 10px; align-self: flex-start; }

/* BB10.1 — Connector Center 2.0 */
.cc-ccenter { display: grid; gap: 14px; }
.cc-ccenter__item { border: 1px solid var(--cc-border); border-radius: 8px; padding: 12px 14px; background: var(--cc-surface); }
.cc-ccenter__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.cc-ccenter__rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; margin: 8px 0; }
.cc-ccenter__row { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; border-bottom: 1px dotted var(--cc-border); padding: 2px 0; }
.cc-ccenter__k { color: var(--cc-muted); }
.cc-ccenter__v { color: var(--cc-text); text-align: right; overflow-wrap: anywhere; }
.cc-ccenter__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cc-ccenter__result:not(:empty) { margin-top: 8px; }

/* BB10.1A — stale-while-revalidate: freshness-banner + transparante frame-wrapper */
.cc-swr-frame { display: contents; }
.cc-swr {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 12px; padding: 6px 12px; border-radius: 6px;
  font-size: 12.5px; border: 1px solid var(--cc-border);
}
.cc-swr--fresh { color: var(--cc-muted); background: transparent; border-color: transparent; padding-left: 0; }
.cc-swr--refreshing { color: var(--cc-muted); background: var(--cc-mut-bg); }
.cc-swr--stale { color: var(--cc-text); background: var(--cc-mut-bg); border-color: var(--cc-accent); justify-content: space-between; }
.cc-swr--stale .cc-btn { flex-shrink: 0; }

/* BB11.3C — Enterprise Connector Onboarding Framework: generieke, descriptor-gedreven wizard. */
.oc-overlay { position: fixed; inset: 0; background: rgba(8, 12, 20, 0.62); display: grid; place-items: center; z-index: 1000; }
.oc-panel { width: min(560px, 94vw); max-height: 88vh; overflow: auto; background: #121722; color: #e6e9ef; border: 1px solid #2a3446; border-radius: 12px; padding: 20px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.oc-head { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid #2a3446; padding-bottom: 10px; margin-bottom: 12px; }
.oc-head h3 { margin: 0; font-size: 18px; }
.oc-sub { color: #93a1b5; font-size: 12px; }
.oc-close { margin-left: auto; background: none; border: none; color: #93a1b5; font-size: 16px; cursor: pointer; }
.oc-steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 14px; }
.oc-step { font-size: 11px; color: #aeb9c9; background: #1a2130; border: 1px solid #2a3446; border-radius: 999px; padding: 3px 10px; }
.oc-form { display: grid; gap: 12px; }
.oc-section { margin: 8px 0 2px; font-size: 13px; color: #cdd6e4; }
.oc-field { display: grid; gap: 4px; }
/* Veld dat niet bij de gekozen auth-modus hoort (descriptor: onlyInAuthMode). */
.oc-field--verborgen { display: none; }
.oc-label { font-size: 12px; color: #cdd6e4; }
.oc-tip { cursor: help; color: #7f8da0; }
.oc-input { background: #0e1420; border: 1px solid #2a3446; border-radius: 8px; color: #e6e9ef; padding: 8px 10px; font-size: 13px; }
.oc-help { font-size: 11px; color: #93a1b5; }
.oc-err { font-size: 11px; color: #ff8b8b; min-height: 12px; }
.oc-status { font-size: 12px; margin: 10px 0; min-height: 14px; }
.oc-status.ok { color: #86e29b; }
.oc-status.bad { color: #ff8b8b; }
.oc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.oc-btn { background: #1a2130; border: 1px solid #2a3446; color: #e6e9ef; border-radius: 8px; padding: 8px 14px; font-size: 13px; cursor: pointer; }
.oc-btn-primary { background: #2b6cff; border-color: #2b6cff; }
.oc-help-links { margin-top: 12px; display: flex; gap: 12px; }
.oc-help-links a { color: #7fb0ff; font-size: 12px; }

/* ── BB11.7 — Website Audit & Optimization Loop ─────────────────────────────────────────────── */
.ccx-audit { display: flex; flex-direction: column; gap: 10px; }
.ccx-audit__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.ccx-audit__field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.ccx-audit__field label { color: #98a2b3; }
.ccx-audit__field select,
.ccx-audit__field input[type='number'] { background: #141a24; border: 1px solid #2a3446; color: #e6e9ef; border-radius: 6px; padding: 5px 8px; }
.ccx-audit__check { display: inline-flex; align-items: center; gap: 5px; color: #e6e9ef; }
.ccx-audit__safety { flex-basis: 100%; margin: 0; }
.ccx-audit__phases { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ccx-audit__phase { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #667085; border: 1px solid #2a3446; border-radius: 999px; padding: 3px 10px; }
.ccx-audit__phase.is-done { color: #7fd6a1; border-color: #2f5f45; }
.ccx-audit__phase.is-active { color: #7fb0ff; border-color: #2b6cff; }
.ccx-audit__phase-dot { font-size: 10px; }
.ccx-audit__running { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #98a2b3; }
.ccx-audit__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ccx-audit__domain { font-weight: 600; }
.ccx-audit__time { color: #667085; font-size: 12px; }
.ccx-audit__warnings { font-size: 12px; color: #d9a441; }
.ccx-audit__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.ccx-audit__stat { display: flex; flex-direction: column; gap: 2px; background: #141a24; border: 1px solid #232c3b; border-radius: 8px; padding: 8px 10px; font-size: 12px; }
.ccx-audit__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ccx-audit__metrics,
.ccx-audit__list,
.ccx-audit__urls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #98a2b3; }
.ccx-audit__urls { color: #667085; }
.ccx-audit__recs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ccx-audit__rec { background: #141a24; border: 1px solid #232c3b; border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.ccx-audit__rec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ccx-audit__rec-meta { font-size: 11px; color: #667085; }
.ccx-audit__rec-body { font-size: 13px; }
.ccx-audit__rec-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ccx-audit__filter { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 6px 0; }
.ccx-audit__filter select { background: #141a24; border: 1px solid #2a3446; color: #e6e9ef; border-radius: 6px; padding: 4px 8px; }
.ccx-audit__history-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; cursor: pointer; padding: 4px 0; }
.ccx-audit__history-item.is-current { color: #7fb0ff; }
.ccx-audit__cmp { color: #667085; }
.ccx-audit__cmp-improved { color: #7fd6a1; }
.ccx-audit__cmp-regressed { color: #ff8080; }
.ccx-audit__cmp-not_comparable { color: #667085; }
.ccx-audit__regressions { color: #ff8080; font-size: 12px; margin: 4px 0; }
.ccx-audit__errors { font-size: 12px; color: #ff8080; display: flex; flex-direction: column; gap: 2px; }
.ccx-audit__notice { border-radius: 8px; padding: 8px 10px; font-size: 12px; }
.ccx-audit__notice--info { background: #12263a; color: #7fb0ff; }
.ccx-audit__notice--warn { background: #2e2612; color: #d9a441; }
.ccx-audit__notice--bad { background: #2e1616; color: #ff8080; }
/* ── BB11.8 — Commerce & Measurement Intelligence ──────────────────────────────────────────── */
.ccx-ms { display: flex; flex-direction: column; gap: 10px; }
.ccx-ms__actions { display: flex; gap: 8px; }
.ccx-ms__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ccx-ms__time { color: #667085; font-size: 12px; }
.ccx-ms__warnings { font-size: 12px; color: #d9a441; }
.ccx-ms__scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ccx-ms__score { display: flex; flex-direction: column; gap: 3px; background: #141a24; border: 1px solid #232c3b; border-radius: 8px; padding: 10px 12px; }
.ccx-ms__score.is-unmeasured { border-style: dashed; color: #667085; }
.ccx-ms__score-label { font-size: 12px; color: #98a2b3; }
.ccx-ms__score-value { font-size: 18px; }
.ccx-ms__gateway { font-size: 12px; color: #98a2b3; }
.ccx-ms__platforms, .ccx-ms__findings, .ccx-ms__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ccx-ms__platform { background: #141a24; border: 1px solid #232c3b; border-radius: 8px; padding: 8px 10px; }
.ccx-ms__platform.is-open { border-color: #2b6cff; }
.ccx-ms__platform-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; cursor: pointer; }
.ccx-ms__platform-role, .ccx-ms__platform-score, .ccx-ms__platform-time { font-size: 11px; color: #667085; }
.ccx-ms__platform-body { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.ccx-ms__check { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 12px; }
.ccx-ms__check-label { font-weight: 600; }
.ccx-ms__check-evidence { color: #98a2b3; }
.ccx-ms__finding { background: #141a24; border: 1px solid #232c3b; border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.ccx-ms__finding-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ccx-ms__finding-sources { font-size: 11px; color: #667085; }
.ccx-ms__finding-observation { font-size: 13px; }
.ccx-ms__finding-hypothesis { font-size: 12px; color: #98a2b3; }
.ccx-ms__finding-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ccx-ms__notice { border-radius: 8px; padding: 8px 10px; font-size: 12px; }
.ccx-ms__notice--info { background: #12263a; color: #7fb0ff; }
.ccx-ms__notice--warn { background: #2e2612; color: #d9a441; }
.ccx-ms__notice--bad { background: #2e1616; color: #ff8080; }

/* Merchant Center — developerregistratie (BB12.1). Verschijnt alleen wanneer die stap aan de beurt is. */
.mcr { border: 1px solid rgba(240, 190, 80, 0.4); background: rgba(240, 190, 80, 0.05); border-radius: 8px; padding: 12px 14px; margin: 12px 0; display: grid; gap: 8px; }
.mcr__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mcr__account { color: var(--ccx-muted); font-size: 12px; }
.mcr__help { color: var(--ccx-muted); font-size: 12px; margin: 0; }
.mcr__warn { margin: 0; padding-left: 18px; font-size: 12px; color: #f0be50; }
.mcr__label { font-size: 12px; font-weight: 600; }
.mcr__input { width: 100%; max-width: 380px; padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(0, 0, 0, 0.2); color: inherit; }
.mcr__btn { align-self: start; padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: inherit; cursor: pointer; }
.mcr__btn--danger { border-color: rgba(240, 120, 100, 0.6); background: rgba(240, 120, 100, 0.12); }
.mcr__rows { display: grid; gap: 2px; font-size: 12px; }
.mcr__hint { color: var(--ccx-muted); }
.mcr__confirm { display: grid; gap: 6px; border-left: 3px solid rgba(240, 120, 100, 0.6); padding-left: 10px; }
.mcr__err { color: #f07864; font-size: 12px; }
.mcr__result--ok { color: var(--ccx-accent); font-size: 12px; }
.mcr__result--bad { color: #f0be50; font-size: 12px; }
.mcr__verify { color: var(--ccx-muted); font-size: 12px; }

/* Merchant Center — Product Diagnostics (BB12.1). Status altijd per bestemming. */
.ccx-mc { display: grid; gap: 10px; font-size: 12px; }
.ccx-mc__lead { color: var(--ccx-text); }
.ccx-mc__warn { color: #f0be50; border-left: 3px solid rgba(240, 190, 80, 0.6); padding: 4px 8px; }
.ccx-mc__h { margin: 6px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ccx-muted); }
.ccx-mc__dests { display: grid; gap: 6px; }
.ccx-mc__dest { display: grid; gap: 3px; }
.ccx-mc__dest-head { display: flex; align-items: center; gap: 8px; }
.ccx-mc__dest-name { font-weight: 600; }
.ccx-mc__dest-kind { color: var(--ccx-muted); font-size: 11px; text-transform: uppercase; }
.ccx-mc__bar { height: 4px; border-radius: 2px; background: rgba(240, 120, 100, 0.35); overflow: hidden; }
.ccx-mc__bar-fill { display: block; height: 100%; background: var(--ccx-accent); }
.ccx-mc__dest--blocked .ccx-mc__bar-fill { background: transparent; }
.ccx-mc__row { display: flex; justify-content: space-between; gap: 12px; }
.ccx-mc__k { color: var(--ccx-muted); }
.ccx-mc__issues { display: grid; gap: 6px; }
.ccx-mc__issue-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ccx-mc__code { font-family: ui-monospace, monospace; font-size: 11px; }
.ccx-mc__count { font-weight: 600; }
.ccx-mc__occ { color: var(--ccx-muted); }
.ccx-mc__where { color: var(--ccx-muted); font-size: 11px; }
.ccx-mc__note { color: var(--ccx-muted); font-size: 11px; margin: 2px 0 0; }
.ccx-mc__foot { display: flex; align-items: center; gap: 10px; }
.ccx-mc__btn { padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: inherit; cursor: pointer; }
.ccx-mc__synced { color: var(--ccx-muted); font-size: 11px; }
.ccx-mc__empty { color: var(--ccx-muted); margin: 0; }
.ccx-mc__notice--ok { color: var(--ccx-accent); }
.ccx-mc__notice--bad { color: #f0be50; }

/* De lokale-voorraadketen. De eerste niet-staande schakel is de enige plek waar werk zin heeft en
   krijgt daarom als enige nadruk; de schakels erna zijn nog niet aan de beurt. */
.ccx-mc-stack { display: grid; gap: 12px; }
.ccx-mc__links { display: grid; gap: 8px; }
.ccx-mc__link { display: grid; gap: 2px; padding: 6px 8px; border-left: 2px solid rgba(255, 255, 255, 0.12); }
.ccx-mc__link--first { border-left-color: #f0be50; background: rgba(240, 190, 80, 0.06); }
.ccx-mc__link-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ccx-mc__link-name { font-weight: 600; }
.ccx-mc__link-actor { color: var(--ccx-muted); font-size: 11px; text-transform: uppercase; }
.ccx-mc__link-detail { color: var(--ccx-text); }
.ccx-mc__link-first { color: #f0be50; font-size: 11px; }

/* Customer Behaviour Intelligence (BB12.2). Onbekend is nooit groen. */
.ccx-cb { display: grid; gap: 10px; font-size: 12px; }
.ccx-cb__lead { color: var(--ccx-text); }
.ccx-cb__warn { color: #f0be50; border-left: 3px solid rgba(240, 190, 80, 0.6); padding: 4px 8px; }
.ccx-cb__h { margin: 6px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ccx-muted); }
.ccx-cb__row { display: flex; justify-content: space-between; gap: 12px; }
.ccx-cb__k { color: var(--ccx-muted); }
.ccx-cb__pages { display: grid; gap: 6px; }
.ccx-cb__page { display: grid; gap: 2px; padding: 4px 8px; border-left: 2px solid rgba(255, 255, 255, 0.12); }
.ccx-cb__page-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ccx-cb__page-url { font-weight: 600; }
.ccx-cb__page-type { color: var(--ccx-muted); font-size: 11px; text-transform: uppercase; }
.ccx-cb__page-metrics { color: var(--ccx-muted); font-size: 11px; }
.ccx-cb__evidence { color: var(--ccx-muted); font-size: 11px; }
.ccx-cb__list { display: grid; gap: 4px; }
.ccx-cb__item { color: var(--ccx-text); }
.ccx-cb__coverage { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; }
.ccx-cb__src--on { color: var(--ccx-accent); }
.ccx-cb__src--off { color: var(--ccx-muted); }
.ccx-cb__limits { margin: 4px 0 0 16px; color: var(--ccx-muted); font-size: 11px; }
.ccx-cb__budget { color: var(--ccx-muted); font-size: 11px; }
.ccx-cb__note { color: var(--ccx-muted); font-size: 11px; }
.ccx-cb__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ccx-cb__btn { padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: inherit; cursor: pointer; }
.ccx-cb__btn--ghost { background: transparent; font-size: 11px; }
.ccx-cb__link { color: var(--ccx-accent); }
.ccx-cb__empty { color: var(--ccx-muted); margin: 0; }
.ccx-cb__notice--ok { color: var(--ccx-accent); }
.ccx-cb__notice--bad { color: #f0be50; }

/* Advertising Intelligence (BB12.3). Providerneutraal: geen enkele regel hier kent Google Ads.
   Een ontbrekende waarde krijgt een eigen opmaak, zodat "niet gemeten" nooit als nul leest. */
.ccx-ad { display: grid; gap: 10px; font-size: 12px; }
.ccx-ad__lead { color: var(--ccx-text); }
.ccx-ad__h { margin: 6px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ccx-muted); }
.ccx-ad__row { display: flex; justify-content: space-between; gap: 12px; }
.ccx-ad__k { color: var(--ccx-muted); }
.ccx-ad__v { font-variant-numeric: tabular-nums; }
/* Een streepje in plaats van een getal: gedempt, met de reden als titel. Nooit een 0. */
.ccx-ad__v--missing { color: var(--ccx-muted); cursor: help; }
.ccx-ad__sources { display: grid; gap: 8px; }
.ccx-ad__source { display: grid; gap: 2px; padding: 6px 8px; border-left: 2px solid rgba(255, 255, 255, 0.12); }
.ccx-ad__source-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ccx-ad__source-name { font-weight: 600; }
/* Wie er aan zet is. Platformconfiguratie kan een gebruiker niet zelf oplossen. */
.ccx-ad__actor { color: var(--ccx-muted); font-size: 11px; text-transform: uppercase; }
.ccx-ad__source-detail { color: var(--ccx-text); }
.ccx-ad__next { color: #f0be50; font-size: 11px; }
.ccx-ad__synced { color: var(--ccx-muted); font-size: 11px; }
.ccx-ad__conf { color: var(--ccx-muted); font-size: 11px; }
.ccx-ad__findings { display: grid; gap: 8px; }
.ccx-ad__finding { display: grid; gap: 3px; padding: 6px 8px; border-left: 2px solid rgba(255, 255, 255, 0.12); }
.ccx-ad__finding-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ccx-ad__finding-title { font-weight: 600; }
.ccx-ad__evidence { margin: 0; padding-left: 16px; color: var(--ccx-muted); }
/* Tegenhypothese en beperking staan bij elke bevinding — daarom een vaste, rustige opmaak. */
.ccx-ad__counter { color: var(--ccx-muted); font-size: 11px; }
.ccx-ad__limit { color: var(--ccx-muted); font-size: 11px; }
.ccx-ad__do { color: var(--ccx-text); font-size: 11px; }
.ccx-ad__corrs { display: grid; gap: 8px; }
/* Wat niet is onderzocht blijft zichtbaar, maar rustiger dan een echte aanwijzing. */
.ccx-ad__corrs--quiet .ccx-ad__corr-title { color: var(--ccx-muted); font-weight: 400; }
.ccx-ad__corr { display: grid; gap: 3px; }
.ccx-ad__corr-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ccx-ad__corr-title { font-weight: 600; }
.ccx-ad__unsupported { color: var(--ccx-muted); font-size: 11px; }
.ccx-ad__limits { color: var(--ccx-muted); font-size: 11px; display: grid; gap: 2px; }
.ccx-ad__note { color: var(--ccx-muted); font-size: 11px; margin: 2px 0 0; }
.ccx-ad__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ccx-ad__btn { padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: inherit; cursor: pointer; }
.ccx-ad__empty { color: var(--ccx-muted); margin: 0; }
.ccx-ad__notice--ok { color: var(--ccx-accent); }
.ccx-ad__notice--bad { color: #f0be50; }

/* Bewijssecties, bestuurlijke vragen en zekerheid (BB12.4). Een sectie zonder bewijs toont GEEN
   cijfers maar de reden en de geraadpleegde laag — anders leest een leeg veld als een nulmeting. */
.ccx-ad__evs { display: grid; gap: 10px; }
.ccx-ad__ev { display: grid; gap: 3px; padding: 6px 8px; border-left: 2px solid rgba(255, 255, 255, 0.12); }
.ccx-ad__ev-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ccx-ad__ev-title { font-weight: 600; }
.ccx-ad__ev-missing { color: var(--ccx-muted); font-style: italic; }
.ccx-ad__qs { display: grid; gap: 8px; }
.ccx-ad__q { display: grid; gap: 3px; padding: 6px 8px; border-left: 2px solid rgba(255, 255, 255, 0.12); }
/* Een onbeantwoordbare vraag krijgt evenveel ruimte als een beantwoorde: "niet kunnen kijken" is
   een uitkomst, geen leegte. */
.ccx-ad__q--not_answerable { border-left-style: dashed; }
.ccx-ad__q-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ccx-ad__q-title { font-weight: 600; }
.ccx-ad__q-answer { color: var(--ccx-text); }
.ccx-ad__q-missing { color: #f0be50; font-size: 11px; }

/* Executive Briefing (BB12.5) — het eerste scherm. Breder en rustiger dan de panelen eronder:
   dit is het overzicht, niet de verdieping. */
.ccx-executive-slot { margin-bottom: 14px; }
.ccx-ex { display: grid; gap: 10px; font-size: 12px; }
.ccx-ex__headline { font-size: 14px; font-weight: 600; color: var(--ccx-text); }
.ccx-ex__why { color: var(--ccx-muted); }
.ccx-ex__meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--ccx-muted); font-size: 11px; }
.ccx-ex__h { margin: 6px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ccx-muted); }
.ccx-ex__prios { display: grid; gap: 8px; }
.ccx-ex__prio { display: grid; gap: 2px; padding: 6px 8px; border-left: 2px solid rgba(255, 255, 255, 0.12); }
.ccx-ex__prio-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ccx-ex__rank { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 1.2em; }
.ccx-ex__prio-title { font-weight: 600; }
/* De verklaring hoort bij elke prioriteit; zonder reden is een volgorde een mening. */
.ccx-ex__because { color: var(--ccx-muted); font-size: 11px; }
.ccx-ex__do { color: var(--ccx-text); font-size: 11px; }
.ccx-ex__findings { display: grid; gap: 8px; }
.ccx-ex__finding { display: grid; gap: 2px; padding: 6px 8px; border-left: 2px solid rgba(255, 255, 255, 0.12); }
.ccx-ex__finding-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ccx-ex__finding-title { font-weight: 600; }
.ccx-ex__impact { color: var(--ccx-text); }
.ccx-ex__counter { color: var(--ccx-muted); font-size: 11px; }
.ccx-ex__actor { color: var(--ccx-muted); font-size: 11px; text-transform: uppercase; }
.ccx-ex__actions { margin: 0; padding-left: 16px; }
.ccx-ex__note { color: var(--ccx-muted); font-size: 11px; margin: 2px 0 0; }
.ccx-ex__dirs { display: grid; gap: 6px; }
.ccx-ex__dir { display: grid; gap: 2px; }
.ccx-ex__dir-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ccx-ex__dir-name { font-weight: 600; }
.ccx-ex__dir-summary { color: var(--ccx-text); }
.ccx-ex__dir-reason { color: var(--ccx-muted); font-size: 11px; }
/* Wat niet is meegewogen staat op het scherm, niet in een voetnoot. */
.ccx-ex__missing { color: #f0be50; font-size: 11px; display: grid; gap: 2px; }
.ccx-ex__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ccx-ex__btn { padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: inherit; cursor: pointer; }
.ccx-ex__synced { color: var(--ccx-muted); font-size: 11px; }
.ccx-ex__empty { color: var(--ccx-muted); margin: 0; }

/* Executive Conversation (BB12.7). Een gesprek leest anders dan een dashboard: één kolom met de
   draad, één smalle kolom met de verantwoording. Zekerheid krijgt nooit alleen kleur — er staat
   altijd een woord bij. */
.ccq-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .ccq-layout { grid-template-columns: minmax(0, 1fr); } }
.ccq-thread { display: grid; gap: 14px; min-width: 0; }
.ccq-side { display: grid; gap: 12px; }
.ccq-empty { color: var(--ccx-muted); margin: 0; }
.ccq-turn { display: grid; gap: 8px; padding: 12px; border-left: 2px solid rgba(255, 255, 255, 0.12); }
.ccq-ask { font-weight: 600; }
.ccq-answer { display: grid; gap: 10px; font-size: 13px; }
.ccq-summary { margin: 0; }
.ccq-block { display: grid; gap: 4px; }
.ccq-block__title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ccx-muted); }
.ccq-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.ccq-block--missing .ccq-list { color: #f0be50; }
.ccq-missing__what { font-weight: 600; }
.ccq-missing__next { color: var(--ccx-muted); }
.ccq-confidence { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ccq-confidence__why { color: var(--ccx-muted); font-size: 11px; }
.ccq-refs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ccq-refs__label { color: var(--ccx-muted); font-size: 11px; }
.ccq-followup { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ccq-followup__btn { padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: inherit; cursor: pointer; }
.ccq-followup__why { color: var(--ccx-muted); font-size: 11px; }
.ccq-composer { display: grid; gap: 8px; }
.ccq-form { display: flex; gap: 8px; }
.ccq-input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.04); color: inherit; }
.ccq-send { padding: 8px 14px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.08); color: inherit; cursor: pointer; }
.ccq-send[disabled], .ccq-input[disabled] { opacity: 0.6; cursor: default; }
.ccq-suggestions { display: flex; gap: 6px; flex-wrap: wrap; }
.ccq-suggestion { padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: transparent; color: var(--ccx-muted); font-size: 11px; cursor: pointer; }
.ccq-error { color: #f0be50; font-size: 12px; }
.ccq-rows { display: grid; gap: 6px; margin: 0; font-size: 12px; }
.ccq-row { display: flex; justify-content: space-between; gap: 12px; }
.ccq-row dt { color: var(--ccx-muted); margin: 0; }
.ccq-row dd { margin: 0; text-align: right; }
.ccq-health { display: grid; gap: 8px; }
.ccq-health__why { color: var(--ccx-muted); font-size: 11px; margin: 0; }

/* ── Jarvis Executive Command Center (BB13.0) ────────────────────────────────────────────────────
   De startpagina. Rustiger dan de dashboards eronder: meer witruimte, grotere regelafstand en een
   strak kleurbudget. Behalve de neutrale basis worden hier DRIE kleuren gebruikt — groen (gezond),
   amber (aandacht) en rood (kritiek) — plus de bestaande accentkleur voor het enige primaire knopje.
   Kleur staat nooit alleen: overal waar een kleur iets betekent, staat het woord erbij.

   Breedte schaalt mee met het scherm. Op 1920 en breder is 1200px te smal voor een werkplek waar
   twee kolommen naast elkaar horen te passen; op 4K stopt de groei bij een leesbare regellengte. */
.ecc {
  max-width: 1440px;
  gap: 28px;
}
@media (min-width: 1800px) { .ecc { max-width: 1680px; } }
@media (min-width: 2400px) { .ecc { max-width: 1920px; } }

.ecc-muted { color: var(--cc-muted); }
.ecc-dot { color: var(--cc-border); }

/* 1. Welkomstblok */
.ecc-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 8px 0 4px;
}
.ecc-hero__left { min-width: 0; }
.ecc-hero__greeting { margin: 0; font-size: 30px; line-height: 1.2; letter-spacing: -0.01em; }
.ecc-hero__sub { margin: 8px 0 0; color: var(--cc-muted); font-size: 15px; max-width: 60ch; }
.ecc-hero__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  color: var(--cc-muted);
  font-size: 13px;
}
.ecc-hero__right { min-width: 260px; }
.ecc-hero__health {
  display: grid;
  gap: 8px;
  justify-items: flex-start;
  padding: 16px 18px;
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
}
.ecc-hero__health-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cc-muted);
}
.ecc-hero__health-why { font-size: 13px; line-height: 1.5; max-width: 44ch; }
.ecc-hero__health-meta { display: grid; gap: 2px; font-size: 12px; color: var(--cc-muted); }

/* Rasters. Twee kolommen zodra er ruimte is, anders een enkele — nooit een kolom die te smal wordt
   om een zin in te lezen. */
.ecc-grid { display: grid; gap: 20px; align-items: start; }
.ecc-grid--two { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
@media (max-width: 900px) { .ecc-grid--two { grid-template-columns: minmax(0, 1fr); } }

/* 2. Executive Briefing */
.ecc-briefing { display: grid; gap: 20px; }
.ecc-briefing__headline { margin: 0; font-size: 17px; line-height: 1.55; max-width: 80ch; }
.ecc-briefing__block { display: grid; gap: 8px; }
.ecc-block__title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cc-muted);
}
.ecc-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.55; }
.ecc-briefing__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; }

/* 3. Vandaag belangrijk. Genummerd: de volgorde komt van de Brain en is zichtbaar. */
.ecc-priorities { margin: 0; padding-left: 24px; display: grid; gap: 18px; }
.ecc-priority { line-height: 1.5; }
.ecc-priority__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ecc-priority__title { font-weight: 600; }
.ecc-priority__why { margin: 6px 0 0; color: var(--cc-muted); font-size: 13px; max-width: 72ch; }
.ecc-priority__foot { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; }
.ecc-priority__action { color: var(--cc-text); }

/* 4 + 5. Risicos en kansen */
.ecc-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.ecc-finding { display: grid; gap: 6px; padding-left: 12px; border-left: 2px solid var(--cc-border); }
.ecc-finding__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ecc-finding__title { font-weight: 600; }
.ecc-finding__impact { margin: 0; line-height: 1.55; max-width: 72ch; }
.ecc-finding__counter { margin: 0; color: var(--cc-muted); font-size: 13px; font-style: italic; }
.ecc-finding__foot { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; }
.ecc-finding__action { color: var(--cc-text); }

/* 6. KPI-tegels. Een streepje betekent "niet gemeten" en krijgt dus geen kleur. */
.ecc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.ecc-kpi {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  background: var(--cc-bg);
}
.ecc-kpi__label { font-size: 12px; color: var(--cc-muted); }
.ecc-kpi__value { font-size: 19px; font-weight: 600; }
.ecc-kpi__hint { font-size: 12px; color: var(--cc-muted); }
.ecc-kpi--ok { border-left: 3px solid var(--cc-ok); }
.ecc-kpi--warn { border-left: 3px solid var(--cc-warn); }
.ecc-kpi--bad { border-left: 3px solid var(--cc-bad); }

/* 7 + 8. Vraag Jarvis. Het invoerveld is het breedste element van de pagina: dit is de plek waar
   een directeur iets doet in plaats van leest. */
.ecc-ask { display: grid; gap: 14px; }
.ecc-ask__form { display: flex; gap: 10px; align-items: center; }
.ecc-ask__input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  font-size: 15px;
  border-radius: 8px;
  border: 1px solid var(--cc-border);
  background: var(--cc-bg);
  color: inherit;
}
.ecc-ask__input:focus-visible, .ecc-ask__send:focus-visible, .ecc-ask__voice:focus-visible,
.ecc-suggestion:focus-visible, .ecc-followup:focus-visible, .ecc-module:focus-visible {
  outline: 2px solid var(--cc-accent);
  outline-offset: 2px;
}
.ecc-ask__send {
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid var(--cc-accent);
  background: var(--cc-accent);
  color: #fff;
  cursor: pointer;
}
/* De spraakknop staat er al, maar doet nog niets: uitgeschakeld en zichtbaar uitgeschakeld. Een
   knop die stil niets doet is misleidend. */
.ecc-ask__voice {
  padding: 10px 14px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px dashed var(--cc-border);
  background: transparent;
  color: var(--cc-muted);
}
.ecc-ask__send[disabled], .ecc-ask__input[disabled], .ecc-ask__voice[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.ecc-ask__suggestions { display: flex; gap: 8px; flex-wrap: wrap; }
.ecc-suggestion {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--cc-border);
  background: transparent;
  color: var(--cc-muted);
  font-size: 13px;
  cursor: pointer;
}
.ecc-error { color: var(--cc-bad); font-size: 13px; }
.ecc-thread { display: grid; gap: 18px; }
.ecc-turn { display: grid; gap: 8px; padding-left: 12px; border-left: 2px solid var(--cc-border); }
.ecc-turn__ask { font-weight: 600; }
.ecc-turn__answer { margin: 0; line-height: 1.6; max-width: 80ch; }
.ecc-turn__foot { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 12px; }
.ecc-followup {
  justify-self: flex-start;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--cc-border);
  background: transparent;
  color: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}

/* 9. Directors */
.ecc-directors { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.ecc-director { display: grid; gap: 6px; }
.ecc-director__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ecc-director__name { font-weight: 600; }
.ecc-director__state { font-size: 12px; color: var(--cc-muted); }
.ecc-director__summary { margin: 0; font-size: 13px; line-height: 1.5; }
.ecc-director__foot { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; }

/* 10. Runtime (beheer) */
.ecc-runtime { display: grid; gap: 12px; overflow-x: auto; }
.ecc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ecc-table th, .ecc-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--cc-border); }
.ecc-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cc-muted); }
.ecc-table td { font-variant-numeric: tabular-nums; }

/* 11. Modules */
.ecc-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.ecc-module {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  text-decoration: none;
  color: inherit;
  background: var(--cc-bg);
}
.ecc-module:hover { border-color: var(--cc-accent); }
.ecc-module__title { font-weight: 600; }
.ecc-module__desc { font-size: 12px; color: var(--cc-muted); line-height: 1.45; }

/* Today's KPI's (BB13.1). De cijfers staan direct onder de briefing en krijgen daarom meer ruimte
   dan de tegels eronder: dit is waar een directeur naar kijkt voordat hij verder leest. */
.ecc-kpi-groups { display: grid; gap: 22px; }
.ecc-kpi-group { display: grid; gap: 10px; }
.ecc-kpi__trend { font-size: 12px; font-weight: 500; }
/* Kleur staat nooit alleen: naast het pijltje staat altijd de zin van de backend. */
.ecc-kpi__trend--better { color: var(--cc-ok); }
.ecc-kpi__trend--worse { color: var(--cc-bad); }
.ecc-kpi__trend--neutral, .ecc-kpi__trend--unknown { color: var(--cc-muted); }
/* De waarschuwing bij een scheve vergelijking. Cursief en klein, maar zichtbaar — zonder deze
   regel leest een halve dag naast een hele dag als een echte daling. */
.ecc-kpi__caveat { font-size: 11px; font-style: italic; color: var(--cc-muted); line-height: 1.4; }

/* Wat is er veranderd? (BB13.2). Het eerste blok van de pagina, en het meest gelezen: hier staat
   wat een directeur nog niet wist. Ruimer gezet dan de blokken eronder, met het dagverhaal in
   leesbare regellengte. */
.ecc-daily { display: grid; gap: 20px; }
.ecc-daily__story { display: grid; gap: 8px; }
.ecc-daily__line { margin: 0; font-size: 15px; line-height: 1.6; max-width: 80ch; }
.ecc-daily__persisting { display: grid; gap: 8px; }
.ecc-daily__limit { margin: 0; font-size: 12px; font-style: italic; color: var(--cc-muted); max-width: 80ch; }

.ecc-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.ecc-change { display: grid; gap: 6px; padding-left: 12px; border-left: 2px solid var(--cc-border); }
.ecc-change__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ecc-change__mark { font-weight: 700; font-size: 13px; width: 1em; }
.ecc-change__title { font-weight: 600; }
.ecc-change__impact { margin: 0; line-height: 1.55; max-width: 72ch; }
/* De reden dat wij dit een verandering noemen. Zonder deze regel is het een bewering. */
.ecc-change__why { margin: 0; font-size: 13px; color: var(--cc-muted); max-width: 72ch; }
.ecc-change__foot { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; }
.ecc-change__action { font-size: 13px; }
/* Kleur volgt de RICHTING van de verandering, en staat nooit alleen: er staat altijd een woord
   naast (nieuw, verbeterd, verslechterd) plus het teken ervoor. */
.ecc-change--worsened { border-left-color: var(--cc-bad); }
.ecc-change--new { border-left-color: var(--cc-warn); }
.ecc-change--improved, .ecc-change--disappeared { border-left-color: var(--cc-ok); }

/* Website Optimization Workspace (BB13.3 + BB13.3A). De volledige cyclus per voorstel: wat het is,
   wat het oplevert, waar het staat en waarom. Kleur volgt de prioriteit en staat nooit alleen —
   naast elk teken staat het woord dat de backend heeft meegegeven. */
.ows { max-width: 1440px; }
@media (min-width: 1800px) { .ows { max-width: 1680px; } }

.ows-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ows-count {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  background: var(--cc-bg);
}
.ows-count__value { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ows-count__label { font-size: 12px; color: var(--cc-muted); }
.ows-count--ok { border-left: 3px solid var(--cc-ok); }
.ows-count--warn { border-left: 3px solid var(--cc-warn); }
.ows-count--bad { border-left: 3px solid var(--cc-bad); }

.ows-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 20px; }
.ows-highlight { display: grid; gap: 6px; }
.ows-highlight__title { font-weight: 600; line-height: 1.4; }
.ows-highlight__meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 12px; }
.ows-highlight__why { margin: 0; font-size: 12px; color: var(--cc-muted); }

.ows-proposals { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.ows-proposal {
  display: grid;
  gap: 10px;
  padding: 16px 16px 16px 14px;
  border: 1px solid var(--cc-border);
  border-left-width: 3px;
  border-radius: var(--cc-radius);
  background: var(--cc-bg);
}
.ows-proposal--needs_review { border-left-color: var(--cc-bad); }
.ows-proposal--awaiting_approval { border-left-color: var(--cc-warn); }
.ows-proposal--completed { border-left-color: var(--cc-ok); }
.ows-proposal__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ows-proposal__title { font-weight: 600; flex: 1; min-width: 12ch; }
.ows-proposal__impact { margin: 0; line-height: 1.55; max-width: 74ch; }
.ows-proposal__action { font-size: 14px; line-height: 1.5; max-width: 74ch; }
.ows-proposal__action-label { font-weight: 600; }
.ows-proposal__meta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--cc-muted); }
.ows-proposal__why { margin: 0; font-size: 12px; color: var(--cc-muted); }
.ows-proposal__evidence { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; }
.ows-proposal__counter { color: var(--cc-muted); font-style: italic; }

/* De cyclus: vier stappen naast elkaar, elk met de reden eronder. Op smalle schermen onder elkaar,
   want een reden die niet leesbaar is, kan net zo goed wegblijven. */
.ows-cycle { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; padding-top: 6px; border-top: 1px solid var(--cc-border); }
.ows-cycle__step { display: grid; gap: 2px; }
.ows-cycle__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cc-muted); }
.ows-cycle__value { font-size: 13px; font-weight: 600; }
.ows-cycle__why { font-size: 11px; color: var(--cc-muted); line-height: 1.45; }

.ows-approve, .ows-approve-all {
  justify-self: flex-start;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--cc-accent);
  background: transparent;
  color: inherit;
  font-size: 13px;
  cursor: pointer;
}
.ows-approve:focus-visible, .ows-approve-all:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; }
.ows-approve[disabled], .ows-approve-all[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Enterprise Execution Center (BB13.4). De levenscyclus is de indeling: waar staat wat, en waarom.
   Kleur volgt de fase en staat nooit alleen — naast elke kleur staat het woord van de backend. */
.exc { max-width: 1440px; }
@media (min-width: 1800px) { .exc { max-width: 1680px; } }

.exc-health__why { margin: 0 0 16px; line-height: 1.55; max-width: 80ch; }

.exc-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.exc-count {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  background: var(--cc-bg);
}
.exc-count__value { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.exc-count__label { font-size: 12px; color: var(--cc-muted); }
.exc-count--ok { border-left: 3px solid var(--cc-ok); }
.exc-count--warn { border-left: 3px solid var(--cc-warn); }
.exc-count--bad { border-left: 3px solid var(--cc-bad); }

.exc-jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.exc-job {
  display: grid;
  gap: 10px;
  padding: 16px 16px 16px 14px;
  border: 1px solid var(--cc-border);
  border-left-width: 3px;
  border-radius: var(--cc-radius);
  background: var(--cc-bg);
}
.exc-job--failed { border-left-color: var(--cc-bad); }
.exc-job--pending_approval, .exc-job--queued, .exc-job--executing, .exc-job--verifying { border-left-color: var(--cc-warn); }
.exc-job--completed { border-left-color: var(--cc-ok); }
.exc-job__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.exc-job__title { font-weight: 600; flex: 1; min-width: 12ch; }
.exc-job__summary { margin: 0; line-height: 1.55; max-width: 74ch; }
.exc-job__meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--cc-muted); }

/* De drie uitkomsten naast elkaar, elk met hun reden eronder. */
.exc-cycle { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; padding-top: 8px; border-top: 1px solid var(--cc-border); }
.exc-cycle__step { display: grid; gap: 2px; }
.exc-cycle__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cc-muted); }
.exc-cycle__value { font-size: 13px; font-weight: 600; }
.exc-cycle__why { font-size: 11px; color: var(--cc-muted); line-height: 1.45; }

/* De geschiedenis is ingeklapt: hij is er altijd, maar hij hoeft niet altijd te schreeuwen. */
.exc-history { font-size: 12px; }
.exc-history summary { cursor: pointer; color: var(--cc-muted); }
.exc-history__list { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.exc-history__to { font-weight: 600; }

.exc-job__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.exc-submit, .exc-cancel, .exc-rollback {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--cc-border);
  background: transparent;
  color: inherit;
  font-size: 13px;
  cursor: pointer;
}
.exc-submit { border-color: var(--cc-accent); }
/* Terugdraaien verandert iets terug; dat verdient een waarschuwende rand, geen gewone knop. */
.exc-rollback { border-color: var(--cc-warn); }
.exc-submit:focus-visible, .exc-cancel:focus-visible, .exc-rollback:focus-visible {
  outline: 2px solid var(--cc-accent);
  outline-offset: 2px;
}
.exc-submit[disabled], .exc-cancel[disabled], .exc-rollback[disabled] { opacity: 0.55; cursor: not-allowed; }