/* Astra CAD — Apple-style UI */
:root {
  --bg: #f5f5f7;
  --card: #ffffff;
  --fg: #1d1d1f;
  --muted: #6e6e73;
  --line: rgba(0, 0, 0, .08);
  --line-strong: rgba(0, 0, 0, .14);
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --tint: #eaf2ff;
  --ok: #248a3d; --ok-bg: #e8f7ec;
  --err: #d70015; --err-bg: #fdeceb;
  --radius: 14px;
  --radius-sm: 10px;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  --shadow: 0 2px 12px rgba(0, 0, 0, .04), 0 0 0 1px rgba(0, 0, 0, .03);
  --shadow-hover: 0 14px 36px rgba(0, 0, 0, .10), 0 0 0 1px rgba(0, 0, 0, .03);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* reserve the scrollbar's space so switching between a long and a short tab does not shift the page */
html { scrollbar-gutter: stable; }
/* Safari before 18.2 ignores scrollbar-gutter: keep the scrollbar track there, so unfolding a run does not shift the page */
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }
html, body { margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Inter, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; color: inherit; }
::selection { background: rgba(0, 113, 227, .2); }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 28px; background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line); }
.topbar.scroll-header { transition: transform .22s ease; }
.topbar.scroll-header.is-scroll-hidden:not(:focus-within) { transform: translateY(-100%); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .topbar.scroll-header { transition: none; } }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--fg); }
.brand:hover { text-decoration: none; }
.brand .dot { width: 26px; height: 26px; border-radius: 8px; background: var(--fg); color: #fff; font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.brand .dot::before { content: "A"; }
.brand .logo { height: 24px; width: auto; display: block; }
.authbox .brand .logo { height: 30px; }
.userbox { display: flex; align-items: center; gap: 12px; font-size: 14px; }
/* customer portal on a box: Beheer opens the admin screen; there it becomes the way back to the dashboard */
.beheerknop { display: inline-flex; align-items: center; gap: 6px; }
.beheerknop.open { background: var(--fg); color: var(--card); border-color: var(--fg); }
@media (max-width: 480px) { .beheerknop span { display: none; } .beheerknop { padding: 8px 10px; } }   /* a phone: only the icon */
.iconbtn { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .05);
  display: inline-flex; align-items: center; justify-content: center; color: var(--fg); transition: background .15s; }
.iconbtn:hover { background: rgba(0, 0, 0, .09); text-decoration: none; }

/* ---------- page ---------- */
.page { max-width: 1040px; margin: 0 auto; padding: 56px 28px 96px; }
h1 { text-wrap: balance; font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 8px; }
h2 { text-wrap: balance; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 56px 0 16px; }
.sub { color: var(--muted); font-size: 17px; margin: 0 0 32px; max-width: 640px; }
.eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-family: var(--mono); }
.muted { color: var(--muted); }

/* the dashboard greeting replaces a plain "Skills" heading; it types itself out on load */
.greet { margin: 0 0 32px; min-height: 1.1em; }
.greet .greet-sub { display: block; margin-top: 10px; font-size: 19px; font-weight: 400; line-height: 1.4; letter-spacing: -0.01em; color: var(--muted); }
.greet .greet-line { display: block; min-height: 1.1em; }
.greet.typing .greet-line::after { content: ''; display: inline-block; width: 3px; height: .85em; margin-left: 3px; background: currentColor;
  vertical-align: -0.1em; animation: caret 1s step-end infinite; }
.greet .greet-sub { animation: greetin .5s ease-out both; }
@keyframes greetin { from { opacity: 0; transform: translateY(4px); } }
@keyframes caret { 50% { opacity: 0; } }

/* ---------- skill cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 18px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; text-align: left;
  box-shadow: var(--shadow); transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.card:active { transform: translateY(-1px) scale(.995); }
.card .icon { width: 44px; height: 44px; border-radius: 10px; background: var(--tint); color: var(--accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.card .icon svg { width: 22px; height: 22px; }
.card h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.card .io { margin-top: auto; padding-top: 18px; }

/* a skill card can show a photo instead of the icon tile; text moves onto a dark gradient */
.card.photocard { min-height: 260px; justify-content: flex-end; background-size: cover; background-position: center; color: #fff; }
.card.photocard::before { content: ''; position: absolute; inset: 0; border-radius: inherit;
  /* één zwarte gloed vanuit linksonder, voor elke kaart gelijk: de tekst staat altijd op donker, hoe licht de foto ook is */
  background:
    radial-gradient(ellipse 125% 115% at 0% 100%, rgba(8, 10, 13, .97) 0%, rgba(8, 10, 13, .9) 38%, rgba(8, 10, 13, .5) 68%, rgba(8, 10, 13, 0) 92%),
    linear-gradient(180deg, rgba(8, 10, 13, .3), rgba(8, 10, 13, .38)); }
.card.photocard > * { position: relative; }
.card.photocard h3, .card.photocard .cardfoot .go { color: #fff; }
.card.photocard p { color: rgba(255, 255, 255, .82); }
.card.photocard .skillflow { color: #fff; margin-top: 14px; }
.card.photocard .skillflow .arrow { color: rgba(255, 255, 255, .6); }
.card.photocard .skillflow .outs { color: #fff; }
.card.photocard .cardfoot { border-top-color: rgba(255, 255, 255, .25); }
.card.photocard .ws { color: rgba(255, 255, 255, .85); }
.card.photocard .corner { background: rgba(0, 0, 0, .4); color: #fff; }
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tag { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; font-family: var(--mono);
  background: rgba(0, 0, 0, .05); color: var(--fg); }
.tag.out { background: var(--tint); color: var(--accent); }
.tags .arrow { color: var(--muted); font-size: 13px; margin: 0 2px; }

/* ---------- tables ---------- */
.tablewrap { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-family: var(--mono); background: #fafafa; }
td.muted { color: var(--muted); }
.empty { color: var(--muted); padding: 36px 24px; background: var(--card); border-radius: var(--radius); text-align: center; box-shadow: var(--shadow); }
.pill { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 600; font-family: var(--mono); letter-spacing: .03em; background: rgba(0, 0, 0, .05); }
.pill.done { color: var(--ok); background: var(--ok-bg); }
.pill.error { color: var(--err); background: var(--err-bg); }
.pill.running { color: var(--muted); }

/* ---------- forms ---------- */
label { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin: 20px 0 8px; }
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), textarea, select { width: 100%; padding: 12px 14px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); font: inherit; background: #fff; color: var(--fg); transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
textarea { resize: vertical; min-height: 80px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0, 113, 227, .18); }
input::placeholder, textarea::placeholder { color: #a1a1a6; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; min-height: 44px;
  border-radius: 10px; border: 0; background: var(--accent); color: #fff; font-weight: 500; font-size: 15px; text-decoration: none;
  transition: background .15s, transform .15s, opacity .15s; }
.btn:hover { background: var(--accent-hover); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn.ghost { background: rgba(0, 0, 0, .05); color: var(--fg); }
.btn.ghost:hover { background: rgba(0, 0, 0, .09); }
.btn.block { width: 100%; margin-top: 24px; }
.btn.sm { padding: 8px 16px; min-height: 34px; font-size: 14px; }
.link { background: none; border: 0; color: var(--accent); padding: 0; font-size: inherit; }
.link:hover { text-decoration: underline; }
.link.danger, .danger { color: var(--err); }

/* ---------- segmented controls (language, tabs) ---------- */
.langswitch, .tabs { display: inline-flex; background: rgba(0, 0, 0, .06); border-radius: 10px; padding: 3px; gap: 2px; }
.langswitch button, .tabs button { border: 0; background: transparent; border-radius: 7px; padding: 5px 12px; font-size: 12px; font-weight: 600;
  color: var(--muted); letter-spacing: .04em; font-family: var(--mono); transition: background .15s, color .15s, box-shadow .15s; flex: none; }
.langswitch button.on, .tabs button.active { background: #fff; color: var(--fg); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.tabs { margin: 0 0 32px; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }   /* more tabs than a phone is wide: scroll the bar itself, never the page */
.panel { display: none; }
.panel.active { display: block; }
.tabs button { padding: 8px 18px; font-size: 14px; letter-spacing: 0; }

/* ---------- modal ---------- */
.backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; animation: fade .18s ease-out; }
.modal { background: var(--card); border-radius: 24px; width: 100%; max-width: 540px; padding: 32px;
  position: relative; box-shadow: 0 30px 80px rgba(0, 0, 0, .22); max-height: 92vh; overflow: auto; animation: pop .22s cubic-bezier(.2, .8, .2, 1);
  transition: max-width .22s cubic-bezier(.2, .8, .2, 1); }   /* switching tabs (e.g. into Statistieken) can widen the modal; resize smoothly instead of snapping */
.modal.wide { max-width: 680px; }
.modal .close { position: absolute; top: 16px; right: 16px; border: 0; background: rgba(0, 0, 0, .05); width: 30px; height: 30px; border-radius: 50%; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.modal .close:hover { background: rgba(0, 0, 0, .1); color: var(--fg); }
.modal h3 { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; padding-right: 36px; }
.modal .desc { color: var(--muted); margin: 0 0 22px; font-size: 14px; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.slots { display: flex; flex-direction: column; gap: 14px; }
.slotlabel { font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.drop { border: 1.5px dashed var(--line-strong); border-radius: 14px; padding: 34px 20px; text-align: center; background: #fafafa;
  color: var(--muted); cursor: pointer; transition: .15s; font-size: 14px; }
.drop strong { color: var(--fg); font-weight: 500; }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--tint); color: var(--accent); }
.drop.small { padding: 18px; }
.file { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #fafafa; border-radius: 12px; font-size: 14px; }
.file svg { color: var(--accent); flex: none; }
.file .size { color: var(--muted); margin-left: auto; font-size: 13px; }
.file button { border: 0; background: none; color: var(--muted); padding: 0 2px; }
.file button:hover { color: var(--fg); }
.files { display: flex; flex-direction: column; gap: 6px; }
.files .file { padding: 8px 14px; }
.files .meer-info { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); padding: 2px 4px; }
.files .meer-info button { border: 0; background: none; color: var(--accent); padding: 0; font-size: 13px; cursor: pointer; }
.io { font-size: 13px; color: var(--muted); }

.steps { list-style: none; margin: 20px 0 0; padding: 0; }
.steps li { display: flex; align-items: center; gap: 14px; padding: 10px 0; color: var(--muted); font-size: 15px; }
.steps li.active { color: var(--fg); font-weight: 500; }
.steps li.done { color: var(--ok); }
.spinner { width: 18px; height: 18px; border: 2px solid rgba(0, 0, 0, .1); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
.steps li .dotstep { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .12); flex: none; }
.steps li.done .dotstep { border-color: var(--ok); background: var(--ok); }
@keyframes spin { to { transform: rotate(360deg); } }

.result { text-align: center; padding: 6px 0 0; }
.check { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-bg); color: var(--ok);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.result .summary { color: var(--fg); font-size: 16px; margin: 0 0 8px; }
.report { text-align: left; background: #fafafa; border-radius: 14px; padding: 16px; font-size: 12.5px; line-height: 1.5;
  white-space: pre-wrap; max-height: 220px; overflow: auto; margin: 18px 0; font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; }
.note { font-size: 13px; color: var(--muted); background: #fafafa; border-radius: 12px; padding: 12px 14px; margin-top: 12px; }
.error { color: var(--err); background: var(--err-bg); border-radius: 12px; padding: 12px 14px; font-size: 14px; margin-top: 16px; }

/* ---------- run statistics ---------- */
/* The main stats of a skill, the way the dashboard shows them after a run. */
.stats { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 18px 0 20px; }
.statrow { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.statrow:last-child { border-bottom: 0; }
.statlabel { color: var(--muted); font-size: 14px; }
.statvalue { font-size: 17px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.statvalue.empty { font-weight: 500; color: var(--muted); }
.statnote { padding: 12px 16px; font-size: 13px; color: var(--muted); text-align: left; }
.statnote.plain { background: #fafafa; border-radius: var(--radius); margin: 18px 0 20px; }
.stats.pending .statrow span { display: block; height: 11px; border-radius: 6px;
  background: linear-gradient(90deg, #ededf0 25%, #f7f7f9 50%, #ededf0 75%); background-size: 200% 100%; animation: shimmer 1.5s linear infinite; }
.stats.pending .statrow span:first-child { width: 44%; }
.stats.pending .statrow span:last-child { width: 58px; }
.stats.pending .statnote { border-top: 1px solid var(--line); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* summary and report move into disclosures below the numbers */
.result .resulth { font-size: 17px; font-weight: 600; margin: 0; }
.folds { text-align: left; margin-bottom: 20px; }
.fold { border-top: 1px solid var(--line); }
.fold:last-child { border-bottom: 1px solid var(--line); }
.fold > summary { list-style: none; cursor: pointer; padding: 12px 2px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: ''; width: 6px; height: 6px; flex: none; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: rotate(-45deg); transition: transform .18s; }
.fold[open] > summary::before { transform: rotate(45deg); }
.foldbody { font-size: 14px; line-height: 1.55; padding: 0 2px 14px; white-space: pre-wrap; max-height: 260px; overflow: auto; }
.foldbody.mono { font-family: var(--mono); font-size: 12.5px; background: #fafafa; border-radius: 12px; padding: 14px; margin-bottom: 14px; }

/* a finished run in the list opens its numbers */
table.runs tr.expandable { cursor: pointer; }
.chev { display: inline-block; width: 6px; height: 6px; margin-right: 11px; vertical-align: middle;
  border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(-45deg); transition: transform .18s; }
table.runs tr.open .chev { transform: rotate(45deg); }
table.runs tr.open td { background: #fafafc; border-bottom: 0; }
table.runs tr.statsrow td { background: #fafafc; padding: 0 20px 16px; }
table.runs tr.statsrow .stats, table.runs tr.statsrow .statnote.plain { margin: 0; }

/* admin: picking the main stats */
.statsec { border-top: 1px solid var(--line); padding: 22px 0 4px; }
.statsec:first-of-type { border-top: 0; padding-top: 4px; }
.statsec h4 { margin: 0 0 12px; font-size: 15px; }
.picklist { display: flex; flex-direction: column; gap: 8px; }
.pickrow { display: flex; align-items: center; gap: 8px; }
.pickno { width: 18px; flex: none; text-align: right; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* the global input rule sets width:100%; flex-basis and max-width decide here */
.pickrow input { flex: 2 1 0; min-width: 0; }
.pickrow input[data-f=label_en] { flex: 1.3 1 0; }
.pickrow input.unitin { flex: 0 0 80px; max-width: 80px; }
.pickrow button { flex: none; width: 32px; height: 36px; border: 1px solid var(--line-strong); background: #fff; border-radius: 9px; color: var(--muted); }
.pickrow button:hover:not(:disabled) { background: #fafafa; color: var(--fg); }
.pickrow button:disabled { opacity: .3; cursor: default; }
.statchips { display: flex; flex-wrap: wrap; gap: 8px; }
.statchip { display: inline-flex; align-items: baseline; gap: 9px; padding: 7px 14px; font-size: 13px; background: #fff;
  border: 1px solid var(--line-strong); border-radius: 999px; transition: .15s; }
.statchip:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.statchip:disabled { opacity: .4; cursor: default; }
.chipval { font-weight: 600; font-variant-numeric: tabular-nums; }
.chipmeta { font-size: 12px; color: var(--muted); }
.statsec .stats.preview { max-width: 420px; margin: 0; }
.statsec .row { margin-top: 18px; align-items: center; }
.statsec .row .status { margin-top: 0; }

/* ---------- auth ---------- */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.authbox { width: 100%; max-width: 420px; background: var(--card); border-radius: 24px; padding: 40px; box-shadow: var(--shadow-hover); text-align: left; }
.authbox .brand { margin-bottom: 32px; }
.authbox h1 { font-size: 28px; }
.authbox .sub { font-size: 14px; margin-bottom: 8px; }
.authbox .langswitch { margin-top: 28px; }

/* ---------- admin ---------- */
.settings { max-width: 520px; background: var(--card); border-radius: var(--radius); padding: 8px 28px 28px; box-shadow: var(--shadow); }
.row { display: flex; gap: 10px; margin-top: 26px; }
.status { margin-top: 16px; font-size: 14px; }
.status.ok { color: var(--ok); }
.status.err { color: var(--err); }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 22px; }
.toolbar input { max-width: 320px; }
.list { display: flex; flex-direction: column; gap: 18px; }
.item { background: var(--card); border-radius: var(--radius); padding: 24px 28px; box-shadow: var(--shadow); }
.item header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.item header h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.item .cols { display: flex; flex-direction: column; gap: 22px; }
.item .cols > div + div { border-top: 1px solid var(--line); padding-top: 20px; }
.item h4 { margin: 0 0 10px; font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .09em; font-family: var(--mono); }
.userrow, .skillrow { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; row-gap: 6px; flex-wrap: wrap;
  padding: 10px 0; font-size: 14px; border-bottom: 1px solid var(--line); }
.userrow:last-of-type, .skillrow:last-of-type { border-bottom: 0; }
.userwho { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.userwho b { font-weight: 600; }
.userwho .muted { font-size: 13px; }
.userrow form.useredit { flex-basis: 100%; margin-top: 4px; }
.item h4.loanhead { margin-top: 24px; }
.loanhint { font-size: 12px; margin: -4px 0 6px; }
form[data-act=lend] select { flex: 1; min-width: 0; }
.skillrow .io { font-size: 12px; margin-top: 2px; }
.inline { display: flex; gap: 8px; margin-top: 12px; }
.inline input { flex: 1; min-width: 0; }
.iorow { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.iorow select { width: auto; flex: 0 0 auto; }
.iorow input { flex: 1; }
.iorow .meer { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 400; color: var(--fg); white-space: nowrap; }
.iorow .meer input { flex: none; width: auto; margin: 0; }
.iorow button { border: 0; background: rgba(0, 0, 0, .05); border-radius: 50%; width: 30px; height: 30px; color: var(--muted); flex: none; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; }
.checks label { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--fg); font-size: 14px; font-weight: 400; }
.checks input { width: 18px; height: 18px; accent-color: var(--accent); }

/* skill editor: choosing between an icon tile and a photo background for the card */
.stylepick { display: flex; gap: 10px; margin-top: 8px; }
.stylepick label { flex: 1; display: flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1px solid var(--line-strong);
  border-radius: 12px; font-size: 14px; cursor: pointer; transition: .15s; }
.stylepick label:has(input:checked) { border-color: var(--accent); background: var(--tint); color: var(--accent); font-weight: 500; }
.stylepick input { width: 16px; height: 16px; accent-color: var(--accent); }
.photoupload { display: flex; align-items: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.photopreview { width: 96px; height: 72px; border-radius: 10px; background-size: cover; background-position: center; flex: none; box-shadow: inset 0 0 0 1px var(--line); }
.photoempty { width: 96px; height: 72px; border-radius: 10px; border: 1.5px dashed var(--line-strong); flex: none;
  display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 11px; text-align: center; padding: 4px; }
.photoactions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

@media (max-width: 640px) {
  .topbar { padding: 0 16px; }
  .page { padding: 36px 18px 72px; }
  h1 { font-size: 32px; }
  .modal { padding: 24px; border-radius: 20px; }
  .userbox .muted { display: none; }
  .inline { flex-wrap: wrap; }              /* three-field forms (e-mail + wachtwoord + knop) get squeezed unreadable otherwise */
  .inline input { flex-basis: 100%; }
}

/* async runs + workstations */
.steps .progress { display: block; font-size: 13px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.steps .progress:empty { display: none; }
.steps .progress.fresh { animation: progressin .35s ease-out; }
@keyframes progressin { from { opacity: 0; transform: translateY(2px); } }
/* on a box: how long the active step has been going (kastje.js counts it on), next to its label */
.steps .tijd { margin-left: 8px; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.steps .tijd:empty { display: none; }
.steps li { transition: color .3s; }
.pill.queued, .pill.claimed { color: #b25000; background: #fff3e6; }
.card .mode { margin-top: 10px; font-size: 12px; color: var(--muted); }
.tokenbox { background: var(--card); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); margin-bottom: 18px; }
.tokenbox code { display: block; margin-top: 10px; padding: 12px 14px; background: #fafafa; border-radius: 10px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; word-break: break-all; user-select: all; }
#workers { margin-bottom: 40px; }

/* ---------- homepage ---------- */
.homepage { --bg: #fff; --fg: #171819; --muted: #686b70; --accent: #202224; --accent-hover: #3d4144; --tint: #f1f2f3; background: #fff; font-size: 16px; }
.homepage .topbar { height: 72px; padding-inline: clamp(20px, 4vw, 64px); background: rgba(255,255,255,.94); border-bottom-color: transparent; }
/* hero: technische tekening over de volle breedte; een witte waas achter de tekst houdt die leesbaar en onderaan loopt de tekening uit in het wit */
.hero-backdrop { --veil-w: 46%; background:
  radial-gradient(ellipse var(--veil-w) 58% at 50% 50%, rgba(255,255,255,.94) 0%, rgba(255,255,255,.82) 50%, rgba(255,255,255,0) 100%),
  linear-gradient(to bottom, rgba(255,255,255,0) 72%, #fff),
  linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)),   /* de hele tekening lichter, zodat hij rustig op de achtergrond blijft */
  url(/hero-bg.webp) center / cover no-repeat #fff; }
/* zelfde grijs als de doorzichtige ghost-knop op wit, maar dicht, zodat de lijnen er niet doorheen lopen */
.hero-backdrop .btn.ghost { background: #f2f2f2; }
.hero-backdrop .btn.ghost:hover { background: #e8e8e8; }
/* draaiende status onder de kop, in de stijl van de run-popup ('Zo ziet een run eruit') */
.hero-status { display: flex; align-items: center; gap: 12px; width: fit-content; margin: 0 auto 26px; padding: 9px 18px 9px 12px;
  border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 4px 14px rgba(0,0,0,.05);
  font-size: 15px; font-weight: 500; color: #1d1d1f; }
.hero-status .spinner { border-top-color: #0071e3; }
@media (max-width: 900px) { .hero-backdrop { --veil-w: 72%; } }   /* kleinere schermen: de tekst loopt (bijna) over de volle breedte */
@media (max-width: 720px) { .hero-backdrop { --veil-w: 90%; } }
.homepage .hero { max-width: 960px; padding-block: 90px 72px; }
.homepage .hero h1 { font-size: clamp(44px, 6.2vw, 88px); font-weight: 550; line-height: 1.055; letter-spacing: -.048em; white-space: pre-line; }
.homepage .hero .lead { max-width: 660px; margin-bottom: 32px; text-wrap: balance; }
.homepage .btn { box-shadow: none; }
.homepage .eyebrow { color: #777a7e; }
.homepage .section, .homepage .band { padding-block: clamp(64px, 7vw, 104px); }
.homepage .band h2, .homepage .section h2, .homepage .closing h2 { font-weight: 550; }
.homepage .qacard, .homepage .excard, .homepage .whocard, .homepage .contactform { box-shadow: none; border-radius: 18px; }
.homepage .band.dark { --accent: #dce0e4; --tint: rgba(255,255,255,.08); background: #17191b; }
.homepage .band.glow::before { display: none; }
.homepage ::selection { background: #d9dde0; color: #171819; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 28px; }
.wrap.narrow { max-width: 760px; }
.hide-sm { display: inline-flex; }
.hero { max-width: 900px; margin: 0 auto; padding: 96px 28px 72px; text-align: center; }
.hero h1 { font-size: 56px; line-height: 1.05; letter-spacing: -0.04em; margin: 0 0 22px; }
.lead { text-wrap: pretty; font-size: 19px; line-height: 1.55; color: var(--muted); margin: 0 auto 30px; max-width: 680px; }
.lead.center { text-align: center; }
.lead.strong { color: var(--fg); font-weight: 500; }
.eyebrow.center { text-align: center; }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn.big { padding: 15px 28px; font-size: 16px; min-height: 52px; }
.band { background: var(--card); padding: 80px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section { padding: 84px 28px; }
.band h2, .section h2, .closing h2 { text-align: center; margin: 0 0 18px; font-size: 32px; letter-spacing: -0.025em; }

/* A single, native-scroll filmstrip. Its next card remains visible at the edge. */
.usecase-preview { --case-gutter: clamp(20px, 5vw, 80px); max-width: 1600px; margin: 0 auto; padding: 20px var(--case-gutter) 100px; text-align: left; }
.usecase-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.usecase-preview-head h2 { margin: 0; font-size: clamp(28px, 3vw, 42px); font-weight: 550; line-height: 1.15; letter-spacing: -.04em; text-wrap: initial; }
.usecase-controls { display: flex; flex: none; gap: 10px; }
.usecase-nav { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 1px solid #dadcde; border-radius: 50%; background: #fff; color: #202224; transition: background .2s, border-color .2s, opacity .2s; }
.usecase-nav:hover { background: #f1f2f3; border-color: #a6a9ac; }
.usecase-nav[aria-disabled="true"] { opacity: .32; cursor: default; background: #fff; border-color: #dadcde; }
.usecase-prev svg { transform: rotate(180deg); }
.usecase-rail { position: relative; display: flex; gap: 22px; margin-left: -4px; margin-right: calc(-1 * var(--case-gutter)); padding: 4px var(--case-gutter) 4px 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.usecase-rail::-webkit-scrollbar { display: none; }
.usecase-slide { position: relative; isolation: isolate; display: block; flex: 0 0 clamp(280px, 38vw, 560px); min-width: 0; aspect-ratio: 1.55; min-height: 250px; border-radius: 20px; overflow: hidden; scroll-snap-align: start; background: #22282d; color: #fff; -webkit-user-select: none; user-select: none; }
.usecase-slide:hover { text-decoration: none; }
.usecase-slide-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.48); transition: transform .7s cubic-bezier(.2,.65,.3,1), filter .5s; }
.usecase-slide-redlines-gereviseerde-dwg .usecase-slide-image { object-position: 50% 68%; }
.usecase-slide-3d-2d-plattegrond .usecase-slide-image { object-position: 50% 72%; transform: scale(1.16); }
.usecase-slide-dwg-bedrijfsstandaard .usecase-slide-image { object-position: 50% 40%; }
.usecase-slide::before, .usecase-slide::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.usecase-slide::before { background: linear-gradient(180deg, rgba(8,12,16,.02) 25%, rgba(8,12,16,.06) 42%, rgba(8,12,16,.76) 100%); }
.usecase-slide::after { background: rgba(8,12,16,.15); opacity: 0; transition: opacity .35s; }
.usecase-slide-copy { position: absolute; z-index: 2; left: 30px; right: 70px; bottom: 28px; }
.usecase-slide-title { display: block; color: #fff; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.17; font-weight: 500; letter-spacing: -.03em; text-wrap: balance; }
.usecase-slide-caption { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .35s, opacity .25s; }
.usecase-slide-caption > span { overflow: hidden; min-height: 0; color: rgba(255,255,255,.87); font-size: 15px; line-height: 1.5; }
.usecase-slide-caption > span::before { content: ''; display: block; height: 10px; }
.usecase-slide-arrow { position: absolute; z-index: 2; right: 28px; bottom: 28px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s; }
.usecase-slide:focus-visible::after { opacity: 1; }
.usecase-slide:focus-visible .usecase-slide-caption { grid-template-rows: 1fr; opacity: 1; }
.usecase-slide:focus-visible .usecase-slide-arrow { opacity: 1; transform: translateX(0); }
.usecase-slide:focus-visible, .usecase-nav:focus-visible, .usecase-rail:focus-visible { outline: 2px solid #202224; outline-offset: 2px; }
.usecase-rail.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.usecase-rail.is-dragging .usecase-slide { cursor: grabbing; }
.usecase-slider-footer { display: flex; align-items: center; gap: 30px; margin-top: 25px; }
.usecase-progress { position: relative; flex: 1; height: 2px; overflow: hidden; border-radius: 2px; background: #e5e6e7; }
.usecase-progress span { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; background: #24282b; border-radius: inherit; }
.usecase-position { display: flex; gap: 12px; color: #91959a; font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.usecase-position b { color: #262a2e; font-weight: 500; }
.usecase-position > span { color: #c1c4c7; }
.usecase-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (hover: hover) and (pointer: fine) {
  .usecase-slide:hover::after { opacity: 1; }
  .usecase-slide:hover .usecase-slide-image { transform: scale(1.035); filter: saturate(.65); }
  .usecase-slide-3d-2d-plattegrond:hover .usecase-slide-image { transform: scale(1.19); }
  .usecase-slide:hover .usecase-slide-caption { grid-template-rows: 1fr; opacity: 1; }
  .usecase-slide:hover .usecase-slide-arrow { opacity: 1; transform: translateX(0); }
}
@media (max-width: 720px) {
  .homepage .topbar { height: 64px; }
  .homepage .hero { padding-block: 58px 52px; }
  .usecase-preview { padding-top: 14px; padding-bottom: 64px; }
  .usecase-preview-head { gap: 12px; margin-bottom: 22px; align-items: flex-end; }
  .usecase-controls { gap: 6px; }
  .usecase-nav { width: 40px; height: 40px; }
  .usecase-rail { gap: 14px; }
  .usecase-slide { flex-basis: 78%; aspect-ratio: 1.22; min-height: 240px; border-radius: 18px; }
  .usecase-slide-copy { left: 24px; right: 40px; bottom: 24px; }
  .usecase-slide-title { font-size: 26px; }
  .usecase-slide-arrow { right: 20px; bottom: 22px; }
  .usecase-slider-footer { gap: 24px; margin-top: 20px; }
}
@media (max-width: 380px) {
  .usecase-preview-head h2 { font-size: 26px; }
  .usecase-slide-copy { left: 20px; }
  .usecase-slide-title { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .usecase-slide *, .usecase-slide::after, .usecase-nav { transition: none !important; }
}
.usecase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.usecase-card { min-width: 0; border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s; }
.usecase-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.usecase-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; text-align: left; }
.usecase-open:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.usecase-image { position: relative; display: block; overflow: hidden; background: #1b2028; aspect-ratio: 16 / 9; }
.usecase-image::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.12)); }
.usecase-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.usecase-card:hover .usecase-image img { transform: scale(1.035); }
.usecase-copy { display: block; padding: 15px 16px 16px; }
.usecase-title { display: block; color: var(--fg); font-size: 16px; line-height: 1.25; font-weight: 650; letter-spacing: -.017em; }
.usecase-short { display: -webkit-box; overflow: hidden; margin-top: 7px; color: var(--muted); font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.usecase-link { display: block; margin-top: 12px; color: var(--accent); font-size: 13px; font-weight: 600; }
.usecase-link b { display: inline-block; transition: transform .18s; }
.usecase-card:hover .usecase-link b { transform: translateX(3px); }
.usecase-all-link { display: inline-block; margin-top: 22px; font-size: 15px; font-weight: 600; }
.usecase-all-link span { display: inline-block; margin-left: 2px; transition: transform .18s; }
.usecase-all-link:hover span { transform: translateX(3px); }

/* catalogue, modal and standalone case pages */
.usecase-page-hero { padding: 86px 0 48px; }
.usecase-page-hero h1 { text-align: center; }
.usecase-catalog { padding-top: 12px; padding-bottom: 94px; }
.usecase-grid-catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.usecase-grid-catalog .usecase-copy { padding: 18px 18px 19px; }
.usecase-grid-catalog .usecase-title { font-size: 18px; }
.usecase-grid-catalog .usecase-short { min-height: 2.9em; font-size: 14px; }
.usecase-modal-open { overflow: hidden; }
.usecase-modal-backdrop { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(10,12,16,.44); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fade .18s ease-out; }
.usecase-modal { position: relative; display: grid; grid-template-columns: minmax(0, .94fr) minmax(300px, 1.06fr); width: min(860px, 100%); max-height: min(720px, 92vh); overflow: auto; border-radius: 22px; background: var(--card); box-shadow: 0 32px 90px rgba(0,0,0,.3); animation: pop .22s cubic-bezier(.2,.8,.2,1); }
.usecase-modal-image { width: 100%; height: 100%; min-height: 340px; object-fit: cover; background: #19212a; }
.usecase-modal-body { padding: 38px 34px 32px; }
.usecase-modal-body .eyebrow { margin-bottom: 9px; }
.usecase-modal-body h2 { margin: 0 34px 12px 0; font-size: 29px; line-height: 1.1; letter-spacing: -.03em; }
.usecase-intro { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.usecase-modal-close { position: absolute; z-index: 1; top: 14px; right: 14px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: #1d1d1f; font-size: 25px; line-height: 1; box-shadow: 0 1px 8px rgba(0,0,0,.13); }
.usecase-modal-close:hover { background: #fff; }
.usecase-specs { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 24px 0 0; }
.usecase-specs div { padding: 12px 14px; border-radius: 10px; background: #f5f5f7; }
.usecase-specs dt { font-size: 11px; color: var(--muted); font-family: var(--mono); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.usecase-specs dd { margin: 4px 0 0; color: var(--fg); font-size: 14px; font-weight: 600; line-height: 1.35; }
.usecase-modal .btn.block { margin-top: 22px; }
.usecase-saving { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; background: #eef7f0; }
.usecase-saving span { font-size: 11px; color: #1d6b32; font-family: var(--mono); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.usecase-saving b { font-size: 15px; color: #16542a; }
.usecase-modal-scope { margin: 22px 0 0; }
.usecase-modal-scope h3 { margin: 0 0 8px; font-size: 11px; color: var(--muted); font-family: var(--mono); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.usecase-modal-scope ul { list-style: none; margin: 0; padding: 0; }
.usecase-modal-scope li { position: relative; padding: 5px 0 5px 24px; font-size: 14px; line-height: 1.4; }
.usecase-modal-scope li::before { content: ''; position: absolute; left: 2px; top: 10px; width: 9px; height: 5px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.usecase-modal .usecase-specs { grid-template-columns: 1fr 1fr; margin-top: 20px; }
.usecase-detail-hero { padding: 50px 0 70px; border-bottom: 1px solid var(--line); background: var(--card); }
.usecase-back { display: inline-block; margin-bottom: 38px; color: var(--muted); font-size: 14px; font-weight: 500; }
.usecase-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr); align-items: center; gap: 64px; }
.usecase-detail-copy .eyebrow { margin-bottom: 12px; }
.usecase-detail-copy h1 { font-size: clamp(38px, 4.3vw, 60px); line-height: 1.04; letter-spacing: -.045em; margin-bottom: 20px; }
.usecase-detail-copy .lead { margin: 0 0 28px; max-width: 600px; }
.usecase-detail-image { margin: 0; overflow: hidden; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.14); background: #19212a; aspect-ratio: 4 / 3; }
.usecase-detail-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.usecase-detail-content { padding-top: 50px; padding-bottom: 96px; }
.usecase-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.usecase-detail-card { padding: 26px 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.usecase-detail-card .eyebrow { margin-bottom: 8px; }
.usecase-detail-card h2 { margin: 0 0 10px; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.usecase-detail-card p:last-child { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.usecase-detail-card.accent-card { border-color: rgba(0,113,227,.18); background: linear-gradient(135deg, #f3f8ff, #fff); }
.usecase-process { margin: 58px auto 0; max-width: 780px; }
.usecase-process ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; list-style: none; padding: 0; margin: 24px 0 0; counter-reset: none; }
.usecase-process li { padding: 17px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.usecase-process li span { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; background: var(--accent); color: #fff; font-family: var(--mono); font-size: 12px; font-weight: 700; }
.usecase-process li p { margin: 12px 0 0; font-size: 14px; line-height: 1.45; font-weight: 550; }

/* Test results belong to the selected use case; content follows when available. */
.usecase-tests { margin-top: 80px; padding-top: 48px; border-top: 1px solid var(--line-strong); scroll-margin-top: 88px; }
.usecase-tests > h2 { margin: 0 0 30px; font-size: clamp(28px, 3vw, 36px); line-height: 1.15; font-weight: 550; letter-spacing: -.035em; }
.usecase-tests-layout { display: grid; grid-template-columns: 192px minmax(0, 1fr); align-items: start; gap: 36px; }
.usecase-test-menu { display: flex; flex-direction: column; gap: 8px; padding-block: 4px; }
.usecase-test-tab { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 14px 16px; border: 0; border-radius: 12px; background: transparent; color: #66696e; text-align: left; font-size: 16px; font-weight: 500; transition: background .18s, color .18s; }
.usecase-test-tab:hover { background: #e9eaec; color: #202224; }
.usecase-test-tab[aria-selected="true"] { background: #202224; color: #fff; }
.usecase-test-number { font-size: 13px; font-weight: 400; opacity: .6; font-variant-numeric: tabular-nums; }
.usecase-test-tab svg { flex: none; margin-left: auto; opacity: 0; }
.usecase-test-tab[aria-selected="true"] svg { opacity: .8; }
.usecase-test-results { min-width: 0; }
.usecase-test-panel { min-height: 310px; padding: 28px 32px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.usecase-test-panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-bottom: 23px; border-bottom: 1px solid var(--line); }
.usecase-test-panel-head h3 { margin: 0; font-size: 20px; font-weight: 550; letter-spacing: -.02em; }
.usecase-test-overview { display: grid; grid-template-columns: minmax(0, 1fr) 172px; gap: 28px; padding-top: 28px; }
.usecase-test-setup h4 { margin: 0 0 10px; font-size: 17px; line-height: 1.4; font-weight: 550; letter-spacing: -.015em; }
.usecase-test-setup p { margin: 0; color: #73777c; font-size: 16px; line-height: 1.65; white-space: pre-line; }
.usecase-test-setup p + h4 { margin-top: 24px; }
.usecase-test-grade { align-self: start; padding: 20px; border-radius: 16px; background: #f3f4f5; }
.usecase-test-grade > span { color: #62676d; font-size: 14px; }
.usecase-test-grade-number { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 8px; }
.usecase-test-grade-number strong { color: #a1a6ac; font-size: 60px; font-weight: 500; line-height: 1; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.usecase-test-grade-number > span { color: #868b91; white-space: nowrap; font-size: 16px; }
.usecase-test-grade-note { margin: 0; color: #71767c; font-size: 13px; line-height: 1.5; }
.usecase-test-grade.is-graded .usecase-test-grade-number strong { color: #202224; }
.usecase-test-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.usecase-test-metrics dt { color: #74787e; font-size: 14px; }
.usecase-test-metrics dd { margin: 8px 0 0; color: #33383d; font-size: 23px; line-height: 1.3; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.usecase-test-method { margin-top: 24px; color: #62676d; font-size: 14px; }
.usecase-test-method summary { cursor: pointer; }
.usecase-test-method p { margin: 12px 0 0; line-height: 1.6; }
.usecase-test-statistics { margin-top: 24px; border-top: 1px solid var(--line); }
.usecase-test-statistics > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0 0; list-style: none; cursor: pointer; color: #33383d; font-size: 15px; font-weight: 500; }
.usecase-test-statistics > summary::-webkit-details-marker { display: none; }
.usecase-test-statistics > summary:hover { color: #111; }
.usecase-test-statistics > summary:focus-visible { outline: 2px solid #202224; outline-offset: 6px; border-radius: 2px; }
.usecase-test-statistics > summary svg { flex: none; color: #74787e; transition: transform .18s ease; }
.usecase-test-statistics[open] > summary svg { transform: rotate(180deg); }
.usecase-test-statistics > dl { margin: 20px 0 0; }
.usecase-test-statistics > dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .6fr); align-items: baseline; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.usecase-test-statistics dt { color: #74787e; }
.usecase-test-statistics dd { margin: 0; text-align: right; color: #33383d; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.usecase-test-statistics dd span { font-size: 14px; font-weight: 400; color: #74787e; }
.usecase-test-statistics-pending { margin: 16px 0 0; color: #74787e; font-size: 14px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .usecase-test-statistics > summary svg { transition: none; } }
.usecase-test-tab:focus-visible, .usecase-test-panel:focus-visible { outline: 2px solid #202224; outline-offset: 4px; }
@media (max-width: 640px) {
  .usecase-tests { margin-top: 54px; padding-top: 34px; }
  .usecase-tests > h2 { margin-bottom: 22px; }
  .usecase-tests-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .usecase-test-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0; }
  .usecase-test-tab { justify-content: center; min-height: 48px; padding: 12px 8px; font-size: 15px; }
  .usecase-test-number, .usecase-test-tab svg { display: none; }
  .usecase-test-panel { min-height: 280px; padding: 24px; border-radius: 18px; }
  .usecase-test-panel-head { gap: 10px; padding-bottom: 20px; }
  .usecase-test-overview { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 22px; }
  .usecase-test-grade { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 20px; padding: 18px 20px; }
  .usecase-test-grade-number { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .usecase-test-grade-number strong { font-size: 48px; }
  .usecase-test-grade-note { grid-column: 1; margin-top: 4px; }
  .usecase-test-metrics { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .usecase-test-tab { transition: none; } }

/* Detail pages: results, scope, process, then a contextual enquiry. */
.usecase-scope, .usecase-detail-process, .usecase-contact { margin-top: 80px; padding-top: 48px; border-top: 1px solid var(--line-strong); }
.usecase-section-heading h2, .usecase-detail-process h2, .usecase-contact-copy h2 { margin: 0; font-size: clamp(28px, 3vw, 36px); line-height: 1.15; font-weight: 550; letter-spacing: -.035em; }
.usecase-section-heading > p { max-width: 620px; margin: 16px 0 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.usecase-check-examples { margin-top: 32px; }
.usecase-check-example { border-top: 1px solid var(--line-strong); }
.usecase-check-example:last-child { border-bottom: 1px solid var(--line-strong); }
.usecase-check-example > summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; list-style: none; cursor: pointer; }
.usecase-check-example > summary::-webkit-details-marker { display: none; }
.usecase-check-copy { display: block; max-width: 680px; }
.usecase-check-title { display: block; font-size: 20px; line-height: 1.35; letter-spacing: -.02em; font-weight: 550; }
.usecase-check-description { display: block; margin-top: 8px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.usecase-check-example > summary svg { flex: none; color: #74797f; transition: transform .2s; }
.usecase-check-example[open] > summary svg { transform: rotate(45deg); }
.usecase-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 0 0 28px; }
.usecase-comparison-side { min-width: 0; margin: 0; }
.usecase-comparison-side figcaption { margin-bottom: 12px; }
.usecase-comparison-side figcaption > span { font-size: 14px; font-weight: 550; color: #282d32; }
.usecase-comparison-side figcaption p { margin: 6px 0 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.usecase-comparison-pending { display: grid; place-items: center; min-height: 150px; border: 1px solid var(--line); border-radius: 16px; background: #fafafb; color: #8a8f95; font-size: 14px; }
.usecase-comparison-image { display: block; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: 16px; background: #eaeced; }
.usecase-comparison-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.usecase-check-example > summary:focus-visible, .usecase-comparison-image:focus-visible { outline: 2px solid #202224; outline-offset: 4px; }
.usecase-detail-process { max-width: none; }
.usecase-detail-process ol { gap: 18px; margin-top: 30px; }
.usecase-detail-process li { padding: 26px; border-radius: 18px; }
.usecase-detail-process li span { width: auto; height: auto; padding: 0; background: none; color: #7e8389; border-radius: 0; font-family: inherit; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.usecase-detail-process li p { margin-top: 18px; font-size: 17px; font-weight: 500; line-height: 1.5; }
.usecase-contact { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 54px; align-items: start; scroll-margin-top: 88px; }
.usecase-contact-copy > p { margin: 18px 0 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.usecase-contact-copy .usecase-contact-subject { margin-top: 32px; font-size: 14px; }
.usecase-contact-subject strong { display: block; margin-top: 5px; color: var(--fg); font-size: 18px; line-height: 1.4; font-weight: 500; }
.usecase-contact-direct { display: grid; gap: 6px; margin-top: 40px; font-size: 15px; }
.usecase-contact-direct > span { margin-bottom: 5px; color: var(--muted); }
.usecase-contact-direct a { color: var(--fg); overflow-wrap: anywhere; }
.usecase-contact-card { --accent: #202224; --accent-hover: #3d4144; --tint: #f1f2f3; min-width: 0; padding: 30px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.usecase-contact .contactform { max-width: none; margin: 0; }
.usecase-contact .contactform label { font-family: inherit; font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--fg); }
.usecase-contact .contactform label span { margin-bottom: 8px; }
.usecase-contact .contactform .usecase-required { display: inline; color: var(--muted); }
.usecase-contact input, .usecase-contact textarea { font-size: 16px; }
.usecase-contact textarea { min-height: 140px; }
.usecase-contact .usecase-required-note { margin: 4px 0 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.usecase-contact .btn { justify-content: space-between; padding-inline: 20px; border-radius: 12px; }
.usecase-contact .error { margin-block: 0 16px; }
.usecase-contact-success { padding: 40px 0; }
.usecase-contact-success p { margin: 0; font-size: 20px; line-height: 1.5; letter-spacing: -.02em; }
.usecase-contact-success:focus-visible { outline: 2px solid #202224; outline-offset: 6px; }
@media (max-width: 800px) {
  .usecase-contact { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .usecase-contact-copy { max-width: 560px; }
  .usecase-contact-direct { margin-top: 24px; }
}
@media (max-width: 640px) {
  .usecase-scope, .usecase-detail-process, .usecase-contact { margin-top: 54px; padding-top: 34px; }
  .usecase-check-examples { margin-top: 24px; }
  .usecase-check-example > summary { padding-block: 22px; gap: 18px; }
  .usecase-check-title { font-size: 18px; }
  .usecase-comparison { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .usecase-comparison-pending { min-height: 115px; border-radius: 12px; }
  .usecase-comparison-image { aspect-ratio: 4 / 3; border-radius: 12px; }
  .usecase-detail-process ol { margin-top: 24px; }
  .usecase-contact-card { padding: 24px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) { .usecase-check-example > summary svg { transition: none; } }
@media (max-width: 380px) {
  .usecase-test-grade { display: block; }
  .usecase-test-grade-number { margin: 10px 0; }
}

/* process flow */
/* the process as a timeline: a line draws itself through the steps while scrolling, then loops back from 4 to 1.
   Without .is-anim (no JS or reduced motion) everything shows in its finished state. */
.flowscene { position: relative; margin: 44px auto 56px; padding-top: 88px; }  /* tussen de titel en de uitleg, gelijke ruimte boven en onder */
.flowlines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.flowlines path { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.flowtrack { stroke: #e3e4e6; }
.flowdraw, .loopdraw { stroke: var(--accent); stroke-dasharray: 1; stroke-dashoffset: 0; }
.loophead { stroke: var(--accent); }
.flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.fstep { min-width: 0; text-align: center; padding: 0 6px; }
.fnum { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--accent); border: 1.5px solid var(--accent); color: #fff; box-shadow: 0 0 0 6px rgba(32,34,36,.07); box-sizing: border-box;
  font-size: 12.5px; font-weight: 600; font-family: var(--mono); transition: background .35s, color .35s, border-color .35s, box-shadow .35s; }
.fstep h4 { margin: 0 0 6px; font-size: 15px; letter-spacing: -0.01em; }
.fstep p { margin: 0 auto; max-width: 15em; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.fstep h4, .fstep p { transition: opacity .45s, transform .45s cubic-bezier(.2,.7,.2,1); }
.flowback { position: absolute; left: 50%; top: 16px; transform: translate(-50%, -50%); margin: 0; padding: 6px 14px; white-space: nowrap;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: var(--muted); transition: opacity .45s; }
.flowback .backarrow { color: var(--accent); font-size: 16px; }
.flowscene.is-anim .fstep:not(.on) .fnum { background: #fff; border-color: #d4d6d9; color: var(--muted); box-shadow: none; }
.flowscene.is-anim .fstep:not(.on) h4, .flowscene.is-anim .fstep:not(.on) p { opacity: .3; transform: translateY(6px); }
.flowscene.is-anim .loophead { opacity: 0; transition: opacity .2s; }
.flowscene.is-anim.looped .loophead { opacity: 1; }
.flowscene.is-anim .flowback:not(.on) { opacity: 0; }
@media (max-width: 700px) {                      /* telefoon: verticale tijdlijn, boog links terug */
  .flowscene { padding-top: 0; margin: 44px auto; }
  .flow { grid-template-columns: 1fr; gap: 30px; padding-left: 34px; }
  .fstep { position: relative; text-align: left; padding: 4px 0 0 50px; min-height: 32px; }
  .fnum { position: absolute; left: 0; top: 0; margin: 0; }
  .fstep p { margin: 0; max-width: none; }
  .flowback { position: static; transform: none; margin: 26px 0 0 34px; padding: 0; white-space: normal; background: none; border: 0; border-radius: 0; }
}

/* demo panel */
.demo { margin: 32px 0 0; }
.demovideo { width: 100%; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.14); display: block; background: #000; }
/* the run popup from the dashboard, replayed on the homepage (same look as .modal + .steps in the app) */
.demopopup { --fg: #1d1d1f; --muted: #6e6e73; --ok: #248a3d; --spin: #0071e3;
  position: relative; max-width: 540px; margin: 0 auto; padding: 32px; text-align: left; color: var(--fg);
  background: #fff; border-radius: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); }
.demopopup h3 { margin: 0 0 22px; padding-right: 36px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); }
.democlose { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,.05); color: var(--muted); }
.demosteps { list-style: none; margin: 0; padding: 0; }
.demosteps li { display: flex; align-items: center; gap: 14px; padding: 10px 0; font-size: 15px; color: var(--muted); transition: color .3s; }
.demosteps li.active { color: var(--fg); font-weight: 500; }
.demosteps li.done { color: var(--ok); }
.demosteps .dotstep, .demosteps .spinner { width: 18px; height: 18px; border-radius: 50%; flex: none; box-sizing: border-box; }
.demosteps .dotstep { border: 2px solid rgba(0,0,0,.12); }
.demosteps li.done .dotstep { border-color: var(--ok); background: var(--ok); }
.demosteps .spinner { border: 2px solid rgba(0,0,0,.1); border-top-color: var(--spin); animation: spin .8s linear infinite; }
.demosteps .progress { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--muted); }
.demosteps .progress:empty { display: none; }
.demosteps .progress.fresh { animation: progressin .35s ease-out; }
.demonote { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: #fafafa; font-size: 13px; color: var(--muted); }
@media (max-width: 700px) { .demopopup { padding: 24px; border-radius: 20px; } }
.chrome { display: flex; gap: 7px; padding: 13px 16px; background: #2a2a2c; }
.chrome span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.22); }
.demo figcaption { text-align: center; margin-top: 16px; font-size: 14px; color: var(--muted); }

/* calculator */
.calc { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; margin-top: 40px; align-items: start; }
.sliders, .results { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; }
.slider { display: block; margin-bottom: 26px; }
.slider:last-child { margin-bottom: 0; }
.srow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; font-size: 14px; color: var(--muted); }
.srow b { color: var(--fg); font-family: var(--mono); font-size: 15px; font-weight: 700; }
.srow b { flex: none; white-space: nowrap; }  /* '3 uur' en '€ 75' blijven op één regel */
input[type=range] { width: 100%; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px;
  background: rgba(0,0,0,.12); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(0,0,0,.12); box-shadow: 0 1px 4px rgba(0,0,0,.2); cursor: grab; }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff;
  border: 1px solid rgba(0,0,0,.12); box-shadow: 0 1px 4px rgba(0,0,0,.2); cursor: grab; }
.res { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.res:first-child { padding-top: 0; }
.res b { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--fg); letter-spacing: -0.02em; }
.res b.accent { color: var(--accent); }
.bridge { text-align: center; margin: 30px 0 0; font-size: 15px; font-weight: 500; }
.bridge .down { color: var(--accent); }
.calcnote { margin: 16px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* benefit cards */
.featgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.band .feature { background: #fafafa; }
.feature .ficon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 10px; background: var(--tint); color: var(--accent); margin-bottom: 16px; }
.feature h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -0.015em; }
.feature p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.teamphoto { margin-top: 36px; border-radius: var(--radius); overflow: hidden; line-height: 0; box-shadow: var(--shadow); }
.teamphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.withphoto { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 20px; align-items: stretch; }
.withphoto .teamphoto, .withphoto .featgrid { margin-top: 36px; }
.withphoto .featgrid { grid-template-columns: 1fr; gap: 12px; }
.withphoto .feature { padding: 18px 20px; }
.withphoto .feature .ficon { width: 34px; height: 34px; border-radius: 8px; margin-bottom: 10px; }

/* use cases */
.uclist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px; margin-top: 32px; }
.uc { display: flex; align-items: center; gap: 13px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 16px 18px; font-size: 15px; font-weight: 500; }
.band .uc { background: #fafafa; }
.ucicon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 8px; background: var(--tint); color: var(--accent); flex: none; }
.callout { max-width: 760px; margin: 28px auto 0; padding: 18px 22px; border-left: 3px solid var(--accent);
  background: var(--tint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 15px; line-height: 1.55; }

/* two columns */
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.band .panel { background: #fafafa; }
.panel h3 { margin: 0 0 10px; font-size: 18px; letter-spacing: -0.02em; }
.panel p { margin: 0 0 12px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.panel p:last-child { margin-bottom: 0; }

/* report + legend */
.exgrid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; margin-top: 36px; }
.exgrid > * { min-width: 0; }
.excard { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: #fafafa; }
.excard h3 { margin: 0 0 14px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; font-family: var(--mono); color: var(--muted); }
.reportsample { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.7; white-space: pre; overflow-x: auto; color: var(--fg); }
.legend { list-style: none; margin: 0; padding: 0; }
.legend li { display: flex; gap: 11px; align-items: flex-start; padding: 7px 0; font-size: 14.5px; line-height: 1.45; }
.legend .key { width: 14px; height: 14px; border-radius: 50%; flex: none; margin-top: 4px; }
.legend .key.auto { background: var(--accent); }
.legend .key.flag { background: #e8a33d; }
.legend .key.none { border: 2px solid rgba(0,0,0,.18); }

/* control Q&A */
.qa { max-width: 760px; margin: 20px auto 0; }
.homepage .faq { padding-top: 16px; }   /* volgt direct op het contactformulier, dat al ruimte onder zich heeft */
/* uitklapbare vraag, in dezelfde stijl als de stappen op de use-case-pagina's */
.qaitem { border-top: 1px solid var(--line-strong); }
.qaitem:last-child { border-bottom: 1px solid var(--line-strong); }
.qaitem > summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; list-style: none; cursor: pointer; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.qaitem > summary::-webkit-details-marker { display: none; }
.qaitem > summary svg { flex: none; color: #74797f; transition: transform .2s; }
.qaitem[open] > summary svg { transform: rotate(45deg); }
.qaitem > summary:focus-visible { outline: 2px solid #202224; outline-offset: 4px; }
.qaitem p { margin: -4px 0 22px; max-width: 660px; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .qaitem > summary svg { transition: none; } }
.qacard { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.qacard h3 { margin: 0 0 8px; font-size: 16px; letter-spacing: -0.015em; }
.qacard p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
/* 'Jij houdt de regie': drie tegels met een groen icoon */
.ctrlpoints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 960px; list-style: none; margin: 40px auto 0; padding: 0; }
.ctrlpoints li { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; padding: 30px 28px 34px; border-radius: 20px; background: #f5f5f7;
  font-size: 21px; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.ctrlicon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); }
@media (max-width: 900px) {
  .ctrlpoints { grid-template-columns: 1fr; max-width: 520px; gap: 12px; margin-top: 30px; }
  .ctrlpoints li { flex-direction: row; align-items: center; gap: 18px; padding: 20px 22px; font-size: 18px; }
  .ctrlicon { flex: none; width: 44px; height: 44px; }
}
/* 'Processen veranderen': grafiek met wisselend werkaanbod waar AstraCAD in meebeweegt, met vier punten eronder */
.loadchart { max-width: 960px; margin: 52px auto 0; padding: 22px 24px 20px; border: 1px solid var(--line); border-radius: 18px; background: #1b1b1f; }
.loadchart-legend { display: flex; gap: 22px; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.loadchart-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; vertical-align: -1px; }
.loadchart-legend .lc-work::before { background: rgba(255,255,255,.6); }
.loadchart-legend .lc-astra::before { background: #30d158; }
.loadchart svg { display: block; width: 100%; height: 240px; }
.loadchart path { fill: none; vector-effect: non-scaling-stroke; }
.loadchart .lc-grid { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.loadchart .lc-work-area { fill: url(#lcFill); }
.loadchart .lc-work-line { stroke: rgba(255,255,255,.6); stroke-width: 2; }
.loadchart .lc-astra-line { stroke: #30d158; stroke-width: 2.5; }
.loadpoints { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; max-width: 960px; margin: 36px auto 0; }
.loadpoints > div { padding-top: 16px; border-top: 1px solid var(--line-strong); }
.loadpoints h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.loadpoints p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
@media (max-width: 900px) { .loadpoints { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .loadchart { padding: 18px 16px 14px; } .loadchart svg { height: 180px; } }
@media (max-width: 520px) { .loadpoints { grid-template-columns: 1fr; gap: 20px; } }

/* who we are */
.whocard { display: flex; gap: 24px; align-items: center; max-width: 760px; margin: 32px auto 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.whophoto { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; }
.whocard h3 { margin: 0 0 8px; font-size: 20px; letter-spacing: -0.02em; }
.whocard p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.whocontact { margin-top: 12px !important; font-size: 14px !important; }
.whocontact b { color: var(--fg); }

/* contact form */
.closing { text-align: center; padding: 92px 28px; }
.closing .lead { margin-bottom: 14px; }
.closing .lead.strong { margin-bottom: 34px; }
.contactform { max-width: 560px; margin: 0 auto; text-align: left; }
.contactform .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contactform label { display: block; margin: 0 0 14px; font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; font-family: var(--mono); }
.contactform label span { display: block; margin-bottom: 7px; }
.contactform .hp, .usecase-cta-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contactform .btn.block { width: 100%; margin-top: 8px; }
.cfdone { max-width: 560px; margin: 0 auto; text-align: center; background: var(--card); border-radius: var(--radius);
  padding: 40px 28px; box-shadow: var(--shadow); }
.cfdone p { margin: 0; font-size: 17px; }
.hint { margin: 18px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.directline { margin: 24px 0 0; font-size: 14px; color: var(--muted); }
.directline .sep, .whocontact .sep, .footrow .sep { margin: 0 7px; opacity: .45; }

/* footer */
.foot { background: #1d1d1f; color: rgba(255,255,255,.55); border-top: 0; padding: 32px 0 40px; }
.foot a { color: rgba(255,255,255,.8); }
.foot a:hover { color: #fff; }
.footrow { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.footcol { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; }
.footcol a { word-break: break-word; }

/* admin: contact requests */
.tabs button .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; margin-left: 7px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; }
.item.lead.handled { opacity: .55; }
.leadfacts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.leadfacts b { color: var(--fg); font-family: var(--mono); }
.leadmsg { margin: 0 0 16px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; }
.leadfoot { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 14px; font-size: 14px; color: var(--muted); }
.leadfoot .sep { margin: 0 4px; opacity: .5; }

@media (max-width: 900px) {
  .calc, .twocol, .exgrid, .qa, .featgrid, .withphoto { grid-template-columns: 1fr; }
  .whocard { flex-direction: column; text-align: center; }
  .usecase-grid, .usecase-grid-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usecase-detail-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); gap: 34px; }
}
@media (max-width: 720px) {
  .hide-sm { display: none; }
  .hero { padding: 54px 20px 48px; }
  .hero h1 { font-size: 36px; }
  .lead { font-size: 17px; }
  .band { padding: 52px 0; }
  .section, .closing { padding: 52px 20px; }
  .band h2, .section h2, .closing h2 { font-size: 26px; }
  .contactform .frow { grid-template-columns: 1fr; }
  .sliders, .results, .panel, .qacard, .excard, .whocard { padding: 22px; }
  .footrow { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 340px) {
  .topbar .langswitch { display: none; }
}
@media (max-width: 420px) {
  .topbar { padding: 0 12px; gap: 8px; }
  .userbox { gap: 6px; }
  .brand { font-size: 15px; }
  .brand .logo { height: 20px; }
  .hero h1 { font-size: 30px; }
  .uc { padding: 14px 16px; font-size: 15px; }
  .reportsample { font-size: 11px; }
  .res b { font-size: 17px; }
  .usecase-grid, .usecase-grid-catalog { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .usecase-modal-backdrop { padding: 14px; }
  .usecase-modal { grid-template-columns: 1fr; max-width: 520px; }
  .usecase-modal-image { min-height: 190px; max-height: 250px; }
  .usecase-modal-body { padding: 28px 24px 24px; }
  .usecase-detail-hero { padding: 32px 0 48px; }
  .usecase-back { margin-bottom: 28px; }
  .usecase-detail-layout, .usecase-detail-grid { grid-template-columns: 1fr; gap: 28px; }
  .usecase-detail-copy h1 { font-size: 37px; }
  .usecase-detail-image { order: -1; }
  .usecase-detail-content { padding-top: 30px; padding-bottom: 70px; }
  .usecase-process { margin-top: 38px; }
  .usecase-process ol { grid-template-columns: 1fr; }
}

/* admin storage warning */
.warnbox { background: #fff6e6; border: 1px solid #f0d9a8; border-left: 3px solid #e8a33d;
  border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 24px; }
.warnbox strong { display: block; margin-bottom: 4px; }
.warnbox p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }

/* the bridge to the shop floor */
.bridge2 { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 28px; align-items: start; margin-top: 40px; }
.shot { margin: 0; }
.shotframe, .shotimg { width: 100%; border-radius: 14px; overflow: hidden; display: block;
  box-shadow: 0 18px 50px rgba(0,0,0,.13), 0 0 0 1px rgba(0,0,0,.05); background: #fff; }
.chrome.light { background: #ededf0; align-items: center; }
.chrome.light span { background: rgba(0,0,0,.14); }
.chrome.light em { flex: 1; text-align: center; font-style: normal; font-size: 11px; color: var(--muted);
  font-family: var(--mono); background: #fff; border-radius: 5px; padding: 3px 8px; margin-left: 8px; }
.shotbody { background: var(--bg); }
.mocktop { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px;
  background: #fff; border-bottom: 1px solid var(--line); }
.mocklogo { height: 13px; width: auto; }
.mockright { display: flex; align-items: center; gap: 8px; }
.mockuser { font-size: 9px; color: var(--muted); }
.mocklang { display: inline-flex; background: rgba(0,0,0,.06); border-radius: 5px; padding: 2px; gap: 1px; font-size: 8px; font-family: var(--mono); font-weight: 600; }
.mocklang b { background: #fff; color: var(--fg); border-radius: 3px; padding: 2px 5px; }
.mocklang i { color: var(--muted); font-style: normal; padding: 2px 5px; }
.mockmain { position: relative; padding: 16px 16px 22px; }
.mockeyebrow { margin: 0 0 3px; font-size: 8px; font-weight: 600; letter-spacing: .14em; color: var(--accent); font-family: var(--mono); }
.mockmain h4 { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.025em; }
.mocksub { margin: 0 0 14px; font-size: 9.5px; color: var(--muted); }
.mockcards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mockcard { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 11px; }
.mockcard .mi { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 6px; background: var(--tint); color: var(--accent); margin-bottom: 8px; }
.mockcard b { display: block; font-size: 11px; margin-bottom: 3px; }
.mockcard em { display: block; font-style: normal; font-size: 8.5px; line-height: 1.4; color: var(--muted); margin-bottom: 8px; }
.mocktags { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; margin-bottom: 6px; }
.mocktags i { font-style: normal; font-size: 7.5px; font-family: var(--mono); padding: 2px 4px; border-radius: 3px; background: rgba(0,0,0,.05); }
.mocktags i.out { background: var(--tint); color: var(--accent); }
.mocktags u { text-decoration: none; color: var(--muted); font-size: 8px; }
.mockfoot { display: block; font-size: 7.5px; color: var(--muted); }
.mockpop { position: absolute; right: 14px; bottom: -6px; width: 52%; background: #fff; border-radius: 10px;
  padding: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.05); }
.mockpop b { display: block; font-size: 11px; margin-bottom: 8px; }
.mockdrop { border: 1.4px dashed var(--accent); background: var(--tint); border-radius: 8px;
  padding: 14px 8px; text-align: center; font-size: 9px; color: var(--accent); margin-bottom: 8px; }
.mockbtn { background: var(--accent); color: #fff; border-radius: 7px; padding: 7px; text-align: center; font-size: 9px; font-weight: 500; }
.shot figcaption { text-align: center; margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.bridgelist { display: flex; flex-direction: column; gap: 4px; }
.brow { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.brow:last-child { border-bottom: 0; }
.bicon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 8px; background: var(--tint); color: var(--accent); flex: none; }
.brow h3 { margin: 0 0 3px; font-size: 16px; letter-spacing: -0.015em; }
.brow p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }

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

/* the bridge, large: the dashboard comes up to fill the screen, then dissolves in a curve into the copy.
   Static layout by default; .is-live (set by the scroll scene, desktop only) pins it and animates it. */
.bridgehero { padding-inline: 0; overflow-x: clip; }
.homepage .bridgehero { padding-bottom: 0; }
/* het probleem volgt direct op de use cases, en het dashboard schuift er vlak onder in */
.homepage .bridgestack > .problem { padding-top: 0; padding-bottom: clamp(32px, 4vw, 48px); }
.homepage .bridgestack > .problem + .bridgehero { padding-top: 0; }
.bridgestage { position: relative; width: min(1180px, calc(100% - 2 * clamp(16px, 4vw, 56px))); margin: 0 auto; }
.bridgestage, .bridgestage .shot { transform-origin: 50% 0; }
.bridgestage .shotframe, .bridgestage .shotimg { border-radius: var(--r, 18px);
  box-shadow: 0 40px 90px rgba(0,0,0,calc(.16 * var(--so, 0))), 0 0 0 1px rgba(0,0,0,calc(.06 * var(--so, 0))); }
.bridgefade { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 115% 92% at 50% 0%, rgba(255,255,255,0) 50%, #fff 88%); }
.bridgetitle { position: relative; margin-top: clamp(-140px, -9vw, -36px); padding: 0 24px; text-align: center; }
.bridgehero .bridgetitle h2 { max-width: 20em; margin: 0 auto 18px; font-size: clamp(28px, 3.3vw, 50px); font-weight: 600; line-height: 1.08; letter-spacing: -.035em; }
.bridgetitle .lead { margin-bottom: 0; }
.homepage .bridgepoints { padding-top: 56px; padding-bottom: 0; }  /* de volgende witte sectie zorgt voor de ruimte eronder */
.bridgegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; max-width: 940px; margin: 0 auto; text-align: left; }
.bridgegrid .brow { padding: 22px 0; border-bottom: 0; border-top: 1px solid var(--line); }
@media (max-width: 700px) {
  .bridgegrid { grid-template-columns: 1fr; gap: 0; }
  /* op de telefoon: het hele dashboard, precies zo breed als het scherm */
  .bridgestage { width: 100%; }
  .bridgestage .shotframe, .bridgestage .shotimg { border-radius: 0; box-shadow: none; }
}

.bridgehero.is-live .bridgepin { height: 134vh; }   /* vast net zo lang als de tekst nodig heeft om in te komen */
.bridgehero.is-live .bridgesticky { position: sticky; top: 0; height: 100vh; padding-top: 84px; box-sizing: border-box;
  display: flex; align-items: flex-start; justify-content: center; }
/* De dashboardfoto past volledig onder de navigatie en houdt die grootte tijdens de titel. */
.bridgehero.is-live .bridgestage { position: static; flex: none; }
.bridgehero.is-live .shot { position: relative; aspect-ratio: 2000 / 1247; will-change: transform; }
.bridgehero.is-live .bridgestage .shotframe, .bridgehero.is-live .bridgestage .shotimg { box-shadow: none; }
.shotshadow { display: none; }
.bridgehero.is-live .shotshadow { display: block; position: absolute; inset: 0; border-radius: var(--r); pointer-events: none;
  box-shadow: 0 44px 100px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.06); will-change: opacity; }
.bridgehero.is-live .bridgefade { inset: auto 0 0 0; height: 80vh; opacity: 0; will-change: opacity;
  background: radial-gradient(ellipse 78% 100% at 50% 100%, #fff 52%, rgba(255,255,255,0) 100%),
              linear-gradient(to top, #fff 10%, rgba(255,255,255,0) 42%); }
.bridgehero.is-live .bridgetitle { position: absolute; left: 0; right: 0; bottom: clamp(44px, 9vh, 110px); margin: 0; opacity: 0; will-change: opacity, transform; }
/* het probleem blijft staan (top zet de scène in JS) en het dashboard schuift eroverheen */
.bridgestack { overflow-anchor: none; }
.bridgestack.is-live > .problem { position: sticky; top: var(--uc-top, 72px); }
.bridgestack.is-live .pcards { position: relative; z-index: 1; background: #fff; will-change: transform; }
.bridgestack.is-live .bridgehero { position: relative; z-index: 1; }
.homepage .bridgestack.is-live + .bridgepoints { padding-top: 8px; }
/* mobiel (.is-pinned): de kaartjes blijven hangen (top zet de scène in JS) en het dashboard schuift er met de titel
   eroverheen, gevolgd door de punten. Het staartje (::after) houdt de kaartjes vast tot ze helemaal bedekt zijn;
   de punten schuiven over dat staartje heen, zodat de pagina er niet langer van wordt. */
.bridgestack.is-pinned { margin-bottom: calc(-1 * var(--pin-tail, 0px)); }
.bridgestack.is-pinned::after { content: ""; display: block; height: var(--pin-tail, 0px); }
.bridgestack.is-pinned > .problem { position: sticky; top: var(--uc-top, 0px); }
.bridgestack.is-pinned > .bridgehero { position: relative; z-index: 1; background: #fff;
  box-shadow: 0 -18px 34px -22px rgba(0,0,0,.28); }
.bridgestack.is-pinned + .bridgepoints { position: relative; z-index: 1; background: #fff; }

/* ---------- donkere secties ---------- */
.band.dark {
  --fg: #f5f5f7;
  --muted: rgba(255, 255, 255, .6);
  --card: #1b1b1f;
  --line: rgba(255, 255, 255, .1);
  --line-strong: rgba(255, 255, 255, .18);
  --tint: rgba(10, 132, 255, .18);
  --accent: #4da2ff;
  --shadow: 0 2px 14px rgba(0, 0, 0, .35);
  background: #111114;
  color: var(--fg);
  border-color: rgba(255, 255, 255, .08);
  position: relative;
  isolation: isolate;
}
.band.dark h2, .band.dark h3, .band.dark h4 { color: var(--fg); }
.band.dark .lead { color: var(--muted); }
.band.dark .uc, .band.dark .feature, .band.dark .panel, .band.dark .qacard, .band.dark .excard {
  background: #1b1b1f; border-color: rgba(255, 255, 255, .1); }
.band.dark .reportsample { color: rgba(255, 255, 255, .85); }
.band.dark .callout { background: rgba(77, 162, 255, .12); border-left-color: var(--accent); }
.band.dark .chrome { background: #26262a; }
/* zachte gloed achter een donker blok */
.band.dark.glow::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 42%, rgba(10, 132, 255, .24), transparent 70%);
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .band.dark.glow::before { animation: none; } }

/* ---------- binnenkomen bij het scrollen ---------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.d1.in { transition-delay: .06s; }
.reveal.d2.in { transition-delay: .12s; }
.reveal.d3.in { transition-delay: .18s; }
.reveal.d4.in { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* tellende cijfers netjes uitlijnen */
.res b { font-variant-numeric: tabular-nums; }

/* ---------- admin: knowledge base per skill ---------- */
.modal.xwide { max-width: 920px; }
.tabs.mtabs { margin: 14px 0 20px; }
.kbsec { border-top: 1px solid var(--line); padding: 20px 0 4px; }
.kbsec:first-of-type { border-top: 0; padding-top: 4px; }
.kbsec h4, .kbhead h4 { margin: 0 0 12px; font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .09em; font-family: var(--mono); }
.kbtemplateupload { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto; gap: 10px; align-items: center; }
.kbtemplateupload input { margin: 0; }
.kbhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kbmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.kbmeta code, .kbsec td code { font-family: var(--mono); font-size: 12.5px; background: rgba(0, 0, 0, .05); padding: 2px 6px; border-radius: 6px; word-break: break-all; }
.kbsec td code, .kbsec td .pill { white-space: nowrap; word-break: normal; }
.kbtext { max-height: 260px; margin: 12px 0; }
.kbarea { min-height: 260px; margin-top: 10px; font-family: var(--mono); font-size: 13px; line-height: 1.5; }
.kbcount { text-align: right; margin-top: 4px; }
.kbcount.over { color: var(--err); }
.kbversion { width: auto; min-width: 260px; font-family: var(--mono); font-size: 13px; padding: 6px 10px; }
.kbchip { gap: 4px; margin: 4px 0 0 6px; }
.kbchip button { border: 0; background: none; color: var(--muted); padding: 0 0 0 2px; font-size: 11px; }
.kbactions { display: flex; align-items: center; gap: 14px; margin: 10px 0 6px; }
.kbnote { font-size: 13px; color: var(--muted); margin: 8px 0 0; font-style: italic; }
.kbsummary { margin: 10px 0 0; font-size: 14px; }
.kbevent { background: #fafafa; border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
.kbevent.reviewed { opacity: .65; }
.kbevent details { margin-top: 8px; font-size: 13px; }
.kbevent details summary { cursor: pointer; color: var(--muted); }
.kbevent .report { margin: 8px 0 0; background: #fff; }
.kbfinding { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; background: #fff; border-radius: 10px; padding: 10px 12px; margin-top: 10px; }
.kbfinding dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; font-size: 13px; }
.kbfinding dt { color: var(--muted); }
.kbfinding dd { margin: 0; }
.kbfinding .btn { flex: none; }
.pill.kb-approved, .pill.kb-accepted { color: var(--ok); background: var(--ok-bg); }
.pill.kb-draft { color: #b25000; background: #fff3e6; }
.pill.kb-retired { color: var(--muted); }
.pill.kb-rejected { color: var(--err); background: var(--err-bg); }
@media (max-width: 640px) {
  .kbfinding { flex-direction: column; }
  .kbfinding dl { grid-template-columns: 1fr; }
  .kbversion { min-width: 0; width: 100%; }
}

/* ---------- app pages (dashboard, admin): fresher, less technical ---------- */
body.app { --radius: 18px; --shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 6px 24px rgba(0, 0, 0, .045);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, .03), 0 16px 40px rgba(0, 0, 0, .08); }
/* the code font stays for code, prompts and version names only */
body.app .eyebrow, body.app .tag, body.app .pill, body.app th, body.app .tabs button, body.app .langswitch button,
body.app .item h4, body.app .kbsec h4, body.app .kbhead h4 { font-family: inherit; }
body.app .eyebrow { font-size: 13px; letter-spacing: .02em; text-transform: none; }
body.app th { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; background: #fcfcfd; padding-top: 11px; padding-bottom: 11px; }
body.app .item h4, body.app .kbsec h4, body.app .kbhead h4 { font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
@media (max-width: 680px) { .kbtemplateupload { grid-template-columns: 1fr; } }
body.app .pill { font-size: 12px; font-weight: 500; letter-spacing: 0; border-radius: 999px; padding: 2px 10px; }
body.app .tabs button { letter-spacing: 0; font-weight: 500; }
body.app .langswitch button { letter-spacing: .02em; }

/* skill cards */
body.app .card { position: relative; border: 1px solid rgba(0, 0, 0, .05); padding: 24px 24px 20px; }
body.app .card:hover { transform: translateY(-3px); }
body.app .card .icon { background: linear-gradient(135deg, #f1f7ff 0%, #dbe9ff 100%); box-shadow: inset 0 0 0 1px rgba(0, 113, 227, .08); border-radius: 12px; }
.card .corner { position: absolute; top: 18px; right: 20px; font-size: 12px; color: var(--muted); background: rgba(0, 0, 0, .04); padding: 2px 9px; border-radius: 999px; }
.card .skillflow { align-self: stretch; margin-top: auto; padding-top: 18px; font-size: 13px; color: var(--fg); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.card .skillflow .arrow { color: var(--muted); }
.card .skillflow .outs { color: var(--accent); font-weight: 500; }
.cardfoot { align-self: stretch; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }
.ws { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.ws i { width: 7px; height: 7px; border-radius: 50%; background: #c7c7cc; flex: none; }
.ws.online i { background: #34c759; box-shadow: 0 0 0 3px rgba(52, 199, 89, .18); }
.ws.direct i { background: var(--accent); }
.cardfoot .go { color: var(--muted); font-weight: 500; transition: color .15s; }
.cardfoot .go span { display: inline-block; transition: transform .2s; }
.card:hover .go { color: var(--accent); }
.card:hover .go span { transform: translateX(3px); }

/* recent runs */
table.runs td { padding-top: 13px; padding-bottom: 13px; vertical-align: middle; }
table.runs tr:not(.errrow):not(.agentrow):hover td { background: #fafafc; }
.nowrap { white-space: nowrap; }
.runstatus { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--fg); }
.runstatus i { width: 8px; height: 8px; border-radius: 50%; background: #c7c7cc; flex: none; }
.runstatus.st-done i { background: #34c759; }
.runstatus.st-error { color: var(--err); }
.runstatus.st-error i { background: #ff3b30; }
.runstatus.st-queued i, .runstatus.st-claimed i { background: #ff9f0a; }
.runstatus.st-running i { background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.progress-inline { font-size: 12px; margin-left: 8px; }
table.runs tr.haserr td { border-bottom: 0; padding-bottom: 8px; }
table.runs tr.errrow td { padding-top: 0; padding-bottom: 18px; background: #fafafc; }
table.runs tr.errrow td > span { display: block; font-size: 13px; color: var(--err); background: var(--err-bg); border-radius: 12px; padding: 12px 18px; line-height: 1.5;
  overflow-wrap: anywhere;
  width: 0; min-width: 100%; box-sizing: border-box; }   /* a long error must not stretch the table past the card */

/* modal scrollbar inside the rounded card instead of against its edge */
.modal::-webkit-scrollbar { width: 16px; }
.modal::-webkit-scrollbar-track { background: transparent; margin: 22px 0; }
.modal::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .18); border-radius: 999px; border: 5px solid transparent; background-clip: padding-box; }
.modal::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, .3); }

/* ---------- admin: database tab (run archive) ---------- */
.dbfilters { flex-wrap: wrap; }
/* a wide archive table scrolls instead of being clipped by the card */
body.app .tablewrap { overflow-x: auto; }
body.app table.runs { min-width: 760px; }
table.runs tr.dbdetailrow td { min-width: 0; }
.dbfilters input, .dbfilters select { max-width: 200px; width: auto; }
table.runs tr.dbrow { cursor: pointer; }
table.runs tr.dbrow.open td { background: #f7f9fc; border-bottom: 0; }
table.runs tr.dbdetailrow td { background: #f7f9fc; padding-top: 0; }
.dbdetail { padding: 4px 0 14px; }
.dbdetail .link.on { font-weight: 600; text-decoration: underline; }
.dbdetail h4 { margin: 18px 0 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.dbfacts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; margin: 4px 0 0; font-size: 13.5px; }
.dbfacts dt { color: var(--muted); }
.dbfacts dd { margin: 0; }
.dblog { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dblog li { background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); }
.dblog .dbfacts { margin-top: 8px; }
@media (max-width: 640px) { .dbfacts { grid-template-columns: 1fr; } .dbfilters input, .dbfilters select { max-width: none; width: 100%; } }

/* database sub-tabs and asset review */
.tabs.subtabs { margin: 0 0 20px; }
.dbfacts + .kbactions { margin-top: 14px; }
#database .item h4 { margin: 16px 0 8px; }
#database .item ul.io { margin: 4px 0 0; padding-left: 18px; }
.dbgroup { margin-bottom: 28px; }
.dbgroup > h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.dbgroup > h3 .muted { font-weight: 400; font-size: 13px; }
.filterbar { flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.filterbar select { width: auto; min-width: 150px; max-width: 280px; padding: 8px 34px 8px 12px; font-size: 14px; }
.entryassets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; }
.entryassets .tag { border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.entryassets .tag:hover { background: var(--tint); color: var(--accent); }
.usedby { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.usedby:last-child { border-bottom: 0; }

/* placeholders while the dashboard loads: same height as the real thing, so nothing jumps */
.skeleton { position: relative; overflow: hidden; background: var(--card); pointer-events: none; }
.card.skeleton { min-height: 232px; box-shadow: var(--shadow); border-color: transparent; }
.tablewrap.skeleton.rows { height: 232px; }
.skeleton::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(0, 0, 0, .035) 50%, transparent 80%);
  animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }
.comments { gap: 10px; }
.comment { background: #fafafa; border-radius: 12px; padding: 12px 14px; }
.comment .dbfacts { margin-top: 8px; }

/* admin: side menu (Skill base, Runs) runs from the tabs down to the bottom of the screen */
#panel-skillbase, #panel-runs, #panel-errors, #panel-performance { background: none; border: 0; padding: 0; }
.sidelayout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.sidenav { position: sticky; top: 72px; min-height: calc(100vh - 96px); max-height: calc(100vh - 96px); overflow-y: auto;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 10px; }
.navhead { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--muted);
  font-family: var(--mono); padding: 6px 10px 10px; }
.navitem, .navback { display: block; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 8px;
  padding: 8px 10px; font-size: 14px; color: var(--fg); transition: background .15s, color .15s; }
.navitem:hover { background: rgba(0, 0, 0, .05); }
.navitem.on { background: var(--tint); color: var(--accent); font-weight: 600; }
.navitem.navsub { padding-left: 24px; font-size: 13.5px; }
.navback { color: var(--accent); font-size: 13px; margin-bottom: 6px; }
.navback:hover { background: rgba(0, 0, 0, .04); }
.navempty { font-size: 13px; color: var(--muted); padding: 0 10px; margin: 0; }
.sbtitle { margin: 0 0 16px; font-size: 22px; letter-spacing: -0.02em; }
.sbtitle .muted { font-weight: 400; font-size: 15px; }
.sbcard { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 28px; }
.sbcard .desc { color: var(--muted); margin: 0 0 22px; font-size: 14px; }
.dbbox .item h4 { margin: 16px 0 8px; }
.dbbox .item ul.io { margin: 4px 0 0; padding-left: 18px; }
@media (max-width: 820px) {
  .sidelayout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sidenav { position: static; min-height: 0; max-height: none; }
}

/* admin settings: the settings and backup blocks side by side */
.setgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.setgrid .settings { max-width: none; }
@media (max-width: 820px) { .setgrid { grid-template-columns: minmax(0, 1fr); } }

/* BlackBox programme, Instellingen: Beveiliging (the same check rows as the setup wizard, static/inrichten.html) */
.bevset { margin-bottom: 36px; }
.bevkop { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.bevkop .btn { flex: none; }
.bevstand { margin: 4px 0 8px; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 600;
  background: var(--tint); color: var(--muted); }
.bevstand.ok { background: var(--ok-bg); color: var(--ok); }
.bevstand.mis { background: #fff4e5; color: #b25000; }
#beveiliging .controle { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
#beveiliging .controle:first-child { border-top: 0; }
#beveiliging .teken { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #fff; background: var(--ok); margin-top: 1px; }
#beveiliging .teken.mis { background: #f5a623; }
#beveiliging .teken.nvt { background: var(--line-strong); }
#beveiliging .controle b { display: block; font-weight: 600; }
#beveiliging .controle small { display: block; color: var(--muted); font-size: 13px; line-height: 1.45; margin-top: 2px; }
.tabs button .bevbadge { background: #f5a623; }
/* BlackBox programme, Instellingen: opper-admins */
.oarij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.oarij:first-child { border-top: 0; }
.oawie { flex: 1 1 260px; min-width: 0; }
.oawie b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.oawie small { color: var(--muted); font-size: 13px; }
.oaknoppen { display: flex; flex-wrap: wrap; gap: 6px; }
.oabewerk, .oavelden { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.oabewerk input, .oavelden input { flex: 1 1 200px; min-width: 0; width: auto; }
.oaform { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.oaform h4 { margin: 0 0 8px; }
.sidemain .dbfilters { gap: 8px; }
.sidemain .dbfilters input, .sidemain .dbfilters select { flex: 1 1 130px; min-width: 0; max-width: none; padding: 8px 12px; font-size: 14px; }
.sidemain .dbfilters select { padding-right: 34px; }

/* dashboard: archive icon next to the runs heading, archive button per run */
.runshead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 56px 0 16px; }
.runshead h2 { margin: 0; }
.runshead .iconbtn.on { background: var(--tint); color: var(--accent); }
.runs td.rowend { text-align: right; }
.runs td.rowend a + .rowicon, .runs td.rowend span + .rowicon { margin-left: 10px; }
.runs td.rowend .rowicon + .rowicon { margin-left: 4px; }
.rowicon { border: 0; background: transparent; width: 28px; height: 28px; border-radius: 8px; padding: 0; vertical-align: middle;
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted); transition: background .15s, color .15s; }
.rowicon:hover { background: rgba(0, 0, 0, .06); color: var(--fg); }
.rowicon.off { opacity: .35; cursor: default; }
.rowicon.off:hover { background: transparent; color: var(--muted); }   /* files cleaned up: nothing to download */
.runs tr.leaving { opacity: .35; transition: opacity .2s; }

/* knowledge base: the text split into goal, context, method steps and standalone rules */
.kbfields textarea { min-height: 0; font-size: 14px; line-height: 1.5; resize: vertical; }
.kbfields > label:first-child { margin-top: 14px; }
.kbsteps { display: flex; flex-direction: column; gap: 12px; }
.kbstep { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 14px; background: #fcfcfd; }
.kbstep label { margin-top: 12px; }
.kbstephead { display: flex; align-items: center; gap: 10px; }
.kbstephead input { flex: 1; font-weight: 600; }
.kbstephead button { border: 0; background: transparent; color: var(--muted); width: 28px; height: 28px; border-radius: 8px; flex: none; }
.kbstephead button:hover { background: rgba(0, 0, 0, .06); color: var(--err); }
.kbview { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.kbvsec h5 { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.kbvsec p, .kbvstep p { margin: 0; white-space: pre-wrap; font-size: 14px; }
.kbvstep { border-left: 2px solid var(--line-strong); padding: 2px 0 2px 12px; margin-top: 8px; }
.kbvstepname { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.kbvstep h6 { margin: 8px 0 2px; font-size: 12px; font-weight: 500; color: var(--muted); }

/* admin: full width, and the side menu folds down to its toggle */
.page.wide { max-width: none; padding-top: 32px; padding-left: 40px; padding-right: 40px; }
.sidelayout { transition: grid-template-columns .2s ease; }
.sidelayout.folded { grid-template-columns: 44px minmax(0, 1fr); }
.sidelayout.folded .sidenav { padding: 8px 4px; overflow: hidden; }
.sidelayout.folded .sidenav > :not(.navtoggle) { display: none; }
.navtoggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 0 6px auto;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted); transition: background .15s, color .15s; }
.navtoggle:hover { background: rgba(0, 0, 0, .06); color: var(--fg); }
.sidelayout.folded .navtoggle { margin: 0 auto; }
@media (max-width: 820px) {
  .page.wide { padding-left: 20px; padding-right: 20px; }
  .sidelayout.folded { grid-template-columns: minmax(0, 1fr); }
  .sidelayout.folded .sidenav { padding: 8px; }
  .sidelayout.folded .navtoggle { margin: 0 0 0 auto; }
}

/* skill base: preview tiles of the companies, then of a company's skills */
.sbtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.sbtile { display: flex; flex-direction: column; gap: 4px; text-align: left; min-height: 88px; padding: 16px 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.sbtile:hover { border-color: rgba(0, 113, 227, .35); box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.sbtilename { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.sbtilemeta, .sbtiledesc { font-size: 13px; color: var(--muted); }
.sbtiledesc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* process tab: versions with their numbers, steps with fixed IDs */
.pill.kb-trial { color: var(--accent); background: var(--tint); }
.prtoolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 8px; }
.prtoolbar label { margin: 0; }
.prtoolbar select { width: auto; min-width: 200px; padding: 8px 34px 8px 12px; font-size: 14px; }
.prtoolbar .grow { flex: 1; }
/* process: + opens a small menu (new / based on active), the pencil lets Astra Max improve it */
.prmenuwrap { position: relative; }
.prtoolbar .iconbtn { display: inline-flex; align-items: center; justify-content: center; color: var(--fg); position: relative; }
.prtoolbar .iconbtn:disabled { opacity: .35; cursor: default; }
.prmenu { position: absolute; right: 0; top: 42px; z-index: 20; min-width: 330px; background: var(--card); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .05); padding: 6px; }
.prmenu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 10px; padding: 10px 12px; cursor: pointer; font: inherit; color: var(--fg); }
.prmenu button:hover:not(:disabled) { background: rgba(0, 0, 0, .05); }
.prmenu button:disabled { opacity: .4; cursor: default; }
.prmenu strong { display: block; font-size: 14px; font-weight: 600; }
.prmenu span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.prbadge { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; }
.prtable td { vertical-align: middle; }
.prtable tr.open > td { background: #fcfcfd; }
.prdetail > td { padding-top: 4px; }
.prsteps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: prstep; }
.prsteps li { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--card); }
.prstephead { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.prsteps h6 { margin: 8px 0 2px; font-size: 12px; font-weight: 500; color: var(--muted); }
.prsteps p { margin: 0; white-space: pre-wrap; font-size: 14px; }
.kbstephead .tag { flex: none; font-family: var(--mono); font-size: 12px; }
.kbstephead button:disabled { opacity: .3; cursor: default; }
.kbmove { border: 1px dashed var(--line-strong); border-radius: 12px; padding: 12px 14px; margin-top: 18px; font-size: 14px; }
.kbmove p { margin: 0 0 6px; color: var(--muted); }
.kbmove ol { margin: 0 0 10px; padding-left: 20px; }

/* skill base: the menu as a tree that branches out (company > skill > knowledge, process, ...) */
.navtree, .navbranch { list-style: none; margin: 0; padding: 0; }
.navbranch { margin: 2px 0 4px 17px; padding-left: 8px; border-left: 1px solid var(--line-strong, rgba(0, 0, 0, .12)); }
.navleaves { animation: navgrow .18s ease-out; }
@keyframes navgrow { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.navnode, .navleaf { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border: 0; background: transparent;
  border-radius: 8px; padding: 7px 8px; font-size: 14px; color: var(--fg); transition: background .15s, color .15s; }
.navnode:hover, .navleaf:hover { background: rgba(0, 0, 0, .05); }
.navnode span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navnode em { font-style: normal; font-size: 12px; color: var(--muted); }
.navcomp { font-weight: 600; }
.navnode.current { color: var(--accent); }
.navskill.current { font-weight: 600; }
.navleaf { padding-left: 10px; font-size: 13.5px; color: var(--muted); }
.navleaf.on { background: var(--tint); color: var(--accent); font-weight: 600; }
.navchev { flex: none; color: var(--muted); transition: transform .15s ease; }
.navchev.open { transform: rotate(90deg); }
.navtree .navempty { padding: 6px 8px; }
.sbcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin: 2px 0 6px; }
.sbcrumb .link { font-size: 13px; color: var(--muted); padding: 0; }
.sbcrumb .link:hover { color: var(--accent); }
.sbcrumb b { color: var(--fg); font-weight: 500; }
/* folded: no empty white strip, only the toggle */
.sidelayout.folded .sidenav { background: transparent; box-shadow: none; min-height: 0; }

/* skill base: key figures under the tree */
.navmetrics { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-strong); }
.navmetrics ul { list-style: none; margin: 0; padding: 0; }
.navmetrics li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 5px 8px; font-size: 13px; color: var(--muted); }
.navmetrics li b { font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.navmetrics li.open b { color: var(--accent); }

/* accepting an experience: what it is and which step(s) it belongs to */
.acchoice { display: flex; flex-direction: column; gap: 8px; }
.acchoice label { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer; color: var(--fg); font-weight: 400; }
.acchoice label.on { border-color: rgba(0, 113, 227, .45); background: var(--tint); }
.acchoice input { margin-top: 3px; }
.acchoice b { display: block; font-size: 14px; font-weight: 600; }
.acchoice small { display: block; font-size: 12.5px; color: var(--muted); }
.acsteps { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.acsteps label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--fg); font-size: 14px; font-weight: 400; cursor: pointer; }
.acsteps .tag { font-family: var(--mono); font-size: 12px; }
.acceptbox { margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: var(--ok-bg); }
.acceptbox p { margin: 6px 0 0; font-size: 14px; white-space: pre-wrap; color: var(--fg); }
.acceptbox .kbactions { margin-top: 6px; }
.pracc { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.pracc li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.suggestbox { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 12px; font-size: 13.5px;
  padding: 8px 12px; border-radius: 10px; background: #f5f8ff; }
.stepline { margin-top: 8px; }
.stepline .tag, .suggestbox .tag { font-family: var(--mono); font-size: 12px; }
.maxbusy { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; padding: 10px 14px; border-radius: 10px;
  background: var(--tint); color: var(--accent); font-size: 14px; }
.prchh { margin: 12px 0 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.prchanges { margin: 0; padding-left: 18px; font-size: 13.5px; }
.prchanges li { margin: 2px 0; }

/* tab Errors: runs that failed twice, reason per attempt in plain language */
.errbar { justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.errshow { display: flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; color: var(--muted); font-size: 13px; }
.errorcard header h3 { font-size: 16px; }
.errorcard.handled { opacity: .6; }
.errattempts { margin: 12px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.errattempts li { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--err-bg); }
.errattempts details { font-size: 12.5px; color: var(--muted); }
.errattempts code { font-family: var(--mono); font-size: 12px; word-break: break-word; }

/* dashboard (administrator): what Astra itself answered to the worker's check-in */
table.runs tr.agentrow td { padding-top: 6px; padding-bottom: 16px; font-size: 13px; }
table.runs tr.agentrow td > span:first-child { font-weight: 600; color: var(--accent); }
table.runs tr.agentrow:hover td { background: transparent; }

/* het probleem in beeld: drie kaartjes in dashboardstijl (vacature, werkvoorraad, marge).
   Zonder .is-anim (geen JS of minder beweging) staat alles in de eindstand. */
.pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 44px 0 0; text-align: left; }
.pcard { display: flex; flex-direction: column; min-width: 0; padding: 20px 20px 18px; background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 10px 30px rgba(0,0,0,.05); }
.pclabel { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.vacrow { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.vacrow b { display: block; margin-bottom: 2px; font-size: 16px; letter-spacing: -0.01em; }
.vacrow span { font-size: 13px; color: var(--muted); }
.pcpill, .qlist em { white-space: nowrap; font-style: normal; font-weight: 600; color: #a34a00; background: #fff3e0; border-radius: 999px; }
.pcpill { padding: 3px 10px; font-size: 12px; }
.vacstats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.vacstats > div > span { display: block; margin-bottom: 2px; font-size: 12.5px; color: var(--muted); }
.vacstats b { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.qcount { font-weight: 500; font-variant-numeric: tabular-nums; }
.qlist { list-style: none; margin: 0; padding: 0; }
.qlist li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.qlist li:last-child { border-bottom: 0; }
.qlist li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qlist em { padding: 2px 8px; font-size: 11.5px; }
.qlist em.new { color: #0060c0; background: #eaf2ff; }
.qlist .qnew { overflow: hidden; max-height: 40px; }
.mtrend { font-weight: 600; color: #c4000f; }
.mchart { display: block; width: 100%; height: 110px; margin-top: auto; overflow: visible; }
.mline { fill: none; stroke: #d70015; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.maxis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
/* Reserveer de projectrij vooraf: hoogte animeren verplaatst het scrollanker van de dashboardscène. */
.pcards.is-anim .qnew { opacity: 0; transform: translateY(-6px);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .4s .1s; }
.pcards.is-anim.grew .qnew { opacity: 1; transform: none; }
.pcards.is-anim .mline { stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1) .3s; }
.pcards.is-anim .marea { opacity: 0; transition: opacity .8s 1.2s; }
.pcards.is-anim.play .mline { stroke-dashoffset: 0; }
.pcards.is-anim.play .marea { opacity: 1; }
@media (max-width: 900px) {
  .pcards { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  /* onder elkaar: capaciteit, marge en dan de werkvoorraad, zodat de marge in beeld blijft als het dashboard er
     van onderen overheen schuift */
  .pcards > .pqueue { order: 1; }
}

/* de omslag: zodra het dashboard binnenschuift, lossen de problemen op */
.pcpill, .qlist em, .mtrend { transition: color .35s, background .35s; }
.pcpill.ok, .qlist em.ok { color: #1d6b32; background: #e6f4ea; }
.vacstats { transition: opacity .45s; }
.vacstats.dim { opacity: .35; }
.mtrend.up { color: #1a8f3c; }
.mline.up { stroke: #1a8f3c; }
.pcards .mline.up { transition: stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1); }
.pcards .marea.up { transition: opacity .6s .5s; }
.pcards:not(.mgood) .mline.up { stroke-dashoffset: 1; }   /* de groene lijn verschijnt pas bij de omslag */
.pcards:not(.mgood) .marea.up { opacity: 0; }
.pcards.mgood .mline.up { stroke-dashoffset: 0; }
.pcards.mgood .marea.up { opacity: 1; }
.pcards .mline:not(.up), .pcards .marea:not(.up) { transition: stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1) .3s, opacity .5s; }
.pcards.mgood .mline:not(.up) { opacity: .18; }
.pcards.mgood .marea:not(.up) { opacity: 0; }
/* mobiel loopt de omslag mee met het schuiven. Labels krijgen hun nieuwe tekst zacht (de tekst rolt naar binnen, het
   label glijdt naar zijn nieuwe breedte) en de grafiek volgt de scroll direct, zonder naijlen. */
.swapin { display: inline-block; vertical-align: top; animation: swapin .45s cubic-bezier(.2,.7,.2,1) both; }   /* top: het label wordt er niet hoger van */
@keyframes swapin { from { opacity: 0; transform: translateY(60%); filter: blur(3px); } }
.bridgestack.is-pinned .pcpill, .bridgestack.is-pinned .qlist em, .bridgestack.is-pinned .mtrend,
.bridgestack.is-pinned .qcount { overflow: hidden; white-space: nowrap; }   /* nooit afbreken tijdens het glijden */
.bridgestack.is-pinned .pcards.scrub .mline, .bridgestack.is-pinned .pcards.scrub .marea { transition: none; }
.bridgestack.is-pinned .pcards:not(.scrub) .mline.up { visibility: hidden; }   /* de groene lijn is er pas als hij begint te tekenen */
.bridgestack.is-pinned .capbig .capnum { transition: none; }   /* het getal telt mee met de scroll: rood, bij nul donker, dan groen */
/* de titel komt woord voor woord binnen; de scène zet doorzichtigheid, positie en vervaging */
.bridgestack.is-pinned .bridgetitle .tw { display: inline-block; vertical-align: top; }

/* laatste use-case-kaart: "Staat jouw proces er niet tussen?" -> contactformulier in een popup */
.usecase-slide-cta { background-color: #17191b; background-image:
  linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 28px 28px; }
.usecase-slide-cta::before { background: radial-gradient(ellipse 80% 70% at 85% 10%, rgba(255,255,255,.07), transparent 70%); }
.usecase-cta-body { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 30px 30px 28px; color: #fff; }
.usecase-cta-kicker { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.usecase-cta-text { max-width: 30em; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.75); }
.usecase-cta-button { align-self: flex-start; margin-top: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; color: #17191b; font-size: 14px; font-weight: 600; transition: transform .25s; }
@media (hover: hover) { .usecase-slide-cta:hover .usecase-cta-button { transform: translateX(4px); } }
.usecase-contact-modal { grid-template-columns: 1fr; width: min(560px, 100%); }
.usecase-contact-modal .usecase-modal-close { background: rgba(0,0,0,.05); box-shadow: none; }
.usecase-cta-form { display: grid; gap: 12px; margin-top: 22px; }
.usecase-cta-form .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.usecase-cta-form label { display: grid; gap: 6px; margin: 0; font-size: 13px; color: var(--muted); }
.usecase-cta-form input, .usecase-cta-form textarea { margin: 0; }
.usecase-cta-form .frow { margin: 0; }
.usecase-cta-form input, .usecase-cta-form textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 10px; font: inherit; font-size: 15px; color: var(--fg); background: #fff; }
.usecase-cta-form textarea { resize: vertical; min-height: 110px; }
.usecase-cta-form [aria-invalid="true"] { border-color: var(--err); }
.usecase-cta-form .btn.block { margin-top: 6px; }
.usecase-contact-modal .usecase-contact-success p { margin: 22px 0 0; padding: 16px; border-radius: 12px; background: #eef7f0; color: #16542a; font-weight: 500; }
@media (max-width: 700px) { .usecase-cta-form .frow { grid-template-columns: 1fr; } .usecase-cta-body { padding: 24px; } }

.bridgehero.is-live .bridgesticky { overflow: hidden; }   /* het schermbrede dashboard mag niet onder de scène uitsteken */

/* Revisie check: omvang van de controle zichtbaar maken */
.usecase-scope-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.usecase-scope-stats div { padding: 18px 20px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.usecase-scope-stats strong { display: block; font-size: 34px; line-height: 1; font-weight: 600; letter-spacing: -.03em; }
.usecase-scope-stats span { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); }
.usecase-check-num { margin-right: 12px; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--muted); vertical-align: 2px; }
.usecase-check-count { margin-left: 10px; padding: 2px 9px; border-radius: 999px; background: #f1f2f3; font-size: 12px; font-weight: 500; color: var(--muted); vertical-align: 3px; white-space: nowrap; }
.usecase-check-points { list-style: none; margin: -6px 0 26px; padding: 0; max-width: 760px; }
.usecase-check-points li { position: relative; padding: 9px 0 9px 28px; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.55; }
.usecase-check-points li::before { content: ''; position: absolute; left: 3px; top: 16px; width: 9px; height: 5px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
@media (max-width: 700px) {
  .usecase-scope-stats { grid-template-columns: 1fr; }
}
.usecase-test-image { display: block; margin: 14px 0 18px; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: #1b1d21; }
.usecase-test-image img { display: block; width: 100%; height: auto; }

/* probleemkaart: capaciteit tekenwerk in uren (tekort -> ruimte over) */
.capbig { display: flex; align-items: baseline; gap: 10px; padding: 4px 0 14px; border-bottom: 1px solid var(--line); }
.capbig .capnum { font-size: 34px; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--fg); transition: color .35s; }
.capbig .capnum.neg { color: #c4000f; }
.capbig .capnum.pos { color: #1a8f3c; }
.capbig > span { font-size: 13px; color: var(--muted); }

/* testcases: smalle tabkolom met alleen de nummers, vanaf de bovenrand van het venster; het actieve tabblad
   loopt door in het venster, dat zo zoveel mogelijk breedte krijgt */
@media (min-width: 641px) {
  .usecase-tests-layout { grid-template-columns: 64px minmax(0, 1fr); gap: 0; }
  .usecase-test-menu { position: relative; z-index: 1; padding: 0; margin-right: -1px; gap: 4px; }
  .usecase-test-tab { justify-content: center; min-height: 64px; padding: 0; border: 1px solid transparent; border-right: 0; border-radius: 14px 0 0 14px; }
  .usecase-test-tab > span:not(.usecase-test-number), .usecase-test-tab svg { display: none; }
  .usecase-test-number { font-size: 15px; font-weight: 500; opacity: .55; }
  .usecase-test-tab[aria-selected="true"] { background: #fff; color: var(--fg); border-color: var(--line); }
  .usecase-test-tab[aria-selected="true"] .usecase-test-number { opacity: 1; }
  .usecase-test-panel { position: relative; border-top-left-radius: 0; }
  .usecase-test-setup h4:first-child { margin-top: 0; }
}
.usecase-test-panel > .usecase-test-overview:first-child { margin-top: 0; padding-top: 4px; }   /* geen kop meer boven de testopzet */

/* skillkaarten: 'Werkstation online' niet tonen; alleen als het werkstation offline is blijft de melding staan */
.card .cardfoot .ws.online, .card .cardfoot .ws.checking { display: none; }
.card .cardfoot .go { margin-left: auto; }

/* use case: invoer en uitvoer als strook onderaan de hero */
.usecase-hero-io { display: flex; align-items: center; gap: 28px; margin: 44px 0 0; padding-top: 26px; border-top: 1px solid var(--line); }
.usecase-hero-io div { min-width: 0; }
.usecase-hero-io dt { font-size: 11px; color: var(--accent); font-family: var(--mono); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.usecase-hero-io dd { margin: 6px 0 0; font-size: 17px; font-weight: 550; letter-spacing: -.01em; }
.usecase-hero-io-arrow { color: var(--muted); font-size: 20px; }
@media (max-width: 640px) { .usecase-hero-io { flex-direction: column; align-items: flex-start; gap: 14px; } .usecase-hero-io-arrow { transform: rotate(90deg); } }
/* testcase: voor en na per controlepunt */
.usecase-test-points { margin-top: 18px; border-bottom: 1px solid var(--line); }
.usecase-test-point { border-top: 1px solid var(--line); }
.usecase-test-point > summary { display: flex; align-items: center; gap: 10px; padding: 14px 0; list-style: none; cursor: pointer; font-size: 15.5px; font-weight: 500; }
.usecase-test-point > summary::-webkit-details-marker { display: none; }
.usecase-test-point > summary svg { flex: none; margin-left: auto; color: #74797f; transition: transform .2s; }
.usecase-test-point[open] > summary svg { transform: rotate(45deg); }
.usecase-test-point .usecase-check-num { margin-right: 4px; }
.usecase-test-point .usecase-comparison { padding-bottom: 18px; gap: 14px; }
.usecase-test-point .usecase-comparison-pending { min-height: 120px; }
.usecase-detail-content > .usecase-tests:first-child { margin-top: 0; border-top: 0; }   /* invoer/uitvoer staan nu in de hero */
.usecase-test-setup .usecase-test-points-heading { margin-top: 26px; }
.usecase-test-points-heading + .usecase-test-points { margin-top: 10px; }

/* testcase: bron- en resultaatbestand onder de score */
.usecase-test-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.usecase-test-file { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--fg); text-decoration: none; transition: border-color .15s, background .15s; }
.usecase-test-file:hover { border-color: var(--line-strong); background: #fafafb; text-decoration: none; }
.usecase-test-file-copy { display: grid; gap: 2px; min-width: 0; }
.usecase-test-file-copy span { font-size: 12px; color: var(--muted); }
.usecase-test-file-copy b { font-size: 13.5px; font-weight: 550; overflow-wrap: anywhere; }
.usecase-test-file-copy em { font-style: normal; font-size: 12px; color: var(--muted); }
.usecase-test-file svg { flex: none; color: var(--muted); }
/* voor/na-beelden: overal hetzelfde formaat, beeldvullend (ook de placeholders) */
.usecase-comparison-image, .usecase-comparison-pending { aspect-ratio: 16 / 10; min-height: 0; }
.usecase-comparison-image { background: #1a1c20; }
.usecase-comparison-image img { object-fit: cover; }
.usecase-test-point .usecase-comparison-pending { min-height: 0; }
.usecase-test-more > summary { padding: 14px 0; list-style: none; cursor: pointer; border-top: 1px solid var(--line); font-size: 14.5px; font-weight: 550; color: var(--accent); }
.usecase-test-more > summary::-webkit-details-marker { display: none; }
.usecase-test-more[open] > summary { display: none; }
.usecase-comparison-pending { place-items: center; }
.usecase-test-more { display: block; width: 100%; padding: 14px 0; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 550; color: var(--accent); }
.usecase-test-compare { margin: 14px 0 18px; padding: 0; }
.usecase-test-compare .usecase-comparison-image { aspect-ratio: 1 / 1; } .usecase-test-compare .usecase-comparison-image img { object-fit: contain; }   /* hele tekening zichtbaar */
.usecase-test-compare .usecase-comparison-image, .usecase-test-point .usecase-comparison-image { background: transparent; }   /* geen donkere rand om lichte beelden */
.usecase-check-plain { padding: 26px 0; }

/* testcase: korte opsomming van de controlepunten */
.usecase-test-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 22px; }
.usecase-test-checkgroup h5 { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 14.5px; font-weight: 550; letter-spacing: -.01em; }
.usecase-test-checkcol:not(:last-child) .usecase-test-checkgroup ul { padding-right: 28px; }
.usecase-test-checkgroup ul { margin: 0; padding: 0; list-style: none; }
.usecase-test-checkgroup li { position: relative; padding-left: 20px; color: #73777c; font-size: 14.5px; line-height: 1.55; }
.usecase-test-checkgroup li + li { margin-top: 4px; }
.usecase-test-checkgroup li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 9px; height: 5px; border: solid #34a853; border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg); }
.usecase-test-checkgroup.is-review { margin-top: 22px; }
.usecase-test-checkgroup.is-review h5 { padding-bottom: 0; border-bottom: 0; margin-bottom: 8px; }
.usecase-test-checkgroup.is-review li::before { top: .62em; width: 7px; height: 7px; border: 0; border-radius: 50%; background: #f5a524; transform: none; }
.usecase-test-checklist:not(.is-open) li.is-extra { display: none; }
.usecase-test-checkmore { margin-top: 16px; }
@media (max-width: 560px) { .usecase-test-checkcol + .usecase-test-checkcol { margin-top: 22px; } .usecase-test-checkcol .usecase-test-checkgroup ul { padding-right: 0; } }

/* dashboard runs: always fits the card, no sideways scrolling; a retry note goes under the skill name */
.retrytag { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 12px; vertical-align: middle; }
.retrytag svg { flex: none; }
@media (min-width: 761px) {
  body.app :is(#runs, #deel-runs) .tablewrap { overflow-x: hidden; }
  body.app :is(#runs, #deel-runs) table.runs { min-width: 0; }
}
@media (min-width: 761px) and (max-width: 1080px) {                   /* tighter columns so a smaller window still fits */
  :is(#runs, #deel-runs) table.runs th, :is(#runs, #deel-runs) table.runs td { padding-left: 12px; padding-right: 12px; }
}

/* runs: the numbers or the error slide open under the row instead of the list being rebuilt */
table.runs tr.rfoldrow td { padding: 0; border-bottom: 0; background: #fafafc; }
table.runs tr.rfoldrow.open td { border-bottom: 1px solid var(--line); }
.rfold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
tr.rfoldrow.open .rfold { grid-template-rows: 1fr; }
.rfoldin { overflow: hidden; min-height: 0; }
tr.statsrow .rfoldin { padding: 0 20px; }
tr.statsrow.open .rfoldin { padding-bottom: 16px; }
tr.errrow .rfoldin { padding: 0 20px; }
tr.errrow.open .rfoldin { padding-bottom: 18px; }
.rfoldin { transition: padding-bottom .22s ease; }
table.runs tr.rfoldrow:hover td { background: #fafafc; }
@media (prefers-reduced-motion: reduce) { .rfold, .rfoldin { transition: none; } }

/* knowledge base templates: title with a + on the right, the purpose field only once a file is chosen */
.kbsechead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kbsechead h4 { margin: 0; }
.kbsechead .iconbtn { display: inline-flex; align-items: center; justify-content: center; color: var(--fg); }
.kbsec .kbsechead + .io { margin: 6px 0 12px; }
.kbtplnew { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.kbtplnew input { flex: 1; min-width: 200px; margin: 0; }

/* admin: delete icon turns red on hover */
.rowicon.danger:hover { background: var(--err-bg); color: var(--err); }
.userrow .rowicon, .skillrow .rowicon { margin-left: 4px; }

/* dashboard and admin: primary buttons soft black instead of blue */
body.app .btn:not(.ghost) { background: #2c2c2e; }
body.app .btn:not(.ghost):hover { background: #48484a; }

/* admin: a company card folds to its name */
.compfold { cursor: pointer; user-select: none; }
.compitem .compfold .chev { transform: rotate(45deg); margin-right: 12px; }
.compitem.folded .compfold .chev { transform: rotate(-45deg); }
.compitem.folded header { margin-bottom: 0; }
.compitem.folded > .cols { display: none; }

/* admin tabs: errors badge red, requests badge green */
.tabs button #errbadge { background: #ff3b30; color: #fff; }
.tabs button #leadbadge { background: #34c759; color: #fff; }

/* dashboard runs: skill, company, date, status, actions spread over the width; the file name sits in the fold */
:is(#runs, #deel-runs) table.runs { table-layout: fixed; width: 100%; }
:is(#runs, #deel-runs) th.c-co { width: 18%; }                 /* the skill column takes what is left */
:is(#runs, #deel-runs) th.c-date { width: 140px; }              /* "gisteren 21:28" / "yesterday 21:28" + padding */
:is(#runs, #deel-runs) th.c-st { width: 168px; }                /* "Geannuleerd" + message bubble + padding */
:is(#runs, #deel-runs) th.c-act { width: 112px; }               /* two 28px icons + gap + cell padding, never clipped */
:is(#runs, #deel-runs) table.runs td { overflow: hidden; text-overflow: ellipsis; }
/* the opened row: "Bestand" + the file name on one clear line, then the figures over the full width */
:is(#runs, #deel-runs) .foldfile { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; font-size: 14px; min-width: 0; }
:is(#runs, #deel-runs) .foldfile .foldlabel { color: var(--muted); font-size: 13px; margin-right: 6px; flex: none; }
:is(#runs, #deel-runs) .foldfile svg { flex: none; color: var(--muted); }
:is(#runs, #deel-runs) .foldfile .foldname { font-weight: 500; color: var(--fg); overflow-wrap: anywhere; min-width: 0; }
:is(#runs, #deel-runs) .chevgap { display: inline-block; width: 17px; }
:is(#runs, #deel-runs) .skillmain .retrytag { flex-basis: 100%; margin: 0; }                       /* a retry note on its own line under the name */
/* an active run on a box: what the worker is doing now and how long it has been going, on a line under the name */
:is(#runs, #deel-runs) .skillmain .liverun { flex-basis: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-size: 12.5px; }
.liverun .tijd, #panel-runs .tijd { font-variant-numeric: tabular-nums; }
.liverun .livetekst:not(:empty) + .tijd::before { content: ' · '; }
#panel-runs .runstatus + .tijd { margin-left: 8px; color: var(--muted); }
/* retries: "3 pogingen" opens the older attempts under the newest */
.attempts { border: 0; background: rgba(0, 0, 0, .06); color: var(--muted); font-size: 12px; font-weight: 600; border-radius: 999px;
  padding: 3px 9px; margin-left: 10px; vertical-align: middle; cursor: pointer; transition: background .15s, color .15s; }
.attempts:hover, .attempts.on { background: var(--tint); color: var(--accent); }
table.runs tr.chainhide { display: none; }
table.runs tr.attemptrow td { padding-top: 9px; padding-bottom: 9px; font-size: 13.5px; background: #fcfcfd; }
:is(#runs, #deel-runs) table.runs tr.attemptrow td:first-child { padding-left: 37px; }   /* older attempts hang under the type tile */
.attemptname { color: var(--muted); }
/* Astra's message: a bubble next to the status, the text itself folds open with the row */
.msgdot { display: inline-flex; vertical-align: middle; margin-left: 8px; color: var(--accent); }
.rfoldin .errbox, .rfoldin .agentmsg { font-size: 13px; line-height: 1.5; border-radius: 12px; padding: 12px 18px;
  overflow-wrap: anywhere; width: 0; min-width: 100%; box-sizing: border-box; }   /* long text must not stretch the table past the card */
.rfoldin .errbox { color: var(--err); background: var(--err-bg); }
.rfoldin .agentmsg { background: var(--tint); }
.rfoldin .agentmsg b { color: var(--accent); font-weight: 600; }
.rfoldin > * + * { margin-top: 10px; }
.rowicon.danger { color: var(--err); }
.rowicon.danger:hover { background: var(--err-bg); color: var(--err); }

/* admin runs: the overview facts side by side in a grid, label above value, instead of one long list */
.factgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 24px; margin: 0; }
.factgrid > div { min-width: 0; }
.factgrid dt { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.factgrid dd { margin: 0; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.factgrid dd.unknown { color: var(--muted); font-weight: 400; opacity: .7; }
.dbdetail .tabs.mtabs { margin: 4px 0 16px; }
.dbdetail .factgrid ~ .io { margin: 14px 0 0; font-size: 12.5px; }

/* admin errors: same table as Runs; the reason is cut off in the row and complete when opened */
table.errtable td.errreason { width: 100%; }                 /* the reason takes what is left of the width */
table.errtable td.errreason > div { width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.errtable tr.handled td { opacity: .6; }
.errdetail .errtitle { margin: 4px 0 8px; font-size: 15px; font-weight: 600; color: var(--fg); overflow-wrap: anywhere; }
.errdetail .errattempts { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.errdetail .errattempts code { overflow-wrap: anywhere; }

/* dashboard runs, refined: the input type as a tile in front of the skill, quieter dates and icons,
   runs in progress lightly tinted, and an opened row's details aligned under the skill name */
:is(#runs, #deel-runs) table.runs tr:not(.rfoldrow) > td { padding-top: 11px; padding-bottom: 11px; }   /* the fold rows keep their own zero padding */
:is(#runs, #deel-runs) table.runs tr.attemptrow > td { padding-top: 9px; padding-bottom: 9px; }
.typetile { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 20px; margin-right: 10px;
  border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: .04em; line-height: 1; vertical-align: middle;
  background: rgba(0, 0, 0, .06); color: var(--muted); }
.typetile.cad { background: var(--tint); color: var(--accent); }
.typetile.excel { background: var(--ok-bg); color: var(--ok); }
.typetile.document { background: #e9e8ff; color: #5746bd; }
.typetile.none { background: transparent; }
/* chevron, tile, then name + "2 pogingen": when the column gets narrow the pill moves under the name instead of being cut off */
:is(#runs, #deel-runs) .skillwrap { display: flex; align-items: center; min-width: 0; }
:is(#runs, #deel-runs) .skillwrap > .chev, :is(#runs, #deel-runs) .skillwrap > .typetile { flex: none; }
:is(#runs, #deel-runs) .skillmain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
:is(#runs, #deel-runs) .skillname { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#runs, #deel-runs) .skillmain .attempts { margin-left: 0; }
:is(#runs, #deel-runs) td.num { font-variant-numeric: tabular-nums; }
:is(#runs, #deel-runs) table.runs tr.live > td { background: #f6f9ff; }
:is(#runs, #deel-runs) table.runs tr.live:hover > td { background: #eef4ff; }
:is(#runs, #deel-runs) a.rowicon { color: var(--accent); }
:is(#runs, #deel-runs) a.rowicon:hover { background: var(--tint); color: var(--accent); }
@media (hover: hover) {
  :is(#runs, #deel-runs) .rowicon[data-archive], :is(#runs, #deel-runs) .rowicon[data-restore] { opacity: .45; transition: opacity .15s, background .15s, color .15s; }
  :is(#runs, #deel-runs) tr:hover .rowicon[data-archive], :is(#runs, #deel-runs) tr:hover .rowicon[data-restore], :is(#runs, #deel-runs) .rowicon[data-archive]:focus-visible { opacity: 1; }
}
@media (min-width: 761px) and (max-width: 1080px) {
  :is(#runs, #deel-runs) th.c-co { width: 16%; }
  :is(#runs, #deel-runs) th.c-date { width: 124px; }
  :is(#runs, #deel-runs) th.c-st { width: 150px; }
  :is(#runs, #deel-runs) th.c-act { width: 96px; }
  :is(#runs, #deel-runs) tr.rfoldrow .rfoldin { padding-left: 12px; padding-right: 12px; }
  :is(#runs, #deel-runs) table.runs tr.attemptrow td:first-child { padding-left: 29px; }
}


/* solution upload: the process steps as a sideways sliding row of cards instead of running off the screen */
.stepcarousel { position: relative; margin-top: 8px; min-width: 0; }
.stepscroll { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 4px;
  padding: 2px 2px 10px; scrollbar-width: thin; }
.stepscroll label { flex: 0 0 210px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  margin: 0; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card); cursor: pointer;
  font-size: 13.5px; line-height: 1.35; transition: border-color .15s, background .15s; }
.stepscroll label:hover { border-color: rgba(0, 0, 0, .28); }
.stepscroll label:has(input:checked) { border-color: var(--accent); background: var(--tint); }
.stepscroll .stephead { display: flex; align-items: center; gap: 8px; }
.stepscroll input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.stepscroll .stepname { color: var(--fg); }
.carbtn { position: absolute; top: calc(50% - 5px); transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: var(--card); box-shadow: 0 2px 10px rgba(0, 0, 0, .15); font-size: 20px; line-height: 1; color: var(--fg);
  display: flex; align-items: center; justify-content: center; padding: 0 0 2px; }
.carbtn:hover { background: #f5f5f7; }
.carbtn.prev { left: -17px; }
.carbtn.next { right: -17px; }

/* users window of a box administrator (dashboard): the add form wraps instead of cutting off its placeholders */
.usersmodal .usersadd { flex-wrap: wrap; margin-top: 18px; }
.usersmodal .usersadd input { flex: 1 1 180px; min-width: 0; }

/* Skill base on a box: title with the create button, the AI-pakket block in the skill editor, process/knowledge text */
.sbhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sbhead .sbtitle { margin-bottom: 0; }
#sbmain .sbhead + .sbtiles, #sbmain .sbhead + .empty, #sbmain .sbhead + .dbbox { margin-top: 18px; }
.aipbox { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.aipstate { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.aipstate .muted { font-size: 13px; }
.aipnext { font-size: 13px; color: var(--accent); }
.mdlite { font-size: 14px; line-height: 1.55; }
.mdlite h3, .mdlite h4, .mdlite h5, .mdlite h6 { margin: 18px 0 6px; }
.mdlite p { margin: 0 0 8px; }
.mdlite ul, .mdlite ol { margin: 0 0 10px; padding-left: 22px; }

/* Financiën (box): total, period switch, cost chart (one series, recessive grid, tooltip per bar) */
#financien .item { margin-top: 16px; }
#financien .item h4 { margin: 0 0 12px; }
.finhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.finrechts { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.finrechts .tabs.mtabs { margin-top: 0; }
.fingegblok > .item { margin-top: 4px; }
.fingegknop.active { background: var(--fg); color: var(--card); border-color: var(--fg); }
.fingegknop .finaantal { display: inline-flex; justify-content: center; min-width: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 999px; background: var(--tint); color: var(--fg); font-size: 11px; font-weight: 700; }
.fingegknop.active .finaantal { background: rgba(255, 255, 255, .2); color: var(--card); }
.finhero { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.finchart { position: relative; }
.finchart svg { display: block; width: 100%; height: 220px; }
.finchart .fingrid { stroke: var(--line); stroke-width: 1; }
.finchart .finaxis { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.finchart .finbar path { fill: var(--accent); }
.finchart .finbar.on path { opacity: .8; }
.fintip { position: absolute; top: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; font-size: 13px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
  pointer-events: none; white-space: nowrap; }
.finform { align-items: flex-end; flex-wrap: wrap; }
.finform label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 13px; }
#fingegevens h4 { margin-top: 0; }
.fincols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; }
@media (max-width: 720px) { .fincols { grid-template-columns: minmax(0, 1fr); } }

/* customer portal on a box: people, invoice details */
.dashsub { font-size: 14px; margin: 0 0 14px; }
.finpartij { font-size: 14px; line-height: 1.5; margin: 0 0 10px; }

/* Financiën: Skills, Runs and Facturen as the tabs of a tabbed book; the open tab is part of its page */
.book { margin-top: 16px; }
.booktabs { display: flex; gap: 4px; padding: 0 18px; position: relative; z-index: 1; }
.booktab { border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; background: #ebebf0;
  color: var(--muted); padding: 10px 20px 9px; font-size: 14px; font-weight: 500; margin-bottom: -1px; cursor: pointer;
  transition: background .15s, color .15s; }
.booktab:hover { color: var(--fg); background: #e4e4ea; }
.booktab.active { background: var(--card); color: var(--fg); font-weight: 600; padding-bottom: 10px; border-bottom: 1px solid var(--card); }
.bookpage { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); }
.bookpage .finform { margin-top: 0; }

/* BlackBox: tab Model (base model + vision part, the plugs on it) */
#modelpane .item { margin-top: 16px; }
#modelpane .item h4 { margin: 0 0 12px; }
.mdlbar { height: 6px; border-radius: 3px; background: var(--line); margin-top: 12px; overflow: hidden; }
.mdlbar span { display: block; height: 100%; background: var(--accent); transition: width .2s; }

/* Performance: success, time freed up and its value next to the costs */
.perfsub { font-size: 16px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.perftiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
@media (max-width: 720px) { .perftiles { grid-template-columns: minmax(0, 1fr); } }
.perftile { display: flex; flex-direction: column; gap: 4px; margin: 0 !important; }
.perftile span { font-size: 13px; color: var(--muted); }
.perftile b { font-size: 26px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.perftile small { font-size: 12px; color: var(--muted); }
#perfpane .item { margin-top: 16px; }
#perfpane .item h4 { margin: 0 0 12px; }

/* Financiën (BlackBox): factuurplanning with a month calendar */
.kalwrap { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 28px; margin-top: 18px; align-items: start; }
@media (max-width: 760px) { .kalwrap { grid-template-columns: minmax(0, 1fr); } }
.kalkop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; text-transform: capitalize; }
.kalgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kalwd { font-size: 12px; color: var(--muted); text-align: center; padding: 4px 0; }
.kaldag { aspect-ratio: 1; border: 1px solid transparent; border-radius: 10px; background: none; font: inherit; font-size: 14px;
  font-variant-numeric: tabular-nums; cursor: pointer; color: var(--fg); position: relative; }
.kaldag:hover:not(:disabled) { border-color: var(--line-strong); }
.kaldag:disabled { color: var(--muted); cursor: default; opacity: .55; }
.kaldag.k-vandaag { border-color: var(--fg); }
.kaldag.k-ritme { background: var(--accent); color: #fff; font-weight: 600; }
.kaldag.k-extra { background: var(--tint); color: var(--accent); font-weight: 600; border-color: var(--accent); }
.kaldag.k-overgeslagen { text-decoration: line-through; color: var(--muted); border: 1px dashed var(--line-strong); }
.kaldag.k-gedaan::after { content: "✓"; position: absolute; top: 1px; right: 4px; font-size: 10px; }
.kallegenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.kallegenda span { display: inline-flex; align-items: center; gap: 6px; }
.kallegenda i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.kallegenda i.k-ritme { background: var(--accent); }
.kallegenda i.k-extra { background: var(--tint); border: 1px solid var(--accent); }
.kallegenda i.k-overgeslagen { border: 1px dashed var(--line-strong); }
.kallegenda i.k-gedaan { background: var(--line); }
.kalkomend h4 { margin: 0 0 10px; }
.kalkomend ul { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.kalkomend li { display: flex; flex-direction: column; }

/* ---------- customer portal on a box: Beheer ---------- */
/* a menu on the left (icon and text) next to the part that is open; on a phone the menu is a row that scrolls */
body.beheer-open .page { max-width: 1240px; }
body.beheer-open #company, body.beheer-open #skillsub { display: none; }   /* the menu shows which part is open */
.beheerlayout { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 28px; align-items: start; }
.beheermenu { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 2px; background: var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 8px; }
.bhitem { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; font-size: 14.5px; color: var(--fg);
  transition: background .15s, color .15s; }
.bhitem svg { flex: none; color: var(--muted); transition: color .15s; }
.bhitem:hover { background: rgba(0, 0, 0, .05); text-decoration: none; }
.bhitem.on { background: var(--tint); color: var(--accent); font-weight: 600; }
.bhitem.on svg { color: var(--accent); }
.beheerinhoud { min-width: 0; }
.beheerinhoud .item { margin-top: 16px; }
.beheerinhoud .item h4 { margin: 0 0 12px; }
.beheerinhoud > div > .finhead:first-child { margin-top: 0; }
.bhkop { font-size: 20px; letter-spacing: -0.015em; margin: 36px 0 0; }
.bhkop + .item { margin-top: 12px; }
.tabs button:disabled { opacity: .4; cursor: default; }
@media (max-width: 820px) {
  .beheerlayout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .beheermenu { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 6px; gap: 4px; }
  .beheermenu::-webkit-scrollbar { display: none; }
  .beheermenu .navhead { display: none; }
  .bhitem { flex: none; padding: 8px 12px; }
}

/* Overzicht: the key figures as tiles that lead to their part */
.bhtegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.bhtegels .skeleton { min-height: 112px; }
.bhtegels .error { grid-column: 1 / -1; margin-top: 0; }
a.bhtegel { color: var(--fg); transition: box-shadow .15s, transform .15s; }
a.bhtegel:hover { text-decoration: none; box-shadow: var(--shadow-hover); transform: translateY(-1px); }

/* Skill Base: one chart with a switch, then a card per skill with its figures and its PvE */
.bhgrafiekkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.beheerinhoud .bhgrafiekkop h4 { margin: 0; }
.bhgrafiekkop .tabs.mtabs { margin: 0; }
.bhgrafiekkop .tabs button { padding: 6px 14px; font-size: 13px; }
.bhskillkop { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.bhskill h3 { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.bhskillkop p { margin: 4px 0 0; font-size: 14px; }
.bhbetrouw { display: flex; flex-direction: column; align-items: flex-end; flex: none; cursor: help; }
.bhbetrouw b { font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bhbetrouw span { font-size: 12px; color: var(--muted); }
.bhcijfers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 20px; margin: 18px 0 0; }
.bhcijfers div { min-width: 0; }
.bhcijfers dt { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.bhcijfers dd { margin: 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bhcijfers div[title] dt { text-decoration: underline dotted rgba(0, 0, 0, .25); text-underline-offset: 3px; cursor: help; }
.bhhandwerk { font-size: 13px; margin: 14px 0 0; }
.bhpve { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.bhpve summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--accent); list-style: none; }
.bhpve summary::-webkit-details-marker { display: none; }
.bhpve summary::before { content: '›'; display: inline-block; width: 12px; transition: transform .15s; }
.bhpve[open] summary::before { transform: rotate(90deg); }
.bhpve .pvebody { margin-top: 12px; }
/* headings in a PvE or legal text are headings, not the small labels of a card */
body.app .beheerinhoud .mdlite h4, body.app .beheerinhoud .mdlite h5 { font-family: inherit; font-size: 15px; font-weight: 600;
  line-height: 1.4; text-transform: none; letter-spacing: 0; color: var(--fg); }

/* Runs: filters above the list; the list itself looks like the one on the dashboard */
.bhfilter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 16px; }
.bhfilter label { display: flex; flex-direction: column; gap: 3px; margin: 0; font-size: 12px; }
.bhfilter .link { font-size: 14px; align-self: center; }
/* a field with its icon in front: the icon sits inside the field's own border */
.bhveld { position: relative; display: flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.bhveld.zoek { flex: 1 1 240px; }
.bhicoon { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.bhveld:focus-within .bhicoon { color: var(--accent); }
#deel-runs .bhveld input[type=search], .bhfilter .bhveld select { width: 100%; min-width: 0; padding: 9px 30px 9px 36px; font-size: 14px; }
#deel-runs .bhveld input[type=search] { padding-right: 12px; }
.bhfilter .bhveld select { max-width: 190px; }
.bhveld.zoek { flex: 1 1 200px; }
/* the two dates in one field: from – to */
.bhveld.datum { gap: 4px; padding: 0 10px 0 36px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--card);
  transition: border-color .15s, box-shadow .15s; }
.bhveld.datum:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0, 113, 227, .18); }
#deel-runs .bhveld.datum input[type=date] { width: auto; border: 0; box-shadow: none; padding: 8px 2px; font-size: 14px; background: transparent; }
.bhtot { color: var(--muted); }
#deel-runs th.c-persoon { width: 24%; }
#deel-runs th.c-duur { width: 96px; }
#deel-runs th.c-act { width: 84px; }
#deel-runs .foldfile code { font-size: 12px; }
.bhpersoon { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bhmeer { display: flex; justify-content: center; margin-top: 16px; }
@media (max-width: 760px) { body.app #deel-runs table.runs { min-width: 900px; } }    /* scrolls sideways, every column readable */
@media (max-width: 560px) {
  .bhfilter > * { flex: 1 1 100%; }
  .bhveld select { max-width: none; }
  .bhveld.datum { justify-content: space-between; }
  #deel-runs .bhveld.datum input[type=date] { flex: 1 1 0; min-width: 0; }
}

/* Security: the security description as a document, with its contents as buttons that jump to a section */
.docvel { padding: 28px 32px; }
.dochead { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.dochead > div { max-width: 68ch; }
.dochead p { font-size: 16px; margin: 0 0 8px; }
.dochead .btn { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.dochead .docversie { font: 12px var(--mono); margin: 0; }
.docinhoud { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.docinhoud button { border: 1px solid var(--line-strong); background: var(--card); border-radius: 980px; padding: 5px 12px; font-size: 13px; color: var(--fg); }
.docinhoud button:hover { border-color: var(--accent); color: var(--accent); }
.docbody { max-width: 780px; font-size: 15px; line-height: 1.6; }
.docbody p { margin: 0 0 12px; }
.docbody ul { margin: 0 0 14px; padding-left: 20px; }
.docbody li { margin-bottom: 6px; }
.docbody li::marker { color: var(--accent); }
.docbody code, .dochead code { font: .9em var(--mono); background: var(--tint); padding: 1px 5px; border-radius: 4px; }
.dockop { font-size: 21px; letter-spacing: -0.015em; margin: 34px 0 12px; padding-top: 22px; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.docbody > .dockop:first-child { border-top: 0; padding-top: 0; margin-top: 22px; }
body.app .docbody h4.docsub { font-size: 16px; color: var(--fg); margin: 24px 0 8px; }
.docbody .tablewrap { margin: 6px 0 18px; box-shadow: none; border: 1px solid var(--line); }
body.app .docbody table.runs { min-width: 560px; }
.doctabel td { vertical-align: top; font-size: 14px; }
.dockader { margin: 16px 0 20px; padding: 14px 18px; border-radius: 12px; background: var(--tint); }
.dockader.let { background: #fbf2e3; }
.dockader span { display: block; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.dockader.let span { color: #9a5a00; }
.dockader p { margin: 4px 0 0; }
.docfeiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 22px; margin: 4px 0 8px; }
.docfeiten div { border-top: 2px solid var(--accent); padding-top: 10px; }
.docfeiten dt { font-weight: 600; margin-bottom: 4px; }
.docfeiten dd { margin: 0; color: var(--muted); font-size: 14px; }
.docstappen { list-style: none; padding: 0; margin: 0 0 16px; counter-reset: stap; display: grid; gap: 10px; }
.docstappen li { counter-increment: stap; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; margin: 0; }
.docstappen li::before { content: counter(stap); font: 600 12px/24px var(--mono); text-align: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--tint); color: var(--accent); }
.docvraag { border-bottom: 1px solid var(--line); padding: 12px 0; }
.docvraag summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.docvraag summary::-webkit-details-marker { display: none; }
.docvraag summary::after { content: '+'; color: var(--muted); flex: none; }
.docvraag[open] summary::after { content: '–'; }
.docvraag p { margin: 8px 0 0; color: var(--muted); }
.docstroom { margin: 0 0 18px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 16px; overflow-x: auto; }
.docstroom svg { display: block; width: 100%; min-width: 520px; height: auto; }
.docstroom .s-vlak { fill: var(--card); stroke: var(--line-strong); stroke-width: 1.5; }
.docstroom .s-kastje { fill: var(--tint); stroke: var(--accent); stroke-width: 1.5; }
.docstroom .s-weg { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 5 4; }
.docstroom .s-kop { fill: var(--fg); font-size: 17px; font-weight: 600; }
.docstroom .s-klein { fill: var(--muted); font-size: 13px; }
.docstroom .s-label { fill: var(--accent); font: 500 13px var(--mono); }
.docstroom .s-nee { fill: var(--err); }
.docstroom .s-pijl { stroke: var(--accent); stroke-width: 2.2; }
.docstroom .s-vul { fill: var(--accent); }
.docstroom .s-streep { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 4; }
.docstroom .s-kruis { stroke: var(--err); stroke-width: 2.6; stroke-linecap: round; fill: none; }
.docslot { font-size: 13px; margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
@media (max-width: 960px) { .docfeiten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .docfeiten { grid-template-columns: minmax(0, 1fr); } .docvel { padding: 20px; } }

/* Instellingen: tabs; Licentie en legal; Account */
.tabs.mtabs.bhtabs { margin: 0 0 4px; }
.lgstatus { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 15px; }
.lgskills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 16px 0 0; font-size: 13px; }
.lgskills .muted { margin-right: 4px; }
.lggroep { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin: 22px 0 2px; }
.lgrij { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.lggroep + .lgrij { border-top: 0; }
.lgnaam { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.lgnaam p { margin: 2px 0 0; font-size: 13px; }
.lgletter { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px;
  background: var(--tint); color: var(--accent); font: 600 12px var(--mono); text-transform: lowercase; }
.lgacties { display: flex; align-items: center; gap: 14px; flex: none; font-size: 14px; }
.pill.lgconcept { color: #9a5a00; background: #fbf2e3; vertical-align: 2px; margin-left: 6px; }
.lgterug { margin: 0; font-size: 14px; }
.lgdoc { padding: 30px 36px; }
.lgdockop { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; }
.lgdockop h2 { margin: 0; font-size: 26px; letter-spacing: -0.02em; }
.lgdockop .pill.lgconcept { margin-left: 0; }
.lgversie { font: 12px var(--mono); margin: 6px 0 0; }
.bhcijfers dd code { font: 600 13px var(--mono); }
.bhcijfers.breed { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.bhtarief form.inline { max-width: 420px; }
.lgtekst { max-width: 780px; margin-top: 22px; font-size: 15px; line-height: 1.65; }
.lgtekst h3 { font-size: 19px; letter-spacing: -0.01em; margin: 32px 0 10px; }
body.app .beheerinhoud .lgtekst h4 { font-size: 16.5px; margin: 28px 0 8px; }
body.app .beheerinhoud .lgtekst h5 { margin: 20px 0 6px; }
.lgtekst > p:first-child { color: var(--muted); }
.lgtekst p { margin: 0 0 10px; }
.lgtekst blockquote { margin: 14px 0; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--tint); border-radius: 0 10px 10px 0; }
.lgtekst blockquote p:last-child { margin: 0; }
.lgtekst hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }
.lgtekst .tablewrap { margin: 8px 0 16px; box-shadow: none; border: 1px solid var(--line); }
body.app .lgtekst table.runs { min-width: 520px; }
.mdtabel td { vertical-align: top; font-size: 14px; }
.accww { max-width: 420px; }
.accww label { margin: 14px 0 6px; }
.accww .row { margin-top: 18px; }
@media (max-width: 640px) {
  .lgrij { flex-direction: column; align-items: flex-start; }
  .lgdoc { padding: 22px 20px; }
}

/* BlackBox: Performance is the hardware: now, the last 24 hours, the model and the disk */
.perftiles.hwtegels { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
@media (max-width: 1100px) { .perftiles.hwtegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .perftiles.hwtegels { grid-template-columns: minmax(0, 1fr); } }
.hwtegel small { overflow-wrap: anywhere; }
.hwbalk { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 6px 0 2px; }
.hwbalk i { display: block; height: 100%; background: var(--accent); }
.hwbalk.vol i { background: #ff9f0a; }
#perfpane .bhgrafiekkop h4 { margin: 0; }
.hwlegenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.hwlegenda span { display: inline-flex; align-items: center; gap: 6px; }
.hwlegenda i, .hwstip { display: inline-block; width: 12px; height: 3px; border-radius: 2px; flex: none; }
.hwl-cpu.hwstip, .hwlegenda i.hwl-cpu { background: var(--accent); }
.hwl-mem.hwstip, .hwlegenda i.hwl-mem { background: #34c759; }
.hwl-gpu.hwstip, .hwlegenda i.hwl-gpu { background: #ff9f0a; }
.hwchart .hwlijn { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.hwchart .hwlijn.hwl-cpu { stroke: var(--accent); }
.hwchart .hwlijn.hwl-mem { stroke: #34c759; }
.hwchart .hwlijn.hwl-gpu { stroke: #ff9f0a; }
.hwchart .hwcursor { stroke: var(--line-strong); stroke-width: 1; }
.hwchart .fintip span:not(.muted) { display: flex; align-items: center; gap: 6px; }
#perfpane .hwsinds, #perfpane .hwververs { font-size: 12px; margin: 8px 0 0; }
.hwkolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 820px) { .hwkolommen { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Overzicht > Personen: teams with a manager and employees ---------- */
.pskop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 36px 0 4px; }
.pskop .bhkop { margin: 0; }
.pskop p { margin: 4px 0 0; font-size: 14px; }
.psknoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.psknoppen .btn, .psleeg .btn { display: inline-flex; align-items: center; gap: 6px; }
.beheerinhoud .item.psteam { padding: 0; overflow: hidden; }
.psteamkop { display: flex; align-items: center; gap: 14px; padding: 18px 24px; }
.psteamicoon { width: 40px; height: 40px; border-radius: 12px; background: var(--tint); color: var(--accent); flex: none;
  display: inline-flex; align-items: center; justify-content: center; }
.psteamnaam { flex: 1; min-width: 0; }
.psteamnaam h3 { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.psteamnaam span { font-size: 13px; color: var(--muted); }
.psmanager { padding: 4px 24px; background: #fafafc; border-top: 1px solid var(--line); }
.psmanager .psrij { border-top: 0; }
.psblok { padding: 16px 24px 18px; border-top: 1px solid var(--line); }
.beheerinhoud .psblok h4 { margin: 0 0 6px; }
.psblokkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.beheerinhoud .psblokkop h4 { margin: 0; }
.tabs.mtabs.psmodus { margin: 0; }
.psmodus button { padding: 6px 14px; font-size: 13px; }
.pshint { font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.psgroep .psteamkop { padding-bottom: 14px; }

/* one person: badge, name and e-mail, role, own skills, ⋯ */
.psrij { display: grid; grid-template-columns: auto minmax(150px, 230px) auto minmax(0, 1fr) auto; align-items: center;
  gap: 8px 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.psblok > h4 + .psrij, .psblok > .psrij:first-child { border-top: 0; }
.psid { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.psid b { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psid > span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psid .link { font-size: 13px; text-align: left; }
.psbadges { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.psrijskills { min-width: 0; }
.pschiplabel { display: block; font-size: 11.5px; color: var(--muted); margin: 0 0 4px; }
.psmeer { color: var(--muted); }
.psav { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.psav.groot { width: 40px; height: 40px; font-size: 14px; }
.psav.leeg { background: transparent; border: 1.5px dashed var(--line-strong); color: var(--muted); }
.psrol { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: rgba(0, 0, 0, .05); color: var(--muted); white-space: nowrap; }
.psrol.manager { background: var(--tint); color: var(--accent); }
.psrol.financieel { background: var(--ok-bg); color: var(--ok); }

/* skills as chips: "all skills" first; the others then show as included */
.pschips { display: flex; flex-wrap: wrap; gap: 6px; }
.pschip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--card); color: var(--fg); font-size: 13px; line-height: 1.4; transition: background .15s, border-color .15s, color .15s, opacity .15s; }
.pschip svg { display: none; flex: none; }
.pschip:hover { border-color: var(--accent); }
.pschip.aan { background: var(--tint); border-color: rgba(0, 113, 227, .35); color: var(--accent); font-weight: 500; }
.pschip.aan svg { display: block; }
.pschip.gedimd { opacity: .55; }
.pschip.alle:not(.aan) { border-style: dashed; color: var(--muted); }
.pschip:disabled { cursor: progress; }
.psvoeg { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 10px;
  border: 1.5px dashed var(--line-strong); border-radius: 12px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 500;
  transition: border-color .15s, color .15s, background .15s; }
.psvoeg:hover { border-color: var(--accent); color: var(--accent); background: var(--tint); }
.beheerinhoud .item.psleeg { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 36px 24px; color: var(--muted); }
.psleeg > svg { width: 28px; height: 28px; color: var(--accent); }
.psleeg p { margin: 0; max-width: 46ch; }

/* a switch (checkbox with role=switch) */
.psschakel { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 400; color: var(--fg); cursor: pointer; }
.psschakel input { appearance: none; -webkit-appearance: none; width: 34px; height: 20px; margin: 0; border-radius: 999px; flex: none;
  background: var(--line-strong); position: relative; cursor: pointer; transition: background .15s; }
.psschakel input::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.psschakel input:checked { background: var(--accent); }
.psschakel input:checked::before { transform: translateX(14px); }
.psschakel input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .psschakel input, .psschakel input::before { transition: none; } }

/* the ⋯ menu */
.psmenu { position: absolute; z-index: 60; min-width: 190px; padding: 6px; background: var(--card); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .05); animation: pop .14s ease-out; }
.psmenu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 8px; padding: 9px 12px;
  font-size: 14px; color: var(--fg); }
.psmenu button:hover, .psmenu button:focus-visible { background: rgba(0, 0, 0, .05); outline: none; }
.psmenu button.gevaar { color: var(--err); }
.psmenu button.gevaar:hover, .psmenu button.gevaar:focus-visible { background: var(--err-bg); }

/* the windows to add and edit */
.modal.psvenster { max-width: 480px; }
.psvenster > label:first-of-type { margin-top: 4px; }
.psvensterknoppen { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
body.app .btn.gevaar:not(.ghost) { background: var(--err); }
body.app .btn.gevaar:not(.ghost):hover { background: #b80012; }
.psnieuw { display: grid; gap: 8px; margin-top: 10px; padding: 14px; border-radius: 12px; background: var(--bg); }
.psnieuw .psschakel { margin-top: 4px; }
.pskeuze { display: grid; gap: 8px; }
.pskeuze.rij { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pskeuze label { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--line-strong);
  border-radius: 12px; color: var(--fg); font-weight: 400; cursor: pointer; transition: border-color .15s, background .15s; }
.pskeuze label:has(input:checked) { border-color: var(--accent); background: var(--tint); }
.pskeuze input { accent-color: var(--accent); margin: 3px 0 0; flex: none; }
.pskeuze span { display: flex; flex-direction: column; gap: 2px; }
.pskeuze b { font-size: 14px; font-weight: 600; }
.pskeuze small { font-size: 12.5px; color: var(--muted); }
.pskeuze.rij label { align-items: center; padding: 10px 12px; }
.pskeuze.rij input { margin-top: 0; }
.psvenster .psschakel[data-alleen] { margin-top: 14px; }

/* a short message at the bottom: saved, or what went wrong */
#psmelding { position: fixed; left: 50%; bottom: 24px; z-index: 70; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  padding: 10px 18px; border-radius: 999px; background: #1d1d1f; color: #fff; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  transition: opacity .2s, transform .2s; }
#psmelding.toon { opacity: 1; transform: translate(-50%, 0); }
#psmelding.fout { background: var(--err); }

@media (max-width: 720px) {
  .psrij { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av id menu" "av badges badges" "skills skills skills"; }
  .psrij > .psav { grid-area: av; align-self: start; }
  .psrij > .psid { grid-area: id; }
  .psrij > .psbadges { grid-area: badges; }
  .psrij > .psrijskills { grid-area: skills; }
  .psrij > :last-child { grid-area: menu; }
  .psbadges:empty, .psrijskills:empty { display: none; }
  .psteamkop, .psblok, .psmanager { padding-left: 18px; padding-right: 18px; }
  .pskeuze.rij { grid-template-columns: minmax(0, 1fr); }
}

/* the files of a run (batch upload): a paperclip with the count that folds open (kastje.js bestanden) */
details.bijlagen summary { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px;
  background: var(--bg); color: var(--fg); font-size: 13px; cursor: pointer; list-style: none; user-select: none; white-space: nowrap; }
details.bijlagen summary::-webkit-details-marker { display: none; }
details.bijlagen summary:hover { background: var(--tint); color: var(--accent); }
details.bijlagen[open] summary { background: var(--tint); color: var(--accent); }
details.bijlagen ul { margin: 8px 0 2px; padding: 0 0 0 4px; list-style: none; }
details.bijlagen li { padding: 2px 0; font-size: 13px; overflow-wrap: anywhere; }

/* ---------- BlackBox > Skills > Proces: the process as steps on paper (admin.js procesKaarten) ---------- */
#sbbody.pskaal { background: none; box-shadow: none; padding: 0; }
.pshead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 16px; }
.pshead h3 { font-size: 22px; letter-spacing: -0.02em; margin: 0 0 2px; }
.pshead p { margin: 0; font-size: 14px; }
.psbron { font-size: 12px; color: var(--muted); }
.psrij { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: none; }
.psrij li { display: flex; align-items: center; gap: 8px; max-width: 240px; padding: 6px 12px 6px 6px; border-radius: 980px;
  background: var(--card); box-shadow: var(--shadow); font-size: 13px; }
.psrij li b { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--fg);
  color: var(--card); font-size: 12px; }
.psrij li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psstappen { list-style: none; margin: 0; padding: 0; }
.psstap { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding-bottom: 16px; }
.psstap:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--line-strong); }
.psnr { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--fg); color: var(--card);
  font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.pskaart { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 26px 18px; }
.pskaart header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.psstapnr { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.psdoet { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 980px; font-size: 12px; font-weight: 600; }
.psdoet i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.psdoet.ai { color: var(--accent); background: var(--tint); }
.psdoet.auto { color: var(--muted); background: rgba(0, 0, 0, .05); }
.pskaart h3 { font-size: 19px; letter-spacing: -0.01em; line-height: 1.3; margin: 6px 0 6px; }
.psuitleg { margin: 0; color: var(--fg); font-size: 15px; max-width: 72ch; }
.psio { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 14px; }
.psio > div { background: var(--bg); border-radius: var(--radius-sm); padding: 10px 14px; }
.psio span, .psklaar span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.psio b { font-weight: 500; font-size: 14px; }
.psklaar { margin: 12px 0 0; font-size: 14px; }
.psklaar span { display: inline; margin-right: 4px; }
.psmeer { margin-top: 12px; font-size: 13px; }
.psmeer summary { cursor: pointer; color: var(--accent); width: fit-content; }
.psmeer > div { margin-top: 8px; padding: 12px 14px; background: var(--bg); border-radius: var(--radius-sm); color: var(--muted); }
.psmeer h5 { margin: 10px 0 2px; font-size: 12px; color: var(--fg); }
.psmeer h5:first-child { margin-top: 0; }
.psmeer p { margin: 0; }
.psover { margin: 4px 0 0 60px; }
@media (max-width: 640px) {
  .psstap { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  .psnr { width: 32px; height: 32px; font-size: 14px; }
  .psstap:not(:last-child)::before { left: 15px; top: 32px; }
  .pskaart { padding: 16px 18px; }
  .psover { margin-left: 0; }
}

/* saving a skill: the button turns while it saves, then says it is saved (admin.js skillModal) */
.btnspin { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .8s linear infinite; }
.btn.opgeslagen, .btn.opgeslagen:disabled { background: var(--ok); color: #fff; opacity: 1; }

/* ---------- Beheer > Overzicht > Teams en personen: the organisation as a tree (app.js psBoom) ---------- */
.psboom { margin-top: 16px; padding: 28px 20px 18px; overflow-x: auto; }
.psboomin { min-width: max-content; display: flex; flex-direction: column; align-items: center; margin: 0 auto; }
.psknoop { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 10px 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); }
.psknoop .pstekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.psknoop .pstekst b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psknoop .pstekst > span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.psknoop .psteamicoon { width: 34px; height: 34px; border-radius: 10px; }
.pswortel { position: relative; background: var(--fg); color: var(--card); border-color: var(--fg); padding: 12px 18px; }
.pswortel .pstekst b { font-size: 15px; }
.pswortel .pstekst > span { color: rgba(255, 255, 255, .65); }
.pswortel .psteamicoon { background: rgba(255, 255, 255, .14); color: var(--card); }
.pswortel::after { content: ""; position: absolute; left: 50%; bottom: -22px; height: 22px; border-left: 2px solid var(--line-strong); }
/* the branches: one horizontal line over all teams, a short line down to each (the classic org chart) */
.pstakken { list-style: none; display: flex; justify-content: center; margin: 22px 0 0; padding: 0; }
.pstak { position: relative; display: flex; flex-direction: column; align-items: stretch; width: 228px; padding: 22px 10px 0; }
.pstak::before, .pstak::after { content: ""; position: absolute; top: 0; width: 50%; height: 22px; border-top: 2px solid var(--line-strong); }
.pstak::before { right: 50%; }
.pstak::after { left: 50%; border-left: 2px solid var(--line-strong); }
.pstak:first-child::before, .pstak:last-child::after { border-top: 0; }
.pstak:last-child::before { border-right: 2px solid var(--line-strong); border-top-right-radius: 12px; right: calc(50% - 1px); }
.pstak:first-child::after { border-top-left-radius: 12px; }
.pstak:only-child::after { border-top: 0; border-radius: 0; }
.pstak:only-child::before { display: none; }
.psteamknoop { width: 100%; cursor: pointer; font: inherit; color: inherit; border-color: rgba(0, 113, 227, .25);
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.psteamknoop:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.psteamknoop.los { cursor: default; border-style: dashed; box-shadow: none; background: var(--bg); }
.psteamknoop.los:hover { transform: none; border-color: var(--line); }
/* under the team: the manager, then the employees on a line, like a folder tree */
.psmanknoop { position: relative; margin: 14px 0 0 18px; }
.psmanknoop::before { content: ""; position: absolute; left: -12px; top: -15px; height: calc(50% + 15px); width: 10px;
  border-left: 2px solid var(--line); border-bottom: 2px solid var(--line); border-bottom-left-radius: 8px; }
.psmanknoop.leeg { border-style: dashed; box-shadow: none; color: var(--muted); }
.psmanknoop .psav, .psblad .psav { width: 28px; height: 28px; font-size: 11px; }
.psbladeren { list-style: none; margin: 4px 0 0 36px; padding: 0; }
.psblad, .psbladleeg { position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 8px; margin-top: 4px; border-radius: 10px;
  font-size: 13px; }
.psblad::before, .psbladleeg::before { content: ""; position: absolute; left: -14px; top: -10px; height: calc(50% + 10px); width: 12px;
  border-left: 2px solid var(--line); border-bottom: 2px solid var(--line); border-bottom-left-radius: 8px; }
.psblad span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psblad[draggable=true] { cursor: grab; }
.psblad[draggable=true]:hover { background: var(--bg); }
.psblad.sleept { opacity: .45; }
.psbladleeg { color: var(--muted); font-style: italic; font-size: 12px; }
.pstak.los .psbladeren { margin-left: 14px; }
.pstak.los .psblad::before, .pstak.los .psbladleeg::before { display: none; }
/* while dragging: the teams show where the employee can go */
.psboom.sleept .pstak[data-dropteam] > .psknoop:first-child { border-style: dashed; border-color: var(--accent); }
.pstak.erboven > .psknoop:first-child { background: var(--tint); box-shadow: 0 0 0 4px rgba(0, 113, 227, .15); }
.psboomhint { text-align: center; margin: 18px 0 0; }
.psdetailkop { font-size: 17px; margin: 28px 0 0; }
.psteam.psflits { animation: psflits 1.4s ease; }
@keyframes psflits { 0%, 40% { box-shadow: 0 0 0 4px rgba(0, 113, 227, .35); } 100% { box-shadow: var(--shadow); } }
/* adding people who are already there */
.pskieszoek { width: 100%; margin-top: 6px; }
.pskieslijst { max-height: 320px; overflow-y: auto; margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; }
.pskies { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0; cursor: pointer; font-weight: 400; }
.pskies + .pskies { border-top: 1px solid var(--line); }
.pskies:hover { background: var(--bg); }
.pskies input { margin: 0; flex: none; }
.pskies .pstekst { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.pskies .pstekst b { font-size: 14px; } .pskies .pstekst span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.pswaar { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--bg); border-radius: 980px; padding: 3px 9px; white-space: nowrap; }
@media (max-width: 640px) { .psboom { padding: 20px 12px 14px; } .pstak { width: 200px; } }
.psboomlos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 22px; }
.pslos { border: 1.5px dashed var(--line-strong); border-radius: 14px; padding: 12px 14px; background: var(--bg);
  transition: border-color .15s, background .15s; }
.pslostitel { display: flex; flex-direction: column; line-height: 1.3; }
.pslostitel b { font-size: 14px; } .pslostitel span { font-size: 12px; color: var(--muted); }
.pslosmensen { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; }
.pslosmensen .psblad { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 980px; padding: 4px 10px 4px 4px; }
.pslosmensen .psblad::before, .pslosmensen .psbladleeg::before { display: none; }
.pslosmensen .psblad .psrol { font-size: 10px; margin-left: 2px; }
.pslosmensen .psblad span { white-space: nowrap; }
.psboom.sleept .pslos[data-dropteam] { border-color: var(--accent); }
.pslos.erboven { background: var(--tint); border-color: var(--accent); }

/* ---------- Beheer > Skill Base: one card per skill, like the dashboard's but larger (app.js skillSpec) ---------- */
.bhskills { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 18px; }
.bhskill { display: flex; flex-direction: column; margin: 0; padding: 26px; border-radius: 20px; overflow: hidden;
  transition: box-shadow .2s, transform .2s; }
.bhskill:hover { box-shadow: var(--shadow-hover); }
.bhskill.metfoto { padding-top: 0; }
.bhskillfoto { height: 150px; margin: 0 -26px 20px; background-size: cover; background-position: center; position: relative; }
.bhskillfoto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .18)); }
.bhskill .bhskillkop { display: flex; align-items: center; gap: 14px; }
.bhskill .bhskillkop .icon { width: 48px; height: 48px; border-radius: 12px; background: var(--tint); color: var(--accent); flex: none;
  display: flex; align-items: center; justify-content: center; }
.bhskill .bhskillkop .icon svg { width: 24px; height: 24px; }
.bhskillnaam { flex: 1; min-width: 0; }
.bhskill h3 { font-size: 19px; }
.bhskillnaam p { margin: 3px 0 0; font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* reliability as a ring */
.bhring { position: relative; width: 66px; height: 66px; margin-bottom: 16px; flex: none; display: grid; place-items: center; cursor: help; }
.bhring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.bhringbaan { fill: none; stroke: var(--bg); stroke-width: 6; }
.bhringwaarde { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.bhring.goed .bhringwaarde { stroke: #34c759; } .bhring.matig .bhringwaarde { stroke: #ff9f0a; } .bhring.laag .bhringwaarde { stroke: #ff453a; }
.bhring.leeg .bhringwaarde { stroke: transparent; }
.bhring b { position: relative; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bhring span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 3px; font-size: 11px; color: var(--muted); white-space: nowrap; }
/* the figures as tiles */
.bhtegels2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.bhtegels2.klein { margin-top: 8px; }
.bhtegel2 { background: var(--bg); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.bhtegel2 span { display: block; font-size: 11px; line-height: 1.25; color: var(--muted); min-height: 2.5em; }
.bhtegel2.klein span { min-height: 0; }
.bhtegel2 b { display: block; margin-top: 3px; font-size: 19px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bhtegel2 b small { font-size: 12px; font-weight: 500; color: var(--muted); }
.bhtegel2.klein { background: none; border: 1px solid var(--line); padding: 8px 12px; }
.bhtegel2.klein b { font-size: 14px; font-weight: 600; }
.bhtegel2[title] span { text-decoration: underline dotted rgba(0, 0, 0, .25); text-underline-offset: 3px; cursor: help; }
.bhskill .bhhandwerk { margin: 14px 0 0; font-size: 12px; }
.bhskill .bhpve { margin-top: auto; padding-top: 12px; }
.bhskill .bhhandwerk + .bhpve { margin-top: 12px; }
@media (max-width: 560px) {
  .bhskills { grid-template-columns: 1fr; }
  .bhskill { padding: 20px; } .bhskillfoto { margin: 0 -20px 16px; }
  .bhtegels2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bhtegels2.klein { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bhtegel2.klein { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bhtegel2.klein span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bhtegel2.klein b { margin: 0; flex: none; }
.link.gevaar.skillweg { display: block; margin: 14px auto 0; color: var(--err); font-size: 14px; }
.link.gevaar.skillweg:disabled { opacity: .6; }