/* Feedwerk application styles: shared components and responsive layout. */
.fw {
  --fw-accent: #24516f;
  --fw-radius: 7px;
  --fw-row-height: 66px;
  --fw-bg: #ffffff;
  --fw-panel: #ffffff;
  --fw-panel-subtle: #f7f8f9;
  --fw-text: #18202a;
  --fw-muted: #68717d;
  --fw-border: #e4e7eb;
  --fw-hover: #f7f9fc;
  --fw-success: #1c7c54;
  --fw-success-bg: #eaf7f1;
  --fw-warning: #9a5807;
  --fw-warning-bg: #fff5e7;
  --fw-danger: #ad3b36;
  --fw-danger-bg: #fff0ef;
  background: var(--fw-bg);
  color: var(--fw-text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Het ontwerp stond als kaart in een pagina (min-height, rand, radius); hier
     IS het de pagina. Alleen deze vijf regels verschillen van het ontwerp. */
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  position: relative;
  color-scheme: light;
}

.fw * { box-sizing: border-box; }
.fw button { font: inherit; }

.fw .fw-sidebar {
  background: var(--fw-panel-subtle);
  border-right: 1px solid var(--fw-border);
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fw .fw-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 22px;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.fw .fw-mark {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  background: var(--fw-accent);
  display: grid;
  place-items: center;
  color: white;
  font-size: 13px;
  font-weight: 800;
}

.fw .fw-workspace {
  margin: 0 5px 20px;
  padding: 10px 11px;
  background: var(--fw-panel);
  border: 1px solid var(--fw-border);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.fw .fw-nav-label {
  color: var(--fw-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 0 10px 7px;
}

.fw .fw-nav {
  display: grid;
  gap: 3px;
}

.fw .fw-nav button {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--fw-muted);
  padding: 10px 11px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  font-weight: 550;
}

.fw .fw-nav button[aria-current="page"] {
  background: var(--fw-panel);
  color: var(--fw-accent);
  font-weight: 700;
}

.fw .fw-nav svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.fw .fw-sidebar-foot { margin-top: auto; padding: 14px 10px 2px; color: var(--fw-muted); font-size: 12px; }

.fw .fw-main {
  min-width: 0;
  padding: 28px 32px 40px;
  overflow: auto;
}

.fw .fw-list-page[data-hidden="true"],
.fw .fw-channel-page[data-hidden="true"] { display: none; }

.fw .fw-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.fw .fw-head h1 { margin: 0 0 5px; font-size: 26px; letter-spacing: -0.035em; }
.fw .fw-head p { margin: 0; color: var(--fw-muted); font-size: 14px; }

.fw .fw-primary {
  border: 0;
  border-radius: 5px;
  background: var(--fw-accent);
  color: #fff;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
}

.fw .fw-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 24px;
  border-top: 1px solid var(--fw-border);
  border-bottom: 1px solid var(--fw-border);
}

.fw .fw-kpi {
  padding: 15px 18px 15px 0;
  border-right: 1px solid var(--fw-border);
  margin-right: 18px;
}

.fw .fw-kpi:last-child { border-right: 0; margin-right: 0; }

.fw .fw-kpi span { color: var(--fw-muted); font-size: 12px; font-weight: 650; }
.fw .fw-kpi strong { display: block; margin-top: 5px; font-size: 22px; letter-spacing: -0.03em; }
.fw .fw-kpi small { display: block; margin-top: 3px; color: var(--fw-muted); font-size: 12px; }
.fw .fw-kpi-attention strong { color: var(--fw-warning); }

.fw .fw-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.fw .fw-tabs { display: flex; gap: 4px; }
.fw .fw-tabs button {
  border: 0;
  background: transparent;
  color: var(--fw-muted);
  padding: 7px 10px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.fw .fw-tabs button[aria-selected="true"] { background: var(--fw-panel); color: var(--fw-text); box-shadow: inset 0 0 0 1px var(--fw-border); font-weight: 700; }

.fw .fw-search {
  border: 1px solid var(--fw-border);
  background: var(--fw-panel);
  color: var(--fw-text);
  border-radius: 5px;
  padding: 8px 10px;
  width: 210px;
  font-size: 13px;
  outline: none;
}

.fw .fw-table {
  background: var(--fw-panel);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius);
  overflow: hidden;
}

.fw .fw-table-head,
.fw .fw-channel-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.6fr) 112px 112px 116px 130px 26px;
  gap: 10px;
  align-items: center;
  padding: 0 16px;
}

.fw .fw-table-head {
  height: 42px;
  background: var(--fw-panel-subtle);
  color: var(--fw-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .055em;
  border-bottom: 1px solid var(--fw-border);
}

.fw .fw-channel-row {
  min-height: var(--fw-row-height);
  border: 0;
  border-bottom: 1px solid var(--fw-border);
  background: var(--fw-panel);
  color: var(--fw-text);
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.fw .fw-channel-row:last-child { border-bottom: 0; }
.fw .fw-channel-row:hover { background: var(--fw-hover); }
.fw .fw-channel-row[hidden] { display: none; }

.fw .fw-channel-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fw .fw-logo {
  width: 36px;
  height: 36px;
  border: 1px solid var(--fw-border);
  background: var(--fw-panel);
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  flex: 0 0 auto;
}
.fw .fw-logo-google { color: #4285f4; }
.fw .fw-logo-meta { color: #0866ff; }
.fw .fw-logo-bol { color: #06c; }
.fw .fw-logo-idealo { color: #ff6600; }
.fw .fw-name-wrap { min-width: 0; }
.fw .fw-name-wrap strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw .fw-name-wrap small { display: block; color: var(--fw-muted); font-size: 12px; margin-top: 3px; }

.fw .fw-status { display: inline-flex; width: fit-content; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; }
.fw .fw-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fw .fw-live { color: var(--fw-success); }
.fw .fw-check { color: var(--fw-warning); }
.fw .fw-paused { color: var(--fw-muted); }
.fw .fw-cell { font-size: 13px; }
.fw .fw-cell small { display: block; color: var(--fw-muted); margin-top: 3px; }
.fw .fw-issue { color: var(--fw-danger); font-weight: 700; }
.fw .fw-ok { color: var(--fw-success); font-weight: 650; }
.fw .fw-chevron { color: var(--fw-muted); font-size: 18px; }

.fw .fw-agent-note {
  margin-top: 14px;
  background: var(--fw-panel);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius);
  padding: 13px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.fw .fw-agent-copy { display: flex; align-items: center; gap: 11px; min-width: 0; }
.fw .fw-agent-icon { width: 29px; height: 29px; border-radius: 5px; border: 1px solid var(--fw-border); color: var(--fw-muted); display: grid; place-items: center; font-size: 14px; flex: 0 0 auto; }
.fw .fw-agent-copy strong { display: block; font-size: 13px; }
.fw .fw-agent-copy small { color: var(--fw-muted); font-size: 12px; display: block; margin-top: 2px; }
.fw .fw-secondary { border: 1px solid var(--fw-border); background: var(--fw-panel); color: var(--fw-text); border-radius: 5px; padding: 8px 11px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }

.fw .fw-drawer {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(430px, 52%);
  background: var(--fw-panel);
  border-left: 1px solid var(--fw-border);
  box-shadow: -14px 0 45px rgb(0 0 0 / 13%);
  padding: 25px;
  z-index: 4;
  transform: translateX(104%);
  transition: transform .22s ease;
  display: flex;
  flex-direction: column;
}
.fw .fw-drawer[data-open="true"] { transform: translateX(0); }
.fw .fw-drawer-close { border: 0; background: transparent; color: var(--fw-muted); font-size: 22px; cursor: pointer; position: absolute; right: 18px; top: 16px; }
.fw .fw-drawer-title { display: flex; align-items: center; gap: 12px; padding-right: 35px; }
.fw .fw-drawer h2 { margin: 0; font-size: 20px; }
.fw .fw-drawer-sub { color: var(--fw-muted); font-size: 13px; margin: 5px 0 22px 48px; }
.fw .fw-detail-status { border-top: 1px solid var(--fw-border); border-bottom: 1px solid var(--fw-border); padding: 16px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fw .fw-detail-status span { color: var(--fw-muted); font-size: 11px; display: block; }
.fw .fw-detail-status strong { font-size: 14px; display: block; margin-top: 4px; }
.fw .fw-drawer h3 { font-size: 13px; margin: 22px 0 10px; }
.fw .fw-problem { background: var(--fw-danger-bg); border-radius: 10px; padding: 12px; font-size: 13px; }
.fw .fw-problem strong { display: block; color: var(--fw-danger); margin-bottom: 4px; }
.fw .fw-problem span { color: var(--fw-muted); line-height: 1.4; }
.fw .fw-drawer-actions { margin-top: auto; display: grid; gap: 9px; }
.fw .fw-drawer-actions button { width: 100%; }

.fw .fw-back {
  border: 0;
  background: transparent;
  color: var(--fw-muted);
  padding: 0;
  margin: 0 0 18px;
  cursor: pointer;
  font-size: 13px;
}

.fw .fw-channel-header {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.fw .fw-channel-heading { display: flex; align-items: center; gap: 12px; }
.fw .fw-channel-heading h1 { margin: 0; font-size: 24px; letter-spacing: -.03em; }
.fw .fw-channel-heading p { margin: 5px 0 0; color: var(--fw-muted); font-size: 13px; }
.fw .fw-header-actions { display: flex; gap: 8px; }

.fw .fw-steps {
  display: flex;
  border-bottom: 1px solid var(--fw-border);
  margin-bottom: 24px;
  gap: 24px;
}

.fw .fw-step {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--fw-muted);
  padding: 0 1px 11px;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: -1px;
}

.fw .fw-step[aria-selected="true"] { color: var(--fw-text); border-bottom-color: var(--fw-accent); font-weight: 750; }
.fw .fw-step-done::before { content: "✓"; color: var(--fw-success); margin-right: 6px; }
.fw .fw-stage[hidden] { display: none; }

.fw .fw-stage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 18px;
  align-items: start;
}

.fw .fw-section-box {
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius);
  background: var(--fw-panel);
  overflow: hidden;
}

.fw .fw-section-title { padding: 16px 17px 13px; border-bottom: 1px solid var(--fw-border); }
.fw .fw-section-title h2 { margin: 0; font-size: 15px; }
.fw .fw-section-title p { margin: 5px 0 0; color: var(--fw-muted); font-size: 12px; }

.fw .fw-issue-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 78px 18px;
  gap: 10px;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--fw-border);
  cursor: pointer;
}
.fw .fw-issue-row:last-child { border-bottom: 0; }
.fw .fw-issue-row:hover { background: var(--fw-hover); }
.fw .fw-issue-symbol { color: var(--fw-danger); font-weight: 800; }
.fw .fw-issue-row strong { display: block; font-size: 13px; }
.fw .fw-issue-row small { display: block; color: var(--fw-muted); margin-top: 3px; font-size: 12px; }
.fw .fw-issue-count { text-align: right; font-size: 13px; font-weight: 700; }

.fw .fw-side-summary { padding: 16px; }
.fw .fw-side-summary h3 { margin: 0 0 14px; font-size: 14px; }
.fw .fw-summary-line { display: flex; justify-content: space-between; gap: 14px; font-size: 12px; padding: 8px 0; border-bottom: 1px solid var(--fw-border); }
.fw .fw-summary-line:last-of-type { border-bottom: 0; }
.fw .fw-summary-line span { color: var(--fw-muted); }
.fw .fw-summary-line strong { font-weight: 700; }
.fw .fw-side-summary .fw-primary { width: 100%; margin-top: 15px; }

.fw .fw-form-row { padding: 15px 17px; border-bottom: 1px solid var(--fw-border); display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 18px; align-items: center; }
.fw .fw-form-row:last-child { border-bottom: 0; }
.fw .fw-form-row label strong { display: block; font-size: 13px; }
.fw .fw-form-row label small { display: block; color: var(--fw-muted); font-size: 11px; margin-top: 3px; }
.fw .fw-field { width: 100%; border: 1px solid var(--fw-border); background: var(--fw-panel); color: var(--fw-text); border-radius: 5px; padding: 9px 10px; font-size: 13px; }

.fw .fw-rule-row { display: grid; grid-template-columns: 30px minmax(0,1fr) 98px; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--fw-border); }
.fw .fw-rule-row:last-child { border-bottom: 0; }
.fw .fw-rule-number { color: var(--fw-muted); font-size: 12px; }
.fw .fw-rule-row strong { display: block; font-size: 13px; }
.fw .fw-rule-row small { display: block; color: var(--fw-muted); font-size: 12px; margin-top: 3px; }
.fw .fw-rule-state { text-align: right; color: var(--fw-success); font-size: 12px; font-weight: 700; }

.fw .fw-ready { padding: 26px 20px; text-align: center; }
.fw .fw-ready-mark { width: 42px; height: 42px; margin: 0 auto 12px; border: 1px solid #bcdccb; background: var(--fw-success-bg); color: var(--fw-success); border-radius: 50%; display: grid; place-items: center; font-weight: 800; }
.fw .fw-ready h2 { margin: 0; font-size: 17px; }
.fw .fw-ready p { margin: 7px auto 18px; max-width: 430px; color: var(--fw-muted); font-size: 13px; line-height: 1.5; }

@media (max-width: 800px) {
  .fw { grid-template-columns: 72px minmax(0, 1fr); }
  .fw .fw-brand span, .fw .fw-workspace, .fw .fw-nav-label, .fw .fw-nav button span, .fw .fw-sidebar-foot { display: none; }
  .fw .fw-brand, .fw .fw-nav button { justify-content: center; }
  .fw .fw-main { padding: 22px 18px; }
  .fw .fw-table-head, .fw .fw-channel-row { grid-template-columns: minmax(170px, 1.5fr) 105px 90px 24px; }
  .fw .fw-table-head > :nth-child(4), .fw .fw-table-head > :nth-child(5), .fw .fw-channel-row > :nth-child(4), .fw .fw-channel-row > :nth-child(5) { display: none; }
}

@media (max-width: 560px) {
  .fw { grid-template-columns: 1fr; min-height: 740px; }
  .fw .fw-sidebar { display: none; }
  .fw .fw-main { padding: 18px 14px; }
  .fw .fw-head { align-items: center; }
  .fw .fw-head h1 { font-size: 22px; }
  .fw .fw-kpis { grid-template-columns: 1fr 1fr; }
  .fw .fw-kpi:last-child { display: none; }
  .fw .fw-toolbar { align-items: stretch; flex-direction: column; }
  .fw .fw-search { width: 100%; }
  .fw .fw-table-head { display: none; }
  .fw .fw-channel-row { grid-template-columns: minmax(0,1fr) auto 18px; min-height: 76px; }
  .fw .fw-channel-row > :nth-child(3), .fw .fw-channel-row > :nth-child(4), .fw .fw-channel-row > :nth-child(5) { display: none; }
  .fw .fw-agent-note { align-items: flex-start; flex-direction: column; }
  .fw .fw-drawer { width: 94%; }
  .fw .fw-stage-grid { grid-template-columns: 1fr; }
  .fw .fw-channel-header { flex-direction: column; }
  .fw .fw-steps { gap: 12px; overflow-x: auto; }
}

.fw .fw-extra[hidden], .fw [hidden] { display:none!important; }
.fw .fw-extra h2 {font-size:15px;margin:0 0 8px}
.fw .fw-extra p {color:var(--fw-muted);font-size:13px;line-height:1.6}
.fw .fw-split {display:grid;grid-template-columns:1.35fr 1fr;gap:20px}
.fw .fw-pad {padding:20px}
.fw .fw-data {width:100%;border-collapse:collapse;font-size:13px;text-align:left}
.fw .fw-data th {background:#f7f8f9;color:#68717d;font-size:12px;font-weight:550;padding:12px 14px;border-bottom:1px solid #e4e7eb}
.fw .fw-data td {padding:15px 14px;border-bottom:1px solid #e4e7eb;vertical-align:middle}
.fw .fw-data tr:last-child td {border-bottom:0}
.fw .fw-data small {display:block;color:#68717d;margin-top:5px;font-size:11px}
.fw .fw-link {border:0;background:none;color:var(--fw-accent);padding:0;text-align:left;cursor:pointer;font-size:13px}
.fw .fw-line {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 0;border-bottom:1px solid #e4e7eb;font-size:13px}
.fw .fw-line:last-child {border:0}
.fw .fw-line small {display:block;color:#68717d;font-size:12px;margin-top:5px}
.fw .fw-dot {width:8px;height:8px;border-radius:50%;background:#1c7c54;display:inline-block;margin-right:8px}
.fw .fw-bottomnote {font-size:12px;color:#68717d;margin-top:15px}
.fw .fw-modal-shade {position:fixed;inset:0;background:#18202a33;z-index:10;display:flex;align-items:flex-start;justify-content:center;padding:48px 20px;overflow:auto}
.fw .fw-modal {width:600px;max-width:100%;background:white;border:1px solid #e4e7eb;border-radius:8px;box-shadow:0 16px 60px #18202a22;padding:26px;color:#18202a}
.fw .fw-modal h2 {margin:0;font-size:20px}
.fw .fw-modal p {font-size:13px;color:#68717d;line-height:1.6}
.fw .fw-modal label {display:block;font-size:12px;margin:16px 0 6px}
.fw .fw-modal footer {display:flex;justify-content:flex-end;gap:9px;margin-top:24px}
.fw .fw-modal .fw-field {font:inherit;font-size:13px}
.fw .fw-table-head,.fw .fw-channel-row {grid-template-columns:minmax(150px,1.7fr) 95px 75px 100px 90px 12px;gap:8px;padding-left:12px;padding-right:12px}
.fw .fw-table {overflow:auto}
.fw .fw-channel-row,.fw .fw-table-head {min-width:640px}
.fw .fw-ovz {display:block;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--fw-border);padding:16px 0 14px;cursor:pointer;color:inherit}
.fw .fw-ovz:hover {background:var(--fw-hover)}
.fw .fw-ovz-kop {display:flex;align-items:center;gap:11px}
.fw .fw-ovz-naam {flex:1;min-width:0}
.fw .fw-ovz-naam strong {display:block;font-size:13px}
.fw .fw-ovz-naam small {display:block;color:var(--fw-muted);font-size:12px;margin-top:2px}
.fw .fw-ovz-tijd {color:var(--fw-muted);font-size:12px;white-space:nowrap}
.fw .fw-ovz-trechter {display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:12px 0 0;padding-left:45px}
.fw .fw-ovz-stap b {font-size:19px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fw .fw-ovz-stap small {color:var(--fw-muted);font-size:12px;margin-left:6px}
.fw .fw-ovz-eind b {color:var(--fw-accent)}
.fw .fw-ovz-min {color:var(--fw-danger);font-size:13px;font-weight:650;font-variant-numeric:tabular-nums}
.fw .fw-ovz-note {display:block;color:var(--fw-muted);font-size:12px;margin:8px 0 0;padding-left:45px}
.fw .fw-ovz-schuld {color:var(--fw-danger)}
.fw .fw-runbar {display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:12px;color:var(--fw-muted);border-top:1px solid var(--fw-border);border-bottom:1px solid var(--fw-border);padding:12px 0;margin-bottom:16px}
.fw .fw-runbar b {color:var(--fw-text);font-weight:650}
.fw .fw-diffstrip {display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--fw-panel-subtle);border:1px solid var(--fw-border);border-radius:var(--fw-radius);padding:12px 16px;font-size:13px;margin-bottom:20px}
.fw .fw-funnel-row {display:grid;grid-template-columns:96px minmax(0,1fr) 12px;align-items:baseline;gap:16px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--fw-border);padding:13px 0;cursor:pointer;color:inherit}
.fw .fw-funnel-row:last-child {border-bottom:0}
.fw .fw-funnel-row:hover {background:var(--fw-hover)}
.fw .fw-funnel-num {text-align:right;font-size:14px;font-weight:650;color:var(--fw-danger);font-variant-numeric:tabular-nums}
.fw .fw-funnel-stap .fw-funnel-num {font-size:26px;font-weight:600;letter-spacing:-.03em;color:var(--fw-text)}
.fw .fw-funnel-label strong {display:block;font-size:13px;font-weight:600}
.fw .fw-funnel-stap .fw-funnel-label strong {font-weight:550;color:var(--fw-muted)}
.fw .fw-funnel-label small {display:block;color:var(--fw-muted);font-size:12px;margin-top:4px;line-height:1.5}
.fw .fw-funnel-schuld .fw-funnel-label strong {color:var(--fw-danger)}
.fw .fw-funnel-nul .fw-funnel-num {color:var(--fw-muted)}
.fw .fw-ovz-nul {color:var(--fw-muted);font-weight:550}
.fw .fw-funnel-row .fw-chevron {color:var(--fw-muted);font-size:14px}
.fw .fw-veld {font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--fw-text)}
.fw .fw-chain-veld {margin:18px 0 0}
.fw .fw-chain {border-left:2px solid var(--fw-border);margin:8px 0 0;padding-left:14px}
.fw .fw-chain-step {padding:7px 0}
.fw .fw-chain-step b {display:block;font-size:11px;font-weight:650;color:var(--fw-muted);margin-bottom:4px}
.fw .fw-chain-step code {font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.6;background:var(--fw-panel-subtle);border-radius:4px;padding:3px 6px;display:inline-block;word-break:break-word}
.fw .fw-chain-open code {color:var(--fw-muted)}
.fw .fw-count {color:var(--fw-muted);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.fw .fw-demo {font-size:10px;letter-spacing:.06em;color:#68717d;margin-top:8px}
@media(max-width:800px){.fw .fw-split{grid-template-columns:1fr}.fw .fw-stage-grid{grid-template-columns:1fr}}

/* ── Aanvullingen op het ontwerp ─────────────────────────────────────────────
   Het ontwerp was één HTML-bestand met knoppen die JavaScript afvingen. Een
   server-gerenderde app navigeert met links, en er zijn toestanden die een
   ontwerp met verzonnen data niet kent: leeg, bezig, mislukt, en "dit scherm
   bestaat nog niet". Alleen daarvoor staat hier iets extra. */

.fw a { color: inherit; text-decoration: none; }

.fw-nav a {
  width: 100%; border: 0; background: transparent; color: var(--fw-muted);
  padding: 10px 11px; border-radius: 5px; display: flex; align-items: center;
  gap: 10px; text-align: left; font-size: 14px; font-weight: 550;
}
.fw-nav a[aria-current="page"] { background: var(--fw-panel); color: var(--fw-accent); font-weight: 700; }
.fw-nav a:hover { background: var(--fw-panel); }
.fw-nav svg { flex: 0 0 auto; }

/* Wat niet gebouwd is draagt dat als label (afspraak 04-09). Een grijs item dat
   nergens heen gaat is eerlijker dan een scherm dat doet alsof. */
.fw-nav .fw-nietgebouwd {
  width: 100%; padding: 10px 11px; display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 550; color: var(--fw-muted); opacity: .55;
}
.fw-nav .fw-nietgebouwd small {
  margin-left: auto; font-size: 9px; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--fw-border); border-radius: 3px; padding: 2px 5px;
  white-space: nowrap; line-height: 1;
}

.fw-tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  border-radius: 4px; padding: 3px 7px; background: var(--fw-panel-subtle);
  border: 1px solid var(--fw-border); color: var(--fw-muted); white-space: nowrap;
}
.fw-tag-goed { background: var(--fw-success-bg); border-color: transparent; color: var(--fw-success); }
.fw-tag-let { background: var(--fw-warning-bg); border-color: transparent; color: var(--fw-warning); }
.fw-tag-stop { background: var(--fw-danger-bg); border-color: transparent; color: var(--fw-danger); }

a.fw-link, .fw a.fw-link { color: var(--fw-accent); font-size: 13px; }
a.fw-primary, a.fw-secondary { display: inline-block; text-decoration: none; }
a.fw-primary { color: #fff; }
.fw-primary[disabled], .fw-secondary[disabled] { opacity: .45; cursor: not-allowed; }

.fw-paginering { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 12px; color: var(--fw-muted); }

.fw-leeg {
  border: 1px dashed var(--fw-border); border-radius: var(--fw-radius);
  padding: 28px; text-align: center; color: var(--fw-muted); font-size: 13px;
}

/* De herkomstketen staat in een la, niet in een modaal: hij is lang, en je wilt
   het product ernaast houden terwijl je hem leest. */

/* Het htmx-doel zit binnen .fw (anders erft de la geen tokens en geen font),
   maar mag daar geen grid-item worden: leeg zou het een tweede rij openen en
   de zijbalk halveren. */
#fw-la { display: contents; }

.fw-la {
  position: fixed; inset: 0 0 0 auto; width: min(560px, 90vw); background: var(--fw-panel);
  border-left: 1px solid var(--fw-border); box-shadow: -14px 0 45px rgb(0 0 0 / 13%);
  /* Geen padding-top: die zit in .fw-la-kop, anders blijft de meelopende kop
     26px onder de rand van de la hangen in plaats van eraan vast te plakken. */
  padding: 0 28px 40px; z-index: 20; overflow: auto;
}
.fw-la h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }

/* De kop loopt mee: full-bleed getrokken uit de padding van de la, met rechts
   ruimte vrij voor de sluitknop (het ontwerp doet dat op .fw-drawer-title). */
.fw-la-kop {
  position: sticky; top: 0; z-index: 1; background: var(--fw-panel);
  margin: 0 -28px 18px; padding: 22px 56px 14px 28px;
  border-bottom: 1px solid var(--fw-border);
}
.fw-la-onder { color: var(--fw-muted); font-size: 13px; margin: 4px 0 0; }
.fw-la-sluit {
  position: absolute; right: 18px; top: 16px; border: 0; background: none;
  font-size: 22px; line-height: 1; color: var(--fw-muted); cursor: pointer;
  text-decoration: none;
}
.fw-la-sluit:hover { color: var(--fw-text); }
.fw-leegwaarde { color: var(--fw-muted); }

/* Een ingeklapte lange waarde. Dicht toont hij de eerste regels plus een
   opener; open verdwijnt het voorproefje zodat er niets dubbel staat. */
.fw .fw-lang > summary { list-style: none; cursor: pointer; display: block; }
.fw .fw-lang > summary::-webkit-details-marker { display: none; }
.fw .fw-lang .fw-meer {
  display: inline-block; margin-top: 5px; font-size: 12px; color: var(--fw-accent);
}
/* Het voorproefje is twee regels hoog, niet 260 tekens lang: anders is
   inklappen alsnog een half scherm. */
.fw .fw-lang-kort {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.fw .fw-lang[open] > summary .fw-lang-kort { display: none; }

/* Proza in de UI-font; monospace blijft de standaard voor codes en ids.
   pre-wrap is geen detail: regel 46 bestaat om een dubbele spatie weg te
   halen, en zonder dit vouwt HTML dat dicht en lijkt de voor-en-na identiek. */
.fw code.fw-w-prosa {
  font-family: inherit; font-size: 13px; line-height: 1.5; white-space: pre-wrap;
}
.fw code.fw-w-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  line-height: 1.55; word-break: break-word; white-space: pre-wrap;
}
.fw .fw-lang[open] > summary .fw-meer::before { content: "minder — "; color: var(--fw-muted); }

/* De regelloop in de productla: per regel één blok, in de volgorde waarin de
   run hem draaide. Het ontwerp kende deze vorm nog niet — daar was de la kort
   (kanaaldetails). Variant B, gekozen 06-09 uit outputs/la-varianten.html. */
.fw .fw-la h3 { font-size: 13px; margin: 22px 0 4px; }
.fw .fw-la-uitleg { font-size: 12px; color: var(--fw-muted); margin: 0 0 6px; line-height: 1.55; }

.fw .fw-rl { padding: 9px 0 10px; border-bottom: 1px solid #f0f2f4; }
.fw .fw-rl:last-of-type { border-bottom: 0; }
.fw .fw-rl-kop { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.fw .fw-rl-nr {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  color: #fff; background: #c3cad2; border-radius: 4px; padding: 1px 5px; font-weight: 600;
}
.fw .fw-rl-naam { font-size: 12.5px; font-weight: 650; letter-spacing: -.01em; flex: 1; line-height: 1.3; }
.fw .fw-rl-aantal { font-size: 10.5px; color: #9aa2ac; white-space: nowrap; }

.fw .fw-rl-rij { display: flex; gap: 10px; padding: 3px 0 3px 27px; align-items: baseline; }
.fw .fw-rl-veld {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  color: var(--fw-muted); width: 150px; flex: none; word-break: break-word;
}
.fw .fw-rl-waarde, .fw .fw-rl-voorna { flex: 1; min-width: 0; }

/* Een overschrijving is het enige moment waarop voor-en-na iets toevoegt. */
.fw .fw-rl-herschreven {
  background: var(--fw-warning-bg); border-radius: 5px;
  padding: 6px 8px 6px 27px; margin: 4px 0;
}
.fw .fw-rl-voor { display: block; opacity: .55; text-decoration: line-through; }
.fw .fw-rl-pijl { display: block; font-size: 11px; color: var(--fw-warning); margin: 2px 0; }
.fw .fw-rl-na { display: block; }

/* De bron is invoer en geen uitkomst: dichtgeklapt, maar niet weg. */
.fw .fw-bronblok { margin-top: 18px; border-top: 1px solid var(--fw-border); padding-top: 12px; }
.fw .fw-bronblok > summary { list-style: none; cursor: pointer; font-size: 12px; color: var(--fw-accent); }
.fw .fw-bronblok > summary::-webkit-details-marker { display: none; }

.fw-kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 14px; font-size: 13px; margin: 14px 0; }
.fw-kv dt { color: var(--fw-muted); }
.fw-kv dd { margin: 0; word-break: break-word; }

.fw-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* htmx: een knop die iets echt doet mag niet stilstaan terwijl het gebeurt. */
.fw-bezig { display: none; }
.htmx-request .fw-bezig { display: inline; }
.htmx-request .fw-klaar { display: none; }

/* Dezelfde la, maar dan als pagina (zonder htmx, of via een gedeelde link). */
.fw-main .fw-la {
  position: static; width: auto; inset: auto; box-shadow: none;
  border-left: 0; padding: 0; overflow: visible;
}
/* Als pagina scrolt het werkblad, niet de la: dan hoort de kop gewoon mee te
   scrollen en moeten de negatieve marges eruit. */
.fw-main .fw-la-kop {
  position: relative; margin: 0 0 18px; padding: 0 56px 14px 0;
}

/* Het ontwerp had tabs als knop; hier zijn het links naar een gefilterde URL. */
.fw-tabs a {
  color: var(--fw-muted); padding: 7px 10px; border-radius: 4px; font-size: 13px;
}
.fw-tabs a[aria-selected="true"] {
  background: var(--fw-panel); color: var(--fw-text);
  box-shadow: inset 0 0 0 1px var(--fw-border); font-weight: 700;
}

/* Regels wijzigen. De knoppen staan in de rij zelf: volgorde is betekenis, dus
   verplaatsen hoort net zo dichtbij te zitten als lezen. Elk knopje is een eigen
   formulier met een POST erachter — zonder JavaScript, net als de rest. */
.fw .fw-regels td {padding-top:11px;padding-bottom:11px}
.fw .fw-regels tr.fw-uit td {opacity:.55}
.fw .fw-acties {white-space:nowrap;text-align:right;width:1%}
.fw .fw-acties form {display:inline}
.fw .fw-acties button {font-size:12px;padding:4px 8px;margin-left:4px;border:1px solid var(--fw-border);
  background:var(--fw-panel);border-radius:5px;color:var(--fw-muted);cursor:pointer}
.fw .fw-acties button:hover:not(:disabled) {background:var(--fw-hover);color:var(--fw-text)}
.fw .fw-acties button:disabled {opacity:.35;cursor:default}
.fw .fw-editor {width:100%;box-sizing:border-box;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;line-height:1.55;tab-size:2;padding:12px 14px;border:1px solid var(--fw-border);
  border-radius:var(--fw-radius);background:var(--fw-panel-subtle);color:var(--fw-text);
  white-space:pre;overflow-wrap:normal;overflow-x:auto}
.fw .fw-editor:focus {outline:2px solid var(--fw-accent);outline-offset:-1px;background:var(--fw-panel)}
.fw .fw-kpis-4 {grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width: 1180px) { .fw .fw-kpis-4 {grid-template-columns:1fr 1fr} }

/* Application visual system. The original HTML concept is a historical reference. */
html, body { margin:0; padding:0; background:#f7f8fa; }
.fw { --fw-accent:#245c49; --fw-bg:#f7f8fa; --fw-text:#202a32; --fw-muted:#727b83; --fw-border:#e5e9eb; --fw-panel-subtle:#f6f8f8; --fw-hover:#f5f9f7; --fw-radius:12px; grid-template-columns:236px minmax(0,1fr); height:100dvh; font-size:14px; -webkit-font-smoothing:antialiased; }
.fw a { text-decoration:none; }
.fw :is(a,button,input,select,textarea,summary):focus-visible { outline:3px solid #439176; outline-offset:3px; }
.fw-skip { position:fixed; left:20px; top:-80px; z-index:100; padding:12px 18px; background:white; color:#245c49; }
.fw-skip:focus { top:12px; }
.fw .fw-sidebar { background:#fff; padding:30px 18px 22px; }
.fw .fw-brand { color:#243c33; font-size:24px; letter-spacing:-1px; padding:0 12px 34px; }
.fw .fw-mark { width:32px; height:34px; background:#245c49; border-radius:9px; font-size:28px; letter-spacing:-4px; display:flex; justify-content:center; align-items:center; padding-right:4px; }
.fw .fw-mark .fw-mark-dot { display:inline; color:#c4edb7; }
.fw .fw-workspace { margin:0 0 28px; padding:13px 12px; border-radius:9px; font-weight:600; }
.fw .fw-nav-label { font-size:10px; letter-spacing:.1em; font-weight:600; padding:0 12px 10px; color:#91989d; }
.fw .fw-nav { gap:5px; }
.fw .fw-nav a { padding:12px; border-radius:7px; font-size:13px; font-weight:500; }
.fw .fw-nav a[aria-current="page"] { background:#edf4ef; color:#245c49; font-weight:650; }
.fw .fw-nav a:hover { background:#f4f7f5; }
.fw .fw-nietgebouwd { font-size:12px; padding:12px; }
.fw .fw-nietgebouwd small { font-size:8px; }
.fw .fw-sidebar-foot { border-top:1px solid var(--fw-border); padding-top:20px; }
.fw .fw-main { padding:0 40px 48px; }
.fw .fw-contextbar { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--fw-border); color:#59636c; font-size:12px; margin-bottom:36px; }
.fw .fw-context-divider { color:#b7bdc2; margin:0 14px; }
.fw .fw-context-caption { color:#91989d; font-size:11px; }
.fw .fw-head { align-items:center; margin-bottom:28px; }
.fw .fw-head h1 { font-size:29px; font-weight:650; letter-spacing:-1px; margin:0 0 9px; }
.fw .fw-head p { line-height:1.65; max-width:660px; font-size:13px; }
.fw .fw-eyebrow { color:var(--fw-accent); font-size:11px; font-weight:650; margin-bottom:10px; }
.fw h2 { font-size:15px; letter-spacing:-.2px; font-weight:650; margin:0 0 7px; }
.fw p { font-size:13px; line-height:1.65; color:var(--fw-muted); margin:0 0 14px; }
.fw :is(.fw-primary,.fw-secondary) { border-radius:7px; padding:11px 16px; font-size:12px; font-weight:600; line-height:1.3; }
.fw .fw-primary { box-shadow:0 2px 3px #17362a15; }
.fw .fw-primary:hover:not(:disabled) { background:#194533; }
.fw .fw-secondary:hover:not(:disabled) { background:#f4f7f5; border-color:#c8d5cd; }
.fw .fw-kpis { border:0; gap:18px; margin-bottom:28px; }
.fw .fw-kpi { padding:22px 24px; margin:0; border:1px solid var(--fw-border); background:white; border-radius:12px; }
.fw .fw-kpi:last-child { border:1px solid var(--fw-border); }
.fw .fw-kpi span { font-size:12px; font-weight:500; }
.fw .fw-kpi strong { font-size:32px; font-weight:600; margin:13px 0 10px; line-height:1; }
.fw .fw-kpi small { font-size:11px; }
.fw .fw-pad { padding:24px; }
.fw .fw-section-box { box-shadow:0 2px 3px #202a3202; }
.fw .fw-ovz { padding:23px 4px; margin-top:18px; }
.fw .fw-ovz-naam strong { font-size:14px; }
.fw .fw-logo { width:40px; height:40px; border-radius:10px; }
.fw .fw-ovz-trechter { padding-left:51px; margin-top:24px; gap:14px 24px; }
.fw .fw-ovz-stap b { font-size:26px; font-weight:600; }
.fw .fw-ovz-stap small { font-size:11px; }
.fw .fw-ovz-note { padding-left:51px; margin-top:16px; line-height:1.6; }
.fw .fw-tag { letter-spacing:0; font-weight:550; font-size:10px; border-radius:5px; padding:5px 8px; }
.fw .fw-empty-note { border-top:1px solid var(--fw-border); padding-top:18px; margin:18px 0 0; }
.fw .fw-runbar { background:#fff; border:1px solid var(--fw-border); border-radius:9px; padding:16px 20px; gap:10px 22px; }
.fw .fw-diffstrip { background:#eff4f2; border-color:#dce8e0; line-height:1.6; }
.fw .fw-funnel-row { padding:16px 8px; gap:18px; }
.fw .fw-funnel-stap .fw-funnel-num { font-size:28px; }
.fw .fw-funnel-row:last-child { background:#f0f6f2; border-radius:8px; margin-top:10px; }
.fw .fw-funnel-row:last-child .fw-funnel-num { color:var(--fw-accent); }
.fw .fw-data th { padding:14px 18px; font-size:11px; background:#fafbfc; }
.fw .fw-data td { padding:17px 18px; line-height:1.5; }
.fw .fw-data tbody tr:hover { background:var(--fw-hover); }
.fw .fw-table-head,.fw .fw-channel-row { grid-template-columns:minmax(180px,1.5fr) minmax(140px,1fr) 85px minmax(115px,1fr) 115px 12px; min-width:860px; padding:16px 20px; gap:18px; }
.fw .fw-table-head { height:auto; font-size:10px; text-transform:none; letter-spacing:0; background:#fafbfc; }
.fw .fw-status { font-size:11px; line-height:1.5; }
.fw .fw-status::before { flex-shrink:0; }
.fw .fw-toolbar { margin-bottom:18px; }
.fw .fw-tabs { background:#eaf0ed; border-radius:8px; padding:4px; width:fit-content; }
.fw .fw-tabs a { padding:9px 16px; font-size:12px; }
.fw .fw-tabs a[aria-selected="true"] { border-radius:5px; box-shadow:0 1px 3px #202a3212; }
.fw .fw-search { width:260px; padding:11px 13px; border-radius:7px; }
.fw .fw-la { box-shadow:-18px 0 60px #202a3214; }
@media(min-width:1600px) { .fw .fw-main { padding-left:64px; padding-right:64px; } }
@media(max-width:1100px) { .fw { grid-template-columns:205px minmax(0,1fr); } .fw .fw-main { padding:0 24px 32px; } .fw .fw-split { grid-template-columns:1fr; } .fw .fw-ovz-tijd { display:none; } .fw .fw-header-actions { flex-wrap:wrap; } }
@media(max-width:800px) { .fw { grid-template-columns:76px minmax(0,1fr); } .fw .fw-sidebar { padding:24px 10px; } .fw .fw-brand { padding:0 0 28px; justify-content:center; } .fw .fw-nav a { justify-content:center; } .fw .fw-nav a span,.fw .fw-nietgebouwd { display:none; } .fw .fw-kpis { gap:10px; } .fw .fw-kpi { padding:16px; } .fw .fw-head { flex-wrap:wrap; } .fw .fw-context-caption { display:none; } }
@media(max-width:560px) { .fw { display:block; height:auto; min-height:100dvh; overflow:visible; } .fw .fw-sidebar { display:flex; padding:12px; border-right:0; border-bottom:1px solid var(--fw-border); } .fw .fw-brand { display:none; } .fw .fw-nav { display:flex; overflow-x:auto; gap:4px; } .fw .fw-nav a { flex:0 0 auto; padding:10px; } .fw .fw-nav a span { display:inline; font-size:11px; } .fw .fw-nav svg { display:none; } .fw .fw-sidebar nav[aria-label="Beheer"] { display:none; } .fw .fw-main { padding:0 16px 32px; overflow:visible; } .fw .fw-contextbar { min-height:50px; margin-bottom:24px; } .fw .fw-head h1 { font-size:25px; } .fw .fw-kpis,.fw .fw-kpis-4 { grid-template-columns:1fr; } .fw .fw-kpi:last-child { display:block; } .fw .fw-kpi { display:grid; grid-template-columns:1fr auto; gap:7px; } .fw .fw-kpi strong { grid-column:2; grid-row:1 / 3; margin:0; align-self:center; font-size:27px; } .fw .fw-kpi small { margin:0; } .fw .fw-pad { padding:18px; } .fw .fw-ovz-kop { flex-wrap:wrap; } .fw .fw-ovz-trechter,.fw .fw-ovz-note { padding-left:0; } .fw .fw-ovz-stap b { font-size:21px; } .fw .fw-ovz-stap small { display:block; margin:5px 0 0; } .fw .fw-diffstrip { flex-wrap:wrap; } .fw .fw-search { width:100%; } .fw .fw-funnel-row { grid-template-columns:62px minmax(0,1fr) 10px; gap:10px; } }

/* Links are the actual channel navigation, including the selected step. */
.fw .fw-step[aria-current="page"] { color:var(--fw-accent); border-bottom-color:var(--fw-accent); font-weight:650; }
.fw .fw-step { padding:12px 2px; white-space:nowrap; }
.fw .fw-channel-header { align-items:center; }
.fw .fw-channel-heading h1 { font-size:28px; font-weight:650; }
.fw .fw-section-box .fw-section-title { padding:0 0 18px; }
.fw .fw-line > * { min-width:0; overflow-wrap:anywhere; }
.fw .fw-line > .fw-link { flex-shrink:0; }
.fw .fw-header-actions form { max-width:100%; }
.fw .fw-table .fw-data { min-width:640px; }
@media(max-width:560px) {
  .fw .fw-channel-header { align-items:flex-start; }
  .fw .fw-header-actions { width:100%; }
  .fw .fw-header-actions form { flex-wrap:wrap; }
  .fw .fw-runbar { gap:12px; }
  .fw .fw-line { align-items:flex-start; flex-wrap:wrap; }
  .fw .fw-la { width:100vw; padding-left:20px; padding-right:20px; }
  .fw .fw-la-kop { margin-left:-20px; margin-right:-20px; padding-left:20px; }
  .fw .fw-rl-rij { padding-left:0; flex-direction:column; gap:4px; }
  .fw .fw-rl-veld { width:auto; }
  .fw .fw-main .fw-la { width:auto; }
  .fw .fw-main .fw-la-kop { margin-left:0; margin-right:0; }
}

/* Rule builder: the engine's cases, branches and conditions as editable controls. */
.fw .rb-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:24px; align-items:start; }
.fw .rb-form { min-width:0; display:grid; gap:18px; }
.fw .rb-label { display:block; font-size:12px; font-weight:650; margin-bottom:9px; }
.fw .rb-check { display:flex; align-items:center; gap:9px; font-size:12px; margin:14px 0; }
.fw .rb-note { display:block; font-size:11px; line-height:1.65; color:var(--fw-muted); margin:9px 0; }
.fw .rb-preview { position:sticky; top:20px; max-height:calc(100dvh - 40px); overflow:auto; }
.fw #rb-cases { display:grid; gap:18px; }
.fw .rb-case-header { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--fw-border); background:#fafbfa; }
.fw .rb-case-header h2 { margin:0; }
.fw .rb-section { display:grid; grid-template-columns:55px minmax(0,1fr); gap:12px; padding:22px; border-bottom:1px solid var(--fw-border); }
.fw .rb-badge { font-size:10px; font-weight:750; color:var(--fw-accent); background:#eaf3ed; padding:6px 8px; border-radius:5px; height:fit-content; text-align:center; }
.fw .rb-badge-else { background:#f3f0e9; color:#806630; }
.fw .rb-condition { margin-top:10px; min-width:0; }
.fw .rb-condition .rb-condition { border-left:2px solid #dce7df; padding-left:12px; }
.fw .rb-condition-wrap { display:flex; align-items:flex-start; gap:5px; }
.fw .rb-condition-wrap > .rb-condition { flex:1; }
.fw .rb-condition-fields,.fw .rb-action-fields { display:grid; gap:8px; min-width:0; }
.fw .rb-group-head { margin:12px 0; }
.fw .rb-tools { display:flex; gap:7px; flex-wrap:wrap; margin:9px 0; }
.fw .rb-small { border:0; background:transparent; color:var(--fw-accent); font-size:11px; cursor:pointer; padding:7px 4px; text-align:left; }
.fw .rb-small:hover { text-decoration:underline; }
.fw .rb-action { display:grid; grid-template-columns:18px minmax(0,1fr) 20px; gap:7px; padding:14px 0; border-bottom:1px solid var(--fw-border); }
.fw .rb-action:first-child { padding-top:0; }
.fw .rb-action-index { color:#919d95; font-size:11px; padding-top:12px; }
.fw .rb-row-tools { display:flex; flex-direction:column; }
.fw .rb-case-footer { padding:12px 22px; }
.fw .rb-savebar { display:flex; align-items:center; gap:16px; padding:18px 0; }
.fw .rb-savebar span { font-size:11px; color:var(--fw-muted); line-height:1.6; }
.fw .rb-add-case { justify-self:start; }
.fw .rb-advanced { padding:12px; border:1px dashed #cdd9d2; border-radius:7px; font-size:12px; }
.fw .rb-advanced pre { overflow:auto; font-size:11px; max-height:220px; }
.fw #rb-feedback { white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; line-height:1.6; margin-top:18px; }
.fw .rb-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:20px 0 10px; }
.fw .rb-stats strong { display:block; font-size:24px; font-weight:600; }
.fw .rb-stats small { font-size:10px; color:var(--fw-muted); }
.fw .rb-example { border-top:1px solid var(--fw-border); padding:16px 0; font-size:12px; overflow-wrap:anywhere; }
.fw .rb-diff { display:grid; gap:6px; padding:10px 0; }
.fw .rb-diff code { font-size:10px; color:var(--fw-muted); }
.fw .rb-diff del { color:#97756a; background:#fff5f0; padding:6px; }
.fw .rb-diff ins { text-decoration:none; color:#245c49; background:#edf6ef; padding:6px; }
.fw .rb-error { color:var(--fw-danger); }
.fw .rb-form .fw-field { width:100%; min-width:0; box-sizing:border-box; font:inherit; font-size:12px; border:1px solid var(--fw-border); border-radius:6px; padding:10px 12px; background:white; color:var(--fw-text); }
@media(min-width:1450px) { .fw .rb-condition-fields { grid-template-columns:1fr 1fr; } .fw .rb-condition-fields > :last-child { grid-column:1 / -1; } }
@media(max-width:1100px) { .fw .rb-layout { grid-template-columns:1fr; } .fw .rb-preview { position:static; max-height:none; } }
@media(max-width:560px) { .fw .rb-section { padding:16px; grid-template-columns:1fr; } .fw .rb-badge { width:fit-content; } .fw .rb-savebar { flex-wrap:wrap; } }
.fw .rb-values { grid-column:1 / -1; }
.fw .rb-form .rb-values-input { resize:vertical; font-family:ui-monospace,monospace; font-size:12px; line-height:1.9; background:#fafcfa; }
.fw .rb-form { align-content:start; }
/* De deur: inloggen, uitnodiging, kiezer. Geen werkruimte, dus geen zijbalk. */
.fw.fw-kaal { display:block; min-height:100vh; background:var(--fw-panel-subtle); padding:64px 16px; }
.fw .fw-kaal-kader { max-width:440px; margin:0 auto; background:var(--fw-panel); border:1px solid var(--fw-border); border-radius:var(--fw-radius); padding:28px 28px 22px; display:grid; gap:16px; }
.fw .fw-kaal-kader .fw-brand { padding:0 0 4px; }
.fw .fw-kaal-kader h1 { font-size:20px; margin:0; }
.fw .fw-kiezer { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.fw .fw-kiezer-rij { width:100%; text-align:left; display:grid; gap:4px; padding:12px 14px; border:1px solid var(--fw-border); border-radius:var(--fw-radius); background:var(--fw-panel); color:var(--fw-text); font:inherit; cursor:pointer; }
.fw .fw-kiezer-rij:hover, .fw .fw-kiezer-rij[aria-current] { border-color:var(--fw-accent); background:var(--fw-hover); }
.fw .fw-kiezer-rij span { color:var(--fw-muted); font-size:12px; }
.fw .fw-kiezer-rij .fw-tag { width:fit-content; }
/* De wisselaar en uitloggen onderin de zijbalk. */
.fw .fw-account { display:grid; gap:8px; margin-top:10px; }
.fw .fw-account form { display:flex; gap:6px; }
.fw .fw-account select { min-width:0; flex:1; }
.fw .fw-account-wie { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }