/* Huskii Site Control: portaal. Tokens uit de goedgekeurde mockup (portaal-v1), kleuren en lettertype van huskii.be (oklch-tint 264, Space Grotesk). Mobile-first, licht + donker.
   Ruimte komt uit de --s-* tokens en hoeken uit --radius-*. Losse px staan enkel waar een token niets toevoegt:
   randdiktes (1-2px), breekpunten in @media (custom properties werken daar niet) en de grenzen in clamp(). */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/SpaceGrotesk-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/SpaceGrotesk-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/SpaceGrotesk-Bold.woff2') format('woff2'); }

:root {
  color-scheme: light dark;
  --brand: #376ceb; --brand-ink: #fff; --brand-strong: #2456d3; --logo-filter: none;
  --bg: #f6f7f4; --surface: #fff; --surface-2: #f1f2ee; --ink: #15171a; --text: #33363b; --muted: #62676d;
  --line: #e3e5e0; --line-strong: #cfd2cb;
  --ok: #1f7a4a; --ok-bg: #e3f5ea; --warn: #8a5a00; --warn-bg: #fff4cc; --bad: #b3261e; --bad-bg: #fde7e5; --info: #2a4fa8; --info-bg: #e6ecfb;
  --radius: 14px; --radius-m: 10px; --radius-s: 9px; --radius-xs: 6px; --radius-2xs: 5px;
  --gutter: clamp(16px, 3vw, 48px); --gap: clamp(16px, 2vw, 24px);
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-12: 3rem; --s-16: 4rem;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 8px 24px -14px rgb(0 0 0 / 0.18);
  --font: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: 0.2s ease;
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3.1 3L12.8 4.6' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --brand-strong: #5b8fff; --logo-filter: invert(1);
    --bg: #0b0f18; --surface: #131823; --surface-2: #191f2b; --ink: #f3f5f9; --text: #d3d8e0; --muted: #a1a8b5;
    --line: #272e3b; --line-strong: #38404f; --ok: #7fd8a4; --ok-bg: #163324; --warn: #ffd66b; --warn-bg: #3a2f0f; --bad: #ff9a90; --bad-bg: #3b1a17; --info: #9db7ff; --info-bg: #1b2645;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 28px -14px rgb(0 0 0 / 0.6);
    --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3.1 3L12.8 4.6' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
:root[data-theme='dark'] {
  --brand-strong: #5b8fff; --logo-filter: invert(1);
  --bg: #0b0f18; --surface: #131823; --surface-2: #191f2b; --ink: #f3f5f9; --text: #d3d8e0; --muted: #a1a8b5;
  --line: #272e3b; --line-strong: #38404f; --ok: #7fd8a4; --ok-bg: #163324; --warn: #ffd66b; --warn-bg: #3a2f0f; --bad: #ff9a90; --bad-bg: #3b1a17; --info: #9db7ff; --info-bg: #1b2645;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 28px -14px rgb(0 0 0 / 0.6);
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3.1 3L12.8 4.6' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-theme='light'] { color-scheme: light; }
:root[data-theme='dark'] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 400 0.9375rem/1.55 var(--font); overflow-wrap: break-word; }
/* Long unbroken strings (e-mail addresses, ids) may break anywhere; words in labels never break mid-word. */
.site span, code, .facts dd, .who-id b { overflow-wrap: anywhere; }
h1, h2, h3, h4 { color: var(--ink); margin: 0; line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }
p { margin: 0 0 var(--s-4); }
a { color: inherit; }
img, svg { max-width: 100%; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875em; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s-4); top: -4rem; z-index: 20; padding: var(--s-2) var(--s-4); border-radius: var(--radius-s); background: var(--brand); color: var(--brand-ink); font-weight: 600; }
.skip:focus { top: var(--s-2); }

/* ---------- Kader: header, navigatie, inhoud, voet ---------- */
.topbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3) var(--s-4); padding: var(--s-3) var(--gutter); background: var(--surface); border-bottom: 1px solid var(--line); }
.logo { display: inline-flex; align-items: center; gap: var(--s-3); font-weight: 700; color: var(--ink); text-decoration: none; }
.logo img { width: 2rem; height: 2rem; border-radius: var(--radius-s); filter: var(--logo-filter); }
.logo small { font-weight: 500; color: var(--muted); }
.who { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); font-size: 0.875rem; }
.who-id { display: grid; line-height: 1.3; }
.who-id b { color: var(--ink); }
.who-id a { color: var(--muted); font-size: 0.8125rem; }
.who form { margin: 0; }
form + p, form + .note { margin-top: var(--s-4); }
.theme-error { font-size: 0.75rem; font-weight: 600; color: var(--bad); }
@media (max-width: 479px) {
  .who { width: 100%; margin-left: 0; flex-wrap: nowrap; }
  .who-id { flex: 1; min-width: 0; }
  .who-id b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .who > .badge { display: none; }
}
nav.main { display: flex; gap: var(--s-1); padding: 0 var(--gutter); background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
/* Phones: the menu scrolls sideways; a fade at the right edge shows there is more (no JS). */
@media (max-width: 899px) {
  nav.main { mask-image: linear-gradient(to right, #000 calc(100% - var(--s-12)), transparent); padding-right: var(--s-12); }
}
nav.main a { flex: none; padding: var(--s-3); font-size: 0.875rem; font-weight: 500; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
nav.main a:hover { color: var(--ink); }
nav.main a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--ink); }
main { flex: 1; width: 100%; max-width: 90rem; margin: 0 auto; padding: var(--s-8) var(--gutter) var(--s-16); }
main.panel { flex: none; width: calc(100% - 2 * var(--gutter)); max-width: 30rem; margin: var(--s-6) auto var(--s-16); padding: var(--s-8) var(--s-6);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
/* Phones keep a fixed top margin (the form starts high, above the keyboard); wider screens get the airy one. */
@media (min-width: 640px) { main.panel { margin-top: clamp(var(--s-6), 10vh, 7rem); padding: var(--s-8); } }
.footer { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-6) var(--gutter); border-top: 1px solid var(--line); color: var(--muted); font-size: 0.8125rem; }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-6); }
.pagehead p { margin: var(--s-2) 0 0; color: var(--muted); }
.stack { display: grid; gap: var(--gap); }
.grid2 { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 900px) { .grid2 { grid-template-columns: 2fr 1fr; } }

/* ---------- Kaarten, cijfers ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.pad { padding: var(--s-5) var(--s-6); }
.card:not(.pad) > h2, .card:not(.pad) > h3 { padding: var(--s-5) var(--s-6) 0; }
.card.pad > h2, .card.pad > h3 { margin-bottom: var(--s-2); }
.card.pad > :last-child { margin-bottom: 0; }
.sectionhead { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-3); }
.sectionhead p { margin: var(--s-1) 0 0; color: var(--muted); font-size: 0.875rem; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.kpi { padding: var(--s-4); }
@media (min-width: 640px) { .kpis { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); } .kpi { padding: var(--s-5); } }
.kpi .l { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.kpi .v { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem); font-weight: 700; color: var(--ink); margin-top: var(--s-2); line-height: 1.15; }
.kpi .s { font-size: 0.8125rem; color: var(--muted); margin-top: var(--s-1); }
.kpi .v.up { color: var(--ok); } .kpi .v.down { color: var(--bad); }
.up { color: var(--ok); font-weight: 600; }
.down { color: var(--bad); font-weight: 600; }
.empty { margin: 0; padding: var(--s-8) var(--s-6); text-align: center; color: var(--muted); }
.notice, .banner { display: flex; gap: var(--s-3); align-items: center; margin: 0 0 var(--gap); padding: var(--s-3) var(--s-4); border-radius: var(--radius-s); background: var(--ok-bg); color: var(--ok); font-size: 0.875rem; font-weight: 500; }
.notice.error, .banner { background: var(--bad-bg); color: var(--bad); }
.banner.stag { background: var(--warn-bg); color: var(--warn); }
.notice.warn { background: var(--warn-bg); color: var(--warn); }
.notice.info { background: var(--info-bg); color: var(--info); }
.banner b { font-weight: 700; }

/* ---------- Knoppen, badges ---------- */
.btn { font: inherit; font-size: 0.875rem; font-weight: 600; border-radius: var(--radius-m); padding: var(--s-2) var(--s-4); min-height: 2.5rem; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); text-decoration: none; transition: border-color var(--ease), background-color var(--ease); }
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--brand); border-color: var(--brand-strong); color: var(--brand-ink); }
.btn.danger { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.btn.ghost { background: transparent; }
.btn.small { padding: var(--s-1) var(--s-3); min-height: 2rem; font-size: 0.8125rem; border-radius: var(--radius-s); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.ai { display: inline-flex; width: 1.125rem; height: 1.125rem; border-radius: var(--radius-2xs); align-items: center; justify-content: center; font-size: 0.625rem; font-weight: 700; color: #fff; }
.ai.c { background: #d97757; }
.ai.g { background: #10a37f; }
.badge, .tag, .pill { display: inline-flex; align-items: center; gap: var(--s-1); font-size: 0.75rem; font-weight: 600; border-radius: 999px; padding: 0.1875rem var(--s-3); background: var(--surface-2); color: var(--text); border: 1px solid var(--line); white-space: nowrap; }
.badge.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.badge.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.badge.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.badge.info { background: var(--info-bg); color: var(--info); border-color: transparent; }
.tag.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.tag.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.tag.info { background: var(--info-bg); color: var(--info); border-color: transparent; }
.env { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; border-radius: var(--radius-xs); padding: 0.1875rem var(--s-2); text-transform: uppercase; border: 0; }
.env.prod { background: var(--bad-bg); color: var(--bad); }
.env.stag { background: var(--warn-bg); color: var(--warn); }
.env.dev { background: var(--info-bg); color: var(--info); }
.st { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 0.8125rem; }
.st::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentcolor; }
.st.ok { color: var(--ok); } .st.warn { color: var(--warn); } .st.bad { color: var(--bad); }

/* ---------- Formulieren ---------- */
form { margin: 0; }
form + p, form + .note { margin-top: var(--s-4); }
.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.field > span { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.field small { color: var(--muted); font-size: 0.8125rem; }
.input, .field input, .field select, .field textarea { font: inherit; font-size: 1rem; width: 100%; min-height: 2.75rem; padding: var(--s-2) var(--s-3); border-radius: var(--radius-m); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
/* Een veld met een fout: rode rand (en dikker), naast de foutzin eronder. */
.input[aria-invalid='true'], .field input[aria-invalid='true'], .field select[aria-invalid='true'], .field textarea[aria-invalid='true'] { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.field textarea { min-height: 7rem; resize: vertical; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--line); }
.filters .input { width: auto; flex: 1 1 12rem; }

/* ---------- Tabellen: gestapelde kaarten op mobiel, tabel vanaf 640 px ---------- */
.table-wrap { overflow-x: auto; }
.table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; }
.table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.table-wrap tr { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.table-wrap tr:last-child { border-bottom: 0; }
.table-wrap td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: var(--s-1) 0; text-align: right; }
.table-wrap td::before { content: attr(data-label); flex: none; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); text-align: left; }
.table-wrap td.blank { display: none; }
.table-wrap td .cell { min-width: 0; }
table { border-collapse: collapse; font-size: 0.875rem; }
.site b { color: var(--ink); display: block; }
@media (min-width: 640px) { .table-wrap td.nowrap { white-space: nowrap; } }
.site span { color: var(--muted); font-size: 0.8125rem; }
@media (min-width: 640px) {
  .table-wrap table { display: table; }
  .table-wrap thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: table-header-group; }
  .table-wrap tbody { display: table-row-group; }
  .table-wrap tr { display: table-row; padding: 0; border: 0; }
  .table-wrap td, .table-wrap td.blank { display: table-cell; width: auto; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); vertical-align: middle; text-align: left; }
  .table-wrap td::before { content: none; }
  .table-wrap tr:last-child td { border-bottom: 0; }
  .table-wrap tbody tr:hover { background: var(--surface-2); }
  .table-wrap.matrix td:first-child { min-width: 14rem; }
  .table-wrap.matrix th:not(:first-child), .table-wrap.matrix td:not(:first-child) { text-align: center; padding-inline: var(--s-2); }
  th { text-align: left; font-size: 0.75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--line); white-space: nowrap; }
}

/* ---------- Accordeon: native <details> met chevron ---------- */
details.acc { border-top: 1px solid var(--line); }
details.acc:first-child { border-top: 0; }
details.acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-6); min-height: 3.5rem; }
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary:hover { background: var(--surface-2); }
details.acc summary:focus-visible { outline-offset: -2px; border-radius: var(--radius-s); }
details.acc:first-child summary { border-radius: var(--radius) var(--radius) 0 0; }
details.acc:last-child:not([open]) summary { border-radius: 0 0 var(--radius) var(--radius); }
details.acc summary .t { flex: 1; min-width: 0; }
details.acc summary .t b { color: var(--ink); display: block; }
details.acc summary .t span { color: var(--muted); font-size: 0.8125rem; }
details.acc summary::after { content: ''; flex: none; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform var(--ease); }
details.acc[open] > summary::after { transform: rotate(45deg); }
details.acc .acc-body { padding: 0 var(--s-6) var(--s-5); }
.prompt { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--s-4); font-size: 0.875rem; color: var(--ink); margin-bottom: var(--s-3); white-space: pre-wrap; }
.prompt-meta { font-size: 0.75rem; color: var(--muted); margin-bottom: var(--s-2); }
.note { font-size: 0.8125rem; color: var(--muted); }

/* ---------- Bevestigingsdialoog ---------- */
dialog { max-width: min(28rem, calc(100vw - 2 * var(--gutter))); padding: var(--s-6); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
dialog::backdrop { background: rgb(0 0 0 / 0.5); }
dialog h2 { margin-bottom: var(--s-3); }
dialog .actions { justify-content: flex-end; margin-top: var(--s-5); }

/* ---------- Aanmelden, uitnodiging (paneel zonder sessie) ---------- */
[hidden] { display: none !important; }
.btn.block { display: flex; width: 100%; min-height: 2.75rem; }
main.panel h1 { margin-bottom: var(--s-5); font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); }
main.panel > :last-child { margin-bottom: 0; }
.lead { color: var(--text); font-size: 1rem; }
.choices { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
.passkey .note { margin: var(--s-2) 0 0; }
.passkey .note:empty { margin: 0; }
.alt { margin: var(--s-4) 0 0; font-size: 0.875rem; }
.alt a { color: var(--ink); font-weight: 600; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-4); margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--radius-s); background: var(--surface-2); }
.facts dt { color: var(--muted); font-size: 0.875rem; }
.facts dd { margin: 0; color: var(--ink); font-weight: 600; }
.facts.flat { margin: 0; padding: 0; background: none; }
@media (min-width: 640px) { .facts.flat { gap: var(--s-2) var(--s-8); } }
.qr { margin: 0 0 var(--s-5); display: grid; justify-items: center; gap: var(--s-3); text-align: center; }
.qr svg { width: 13rem; height: 13rem; border-radius: var(--radius-s); border: 1px solid var(--line); }
.secret { display: inline-block; margin-top: var(--s-1); padding: var(--s-1) var(--s-2); border-radius: var(--radius-s); background: var(--surface-2); color: var(--ink); letter-spacing: 0.04em; }
.codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-5); padding: var(--s-4) var(--s-4) var(--s-4) var(--s-8); border-radius: var(--radius-s); background: var(--surface-2); }
.codes code { font-size: 1rem; font-weight: 700; color: var(--ink); letter-spacing: 0.04em; }
.codes li::marker { color: var(--muted); }

/* ---------- Mijn account: lijsten binnen accordeons ---------- */
details.acc .acc-body > * { margin-top: 0; margin-bottom: 0; }
details.acc .acc-body > * + * { margin-top: var(--s-4); }
details.acc .acc-body > .qr { margin-bottom: 0; }
.items { list-style: none; margin: 0; padding: 0; display: grid; }
.item { display: grid; gap: var(--s-3); padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; padding-top: 0; }
.item:last-child { padding-bottom: 0; }
.item .meta { min-width: 0; display: grid; gap: var(--s-1); }
.item .meta b { color: var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.item .meta > span:not(.chips) { color: var(--muted); font-size: 0.8125rem; }
.item .meta .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.inline-form form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.inline-form .field { margin: 0; flex: 1 1 11rem; }
.inline-form .btn { flex: none; white-space: nowrap; }
.inline-form .field input { min-height: 2rem; padding: var(--s-1) var(--s-3); font-size: 0.875rem; }
@media (min-width: 640px) {
  .item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); }
  .inline-form form { flex-wrap: nowrap; }
  .inline-form .field { flex: 1 1 14rem; min-width: 12rem; }
}
@media (max-width: 639px) {
  details.acc summary { padding-inline: var(--s-4); }
  details.acc .acc-body { padding-inline: var(--s-4); }
  .item-actions, .inline-form, .inline-form form { width: 100%; }
  .item-actions > form:not(.inline-form form) .btn { width: 100%; }
  .acc-body > .actions > form, .acc-body > .actions .btn { width: 100%; }
}

/* ---------- Gebruikers, Rechten, Activiteit ---------- */
.fl { display: grid; gap: var(--s-1); flex: 1 1 12rem; min-width: 0; font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.fl .input { width: 100%; }
.filters.flat { padding: 0; border-bottom: 0; align-items: flex-end; }
.filters .actions { align-self: flex-end; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.pager .note { margin: 0; }
.pager [aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }
.chk { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; }
.chk input { appearance: none; -webkit-appearance: none; flex: none; margin: 0; width: 1.25rem; height: 1.25rem; border: 2px solid var(--muted); border-radius: var(--radius-2xs); background: var(--surface) no-repeat center / 0.875rem; cursor: pointer; transition: border-color var(--ease), background-color var(--ease); }
.chk input:hover:not(:disabled) { border-color: var(--ink); }
.chk input:checked { background-color: var(--ink); background-image: var(--check); border-color: var(--ink); }
.chk input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Vaste cellen: aan = grijs gevuld met vinkje, uit = gestippeld kader; de reden staat eronder. */
.chk input:disabled { cursor: not-allowed; border-style: dashed; border-color: var(--text); background-color: transparent; }
.chk input:disabled:checked { border-style: solid; border-color: var(--muted); background-color: var(--muted); }
.chk-row { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-2) 0; }
.chk-row input { width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; flex: none; accent-color: var(--ink); }
.checks { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-s); max-height: 12rem; overflow-y: auto; }
.checks legend { padding: 0 var(--s-2); font-size: 0.875rem; font-weight: 600; color: var(--ink); }
details.acc .acc-body form > .actions { margin-top: var(--s-5); align-items: center; }
.changes { margin: var(--s-3) 0 0; padding-left: var(--s-5); max-height: 14rem; overflow-y: auto; font-size: 0.875rem; }
.changes li + li { margin-top: var(--s-1); }
.manage { display: grid; gap: var(--s-3); padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.manage:first-child { border-top: 0; padding-top: 0; }
.manage p { margin: var(--s-1) 0 0; }
.answer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: var(--s-4) 0 0; color: var(--ink); }
ul.plain { margin: var(--s-2) 0 0; padding-left: var(--s-5); }
details.acc .acc-body h3 { margin-bottom: var(--s-1); }
main > .card + .note, main > .card + .card { margin-top: var(--gap); }
dialog form .actions { justify-content: flex-end; }
@media (min-width: 640px) {
  .manage { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-6); }
  dialog#invite-dialog { width: 28rem; }
}
@media (max-width: 639px) {
  .manage form .btn, .filters .actions, .filters .actions .btn { width: 100%; }
  /* Telefoon: telling bovenaan, Vorige en Volgende samen op één rij. */
  .pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-3); }
  .pager .note { grid-column: 1 / -1; order: -1; text-align: center; }
  .pager .btn { width: 100%; }
}

/* ---------- Documentatie en Hulp (docs/portal, gerenderd door src/portal/markdown.ts) ---------- */
.doclist { list-style: none; margin: 0; padding: 0; }
.doclist li { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.doclist li:last-child { border-bottom: 0; }
.doc { max-width: 68ch; }
.doc h2, .doc h3, .doc h4 { margin: var(--s-6) 0 var(--s-2); }
.doc > :first-child { margin-top: 0; }
.doc p, .doc ul, .doc ol { margin: 0 0 var(--s-3); }
.doc ul, .doc ol { padding-left: var(--s-6); }
.doc li + li { margin-top: var(--s-1); }
.doc pre { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-3) var(--s-4); overflow-x: auto; margin: 0 0 var(--s-3); }
.doc pre code { font-size: 0.9375rem; word-break: break-all; white-space: pre-wrap; }

/* ---------- Thema-knop en print ---------- */
.theme-toggle { min-width: 2.5rem; }
@media print { .topbar, nav.main, .footer, .skip { display: none; } body { background: #fff; color: #000; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- Rechten: overzicht per onderdeel, onderdelen, vaste cellen ---------- */
.stack > section { min-width: 0; }
.sectionhead h2 { font-size: 1.125rem; }
.sectionhead p { max-width: 70ch; }
.count-cell { display: inline-flex; align-items: center; justify-content: center; min-width: 3.25rem; padding: 0.1875rem var(--s-2); border-radius: 999px; font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }
.count-cell.all { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.count-cell.none { background: transparent; color: var(--muted); border-style: dashed; }
.table-wrap.overview a { color: var(--ink); text-decoration: none; }
.table-wrap.overview a:hover b { text-decoration: underline; }
.table-wrap td.fixed .cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0; }
.table-wrap.matrix:not(.overview) td { vertical-align: top; }
@media (min-width: 640px) { .table-wrap.matrix:not(.overview) td:first-child .cell { padding-top: 0.5rem; } }
.fixed-reason { display: block; max-width: 7.5rem; font-size: 0.6875rem; line-height: 1.25; color: var(--muted); text-align: right; }
@media (min-width: 640px) {
  .table-wrap td.fixed .cell { align-items: center; }
  .fixed-reason { text-align: center; margin: 0 auto; }
  .table-wrap.matrix th:not(:first-child), .table-wrap.matrix td:not(:first-child) { min-width: 5.5rem; }
}
.eff-areas { display: grid; gap: var(--s-5) var(--s-8); }
@media (min-width: 900px) { .eff-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.eff-area h3 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.eff-area h3 .note { font-weight: 600; }
.eff-area > p.note { margin: var(--s-2) 0 0; }

/* ---------- Merkbibliotheek ---------- */
.js [data-apply] { display: none; }
.crumb { margin: calc(-1 * var(--s-3)) 0 var(--s-5); font-size: 0.875rem; }
.crumb a { color: var(--muted); }
.cardhead { padding: var(--s-5) var(--s-6) var(--s-4); }
.cardhead h2 { margin-bottom: var(--s-1); }
.cardhead p { margin: 0; }
.project-select { display: flex; gap: var(--s-2); align-items: center; }
.project-select .fl { flex: 1 1 14rem; min-width: 12rem; }
.pagehead .actions { align-items: center; }
.chipline { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); align-items: center; }
.stack-s { display: grid; gap: 0.125rem; }
.nowrap { white-space: nowrap; }
.table-wrap.projects td .site { text-decoration: none; }
.table-wrap.projects td .site:hover b { text-decoration: underline; }
@media (min-width: 640px) { .table-wrap.projects td:last-child { text-align: right; } }

/* Samenvatting */
.summary { display: grid; gap: var(--gap); margin-bottom: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.kpi.download { display: grid; align-content: center; gap: var(--s-2); text-align: center; }
.kpi.download .btn { width: 100%; }
.kpi.download .s { margin: 0; }

/* Werkbalk: zoeken, type, sorteren, weergave; daaronder de categorieën */
#merk-filters { align-items: flex-end; gap: var(--s-3) var(--s-4); }
#merk-filters .fl { flex: 0 1 11rem; }
#merk-filters .fl.search { flex: 1 1 16rem; }
#merk-filters .actions { flex: none; }
.view-toggle { display: inline-flex; flex: none; padding: 0.1875rem; gap: 0.1875rem; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface-2); }
/* De categorieën en de weergaveknop delen één rij: categorieën links, Raster/Lijst rechts. */
.chipbar { display: flex; align-items: center; gap: var(--s-3) var(--s-4); padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--line); }
.chipbar nav.chips { flex: 1 1 auto; min-width: 0; padding: 0; border-bottom: 0; }
.view-toggle .seg { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.25rem; padding: 0 var(--s-3); border-radius: var(--radius-s); font-size: 0.8125rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.view-toggle .seg:hover { color: var(--ink); }
.view-toggle .seg[aria-current='true'] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.ico { display: inline-block; width: 0.875rem; height: 0.875rem; flex: none; }
.ico.raster { background: linear-gradient(currentcolor, currentcolor) 0 0 / 45% 45% no-repeat, linear-gradient(currentcolor, currentcolor) 100% 0 / 45% 45% no-repeat, linear-gradient(currentcolor, currentcolor) 0 100% / 45% 45% no-repeat, linear-gradient(currentcolor, currentcolor) 100% 100% / 45% 45% no-repeat; }
.ico.lijst { background: linear-gradient(currentcolor, currentcolor) 0 10% / 100% 2px no-repeat, linear-gradient(currentcolor, currentcolor) 0 50% / 100% 2px no-repeat, linear-gradient(currentcolor, currentcolor) 0 90% / 100% 2px no-repeat; }
nav.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--line); }
nav.chips a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.25rem; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.8125rem; font-weight: 600; color: var(--ink); text-decoration: none; background: var(--surface); }
nav.chips a:hover { border-color: var(--ink); }
nav.chips a[aria-current='true'] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
nav.chips .count { font-weight: 500; opacity: 0.75; font-variant-numeric: tabular-nums; }
@media (max-width: 639px) {
  #merk-filters { padding: var(--s-4); }
  #merk-filters .fl { flex: 1 1 calc(50% - var(--s-2)); }
  #merk-filters .fl.search { flex-basis: 100%; }
  .chipbar { flex-direction: column; align-items: stretch; padding: var(--s-3) var(--s-4); }
  .view-toggle { width: 100%; }
  .view-toggle .seg { flex: 1; justify-content: center; }
  nav.chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: var(--s-1); }
  nav.chips a { flex: none; }
  .project-select { width: 100%; }
}

/* Groepen en items: raster (kaarten) of lijst (rijen), dezelfde opmaak */
.assets { padding: var(--s-2) var(--s-6) var(--s-6); }
.group { padding-top: var(--s-5); }
.group > h2 { display: flex; align-items: baseline; gap: var(--s-2); font-size: 1.0625rem; margin-bottom: var(--s-3); }
.group > h2 .count { font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
.asset-list { display: grid; gap: var(--s-4); }
.assets.grid { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: var(--s-8); }
.assets.grid > .group { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.assets.grid > .group.n-many, .assets.grid > .empty-state { flex-basis: 100%; }
.assets.grid .group.n-1 .asset-list { grid-template-columns: minmax(0, 15rem); }
.assets.grid .group.n-2 .asset-list { grid-template-columns: repeat(2, minmax(0, 15rem)); }
.assets.grid .group.n-3 .asset-list { grid-template-columns: repeat(3, minmax(0, 15rem)); }
.assets.grid .group.n-many .asset-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); }
.assets.grid .group:not(.n-many) .asset-list { width: max-content; max-width: 100%; }
.asset { position: relative; display: grid; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; transition: border-color var(--ease), box-shadow var(--ease); }
.asset:hover, .asset:focus-within { border-color: var(--line-strong); box-shadow: var(--shadow); }
.assets.grid .asset { grid-template-rows: auto 1fr auto; }
.asset-thumb { display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--surface-2); border-bottom: 1px solid var(--line); overflow: hidden; }
.asset-thumb img.thumb { width: 100%; height: 100%; object-fit: contain; padding: var(--s-4); }
.asset-thumb img.stripes { width: 100%; height: 100%; object-fit: cover; }
.asset-body { display: grid; align-content: start; gap: var(--s-1); padding: var(--s-3) var(--s-4) 0; min-width: 0; }
.asset-body p { margin: 0; }
.asset-title { font-size: 0.9375rem; font-weight: 700; }
.asset-link { color: var(--ink); text-decoration: none; }
.asset-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.asset-link:hover { text-decoration: underline; }
.asset-link:focus-visible { outline: none; }
.asset:has(.asset-link:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.asset-facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); font-size: 0.8125rem; color: var(--muted); }
.asset-facts .dot { opacity: 0.6; }
.asset-date { font-size: 0.75rem; color: var(--muted); }
.asset-actions { position: relative; z-index: 2; display: flex; justify-content: flex-end; padding: var(--s-3) var(--s-4) var(--s-4); }
.asset .badge { position: relative; z-index: 2; }
.ext { display: inline-flex; align-items: center; padding: 0.0625rem var(--s-2); border-radius: var(--radius-2xs); background: var(--ink); color: var(--surface); font: 700 0.6875rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em; }
.typeicon { display: grid; place-items: end center; width: 4.25rem; height: 5.25rem; padding-bottom: var(--s-3); border-radius: var(--radius-xs) 1.25rem var(--radius-xs) var(--radius-xs); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.typeicon span { padding: 0.0625rem var(--s-2); border-radius: var(--radius-2xs); background: var(--brand); color: var(--brand-ink); font: 700 0.75rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.specimen { display: flex; align-items: center; gap: var(--s-4); color: var(--ink); }
.specimen .aa { font-size: 3.5rem; font-weight: 700; line-height: 1; }
.specimen .lines { font-size: 0.75rem; line-height: 1.5; color: var(--muted); letter-spacing: 0.04em; }
.assets.list .asset-list { gap: 0; border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; }
.assets.list .asset { grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: center; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.assets.list .asset:first-child { border-top: 0; }
.assets.list .asset:hover, .assets.list .asset:focus-within { box-shadow: none; background: var(--surface-2); }
.assets.list .asset-thumb { aspect-ratio: 1; margin: var(--s-3) 0 var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-s); }
.assets.list .asset-thumb img.thumb { padding: var(--s-1); }
.assets.list .typeicon { width: 2rem; height: 2.5rem; padding-bottom: var(--s-1); border-radius: 3px 0.5rem 3px 3px; box-shadow: none; }
.assets.list .typeicon span { font-size: 0.5625rem; padding: 0 0.1875rem; }
.assets.list .specimen .aa { font-size: 1.5rem; }
.assets.list .specimen .lines { display: none; }
.assets.list .asset-body { padding: var(--s-3) var(--s-4); }
.assets.list .asset-actions { padding: var(--s-3) var(--s-4); }
@media (min-width: 640px) {
  .assets.list .asset-body { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-6); }
  .assets.list .asset-title { grid-column: 1; }
  .assets.list .asset-facts { grid-column: 1; }
  .assets.list .asset-date { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 639px) {
  .assets { padding: var(--s-1) var(--s-4) var(--s-5); }
  .assets.grid > .group { flex-basis: 100%; }
  .assets.grid .group .asset-list, .assets.grid .group:not(.n-many) .asset-list { grid-template-columns: minmax(0, 1fr); width: auto; }
  .assets.list .asset { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .assets.list .asset-thumb { margin-left: var(--s-3); }
  .assets.list .asset-actions { grid-column: 2; justify-content: flex-start; padding-top: 0; }
}

/* Lege toestanden */
.empty-state { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-12) var(--s-6); text-align: center; }
.empty-state :is(h2, h3) { font-size: 1.125rem; }
.empty-state p { max-width: 42ch; margin: 0 0 var(--s-2); color: var(--muted); }
.empty-icon { position: relative; width: 4rem; height: 3rem; margin: var(--s-3) 0 var(--s-2); border-radius: 0 var(--radius-s) var(--radius-s) var(--radius-s); background: var(--brand); box-shadow: inset 0 -0.75rem 0 var(--brand-strong); }
.empty-icon::before { content: ''; position: absolute; left: 0; top: -0.625rem; width: 1.75rem; height: 0.75rem; border-radius: var(--radius-xs) var(--radius-xs) 0 0; background: var(--brand-strong); }
.assets > .empty-state { padding-block: var(--s-8); }

/* Lade (detail van een item) */
dialog.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(34rem, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; border-left: 1px solid var(--line-strong); border-radius: var(--radius) 0 0 var(--radius); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 639px) { dialog.drawer { border-radius: 0; border-left: 0; } }
.drawer-bar { position: sticky; top: 0; z-index: 3; display: flex; justify-content: flex-end; padding: var(--s-3) var(--s-4); background: var(--surface); border-bottom: 1px solid var(--line); }
.drawer-body { padding: var(--s-5) var(--s-6) var(--s-8); display: grid; gap: var(--s-5); }
@media (max-width: 639px) { .drawer-body { padding: var(--s-4) var(--s-4) var(--s-8); } }
.detail-head h2 { margin: var(--s-2) 0 var(--s-1); font-size: 1.375rem; }
.detail-head p { margin: 0; }
.detail-head .tags { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.detail-preview { display: grid; place-items: center; min-height: 12rem; padding: var(--s-4); border-radius: var(--radius-m); background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.detail-preview img.thumb { max-height: 22rem; object-fit: contain; }
.detail-preview:has(img.stripes) { padding: 0; }
.detail-preview img.stripes { display: block; width: 100%; height: auto; }
.detail-preview .specimen .aa { font-size: 5rem; }
.detail-desc { margin: 0; color: var(--ink); }
.detail-sec h3 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-2); }
.detail-sec.usage { padding: var(--s-3) var(--s-4); border-radius: var(--radius-s); background: var(--surface-2); border-left: 3px solid var(--brand-strong); }
.detail-sec.usage p { margin: 0; }
dl.meta { display: grid; margin: 0; }
dl.meta > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
dl.meta > div:last-child { border-bottom: 0; }
dl.meta dt { color: var(--muted); font-size: 0.875rem; }
dl.meta dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 479px) { dl.meta > div { grid-template-columns: 1fr; gap: 0; } }
.versions { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-s); }
.versions li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
.versions li:first-child { border-top: 0; }
.versions li > div { display: grid; gap: 0.125rem; min-width: 0; }
.versions li .note { overflow-wrap: anywhere; }
.swatches { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.swatches > li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s-4); align-items: start; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--radius-s); }
.swatches img.swatch { width: 3rem; height: 3rem; border-radius: var(--radius-xs); }
.swatch-codes b { color: var(--ink); }
.swatch-codes dl { margin: var(--s-2) 0 0; display: grid; gap: var(--s-1); }
.swatch-codes dl > div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: var(--s-2); }
.swatch-codes dt { font-size: 0.8125rem; color: var(--muted); }
.swatch-codes dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-width: 0; }
.swatch-codes code { color: var(--ink); }
.asset-detail { display: grid; gap: var(--s-5); }
@media (min-width: 900px) {
  .asset-detail { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; column-gap: var(--s-8); }
  .asset-detail > .detail-preview { grid-row: span 6; min-height: 20rem; position: sticky; top: var(--s-4); }
}
.manage-sec { margin-top: var(--gap); }

/* Opladen */
.form-grid { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; } }
.form-sec { margin: 0; padding: 0; border: 0; min-width: 0; }
.form-sec > legend { padding: 0; margin-bottom: var(--s-4); font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.form-actions { padding-top: var(--s-5); margin-top: var(--s-2); border-top: 1px solid var(--line); }
.file-field input[type='file'] { min-height: 6rem; padding: var(--s-6) var(--s-4); border: 2px dashed var(--line-strong); background: var(--surface-2); cursor: pointer; }
.file-field input[type='file']:hover { border-color: var(--ink); }
.file-field input[type='file']::file-selector-button { font: inherit; font-size: 0.875rem; font-weight: 600; margin-right: var(--s-3); padding: var(--s-2) var(--s-4); border-radius: var(--radius-s); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; }
.field-error { margin: calc(-1 * var(--s-2)) 0 var(--s-4); color: var(--bad); font-size: 0.875rem; font-weight: 600; }
.chk-row .note { font-weight: 400; }
.chk-row b { color: var(--ink); }
.swatch-fields { margin: var(--s-4) 0 0; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-s); min-width: 0; }
.swatch-fields > legend { padding: 0 var(--s-2); font-weight: 700; color: var(--ink); }
.swatch-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: 0 var(--s-3); margin: 0; padding: var(--s-3) 0 0; border: 0; border-top: 1px solid var(--line); min-width: 0; }
.swatch-row:first-of-type { border-top: 0; }
.swatch-row .field { margin-bottom: var(--s-2); }
.upload-form .field select, .upload-form .field input:not([type='file']) { max-width: 100%; }

/* Categorieën */
ol.cats { list-style: none; margin: 0; padding: 0; }
.cat-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--s-2) var(--s-4); align-items: center; padding: var(--s-3) var(--s-6); border-top: 1px solid var(--line); }
.cat-pos { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 0.8125rem; font-weight: 700; }
.cat-used { grid-column: 2; }
.cat-move { grid-column: 2; display: flex; gap: var(--s-2); }
.cat-move form { margin: 0; }
.btn.placeholder { visibility: hidden; }
.add-cat { max-width: 32rem; }
@media (min-width: 900px) {
  .cat-row { grid-template-columns: 2rem minmax(0, 1fr) 6rem auto; }
  .cat-used, .cat-move { grid-column: auto; }
}
.drawer-body .actions { justify-content: flex-start; margin-top: 0; }
.table-wrap.projects .btn, .table-wrap.projects .stack-s > span:first-child { white-space: nowrap; }
.versions li > div { justify-items: start; }
.stack { grid-template-columns: minmax(0, 1fr); }
.stack + .note { margin-top: var(--gap); }
@media (max-width: 639px) {
  .table-wrap.projects td { flex-wrap: wrap; }
  .table-wrap.projects .chipline { justify-content: flex-end; }
  .table-wrap.projects .chipline .badge { white-space: normal; text-align: left; }
}

/* Ronde 1 van de review */
.kind { display: inline-flex; align-items: center; padding: 0.0625rem var(--s-2); border-radius: var(--radius-2xs); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); font-size: 0.6875rem; font-weight: 700; line-height: 1.5; }
.ver-line { display: inline-flex; align-items: center; gap: var(--s-2); }
/* Merk-pagina's: titel links, keuzelijst en knoppen rechts (zelfde patroon op elke merkpagina). */
.pagehead:has(.project-select) > div:first-child { flex: 1 1 22rem; min-width: 0; }
.pagehead:has(.project-select) > .actions { flex: 0 1 auto; justify-content: flex-end; }
.project-select .fl { flex: 0 1 17rem; min-width: 12rem; }
@media (max-width: 639px) {
  .pagehead:has(.project-select) > .actions { justify-content: flex-start; }
  .project-select .fl { flex: 1 1 auto; }
  .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .summary .kpi { padding: var(--s-3) var(--s-4); }
  .summary .kpi .v { font-size: 1.25rem; margin-top: var(--s-1); }
  .summary .kpi.download { grid-column: 1 / -1; grid-template-columns: auto 1fr; text-align: left; gap: var(--s-3); }
  .summary .kpi.download .btn { width: auto; }
  .table-wrap.projects td .cell { margin-left: auto; text-align: right; }
}
/* Hoog contrast (Windows en co.): de gewone systeemcheckbox, zodat aan en uit altijd verschillen. */
@media (forced-colors: active) {
  .chk input, .chk input:checked, .chk input:disabled, .chk input:disabled:checked { appearance: auto; background: none; border: revert; width: 1.25rem; height: 1.25rem; }
  .btn, .btn.primary, .btn.danger { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
}

/* ---------- Sites: overzicht, wachtrij, site-hub (Fase 2) ---------- */
/* Cijferkaarten die een link zijn: hele kaart klikbaar, toon in de rand. */
a.kpi.link { display: block; text-decoration: none; color: inherit; transition: border-color var(--ease), box-shadow var(--ease); }
a.kpi.link:hover { border-color: var(--line-strong); }
a.kpi.link:hover .l { color: var(--ink); }
a.kpi.link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.kpi.warn { border-color: var(--warn); box-shadow: inset 0 3px 0 var(--warn), var(--shadow); }
.kpi.bad { border-color: var(--bad); box-shadow: inset 0 3px 0 var(--bad), var(--shadow); }
.kpi.warn .v { color: var(--warn); }
.kpi.bad .v { color: var(--bad); }

.syncinfo { margin-bottom: var(--gap); }
.syncinfo h2 { font-size: 1rem; }
.syncinfo p { margin: 0; }
.syncinfo p + p { margin-top: var(--s-2); }
.syncinfo code { overflow-wrap: anywhere; }
.syncinfo .banner { margin: var(--s-3) 0 0; display: block; }
.syncinfo .banner code { white-space: nowrap; font-weight: 700; }
.syncinfo .banner + .note, .syncinfo p + .note { margin-top: var(--s-3); }

/* Vijf cijfers: 2 + 2 + 1 (breed) op de telefoon, 3 + 2 op tablet, 5 naast elkaar vanaf 1024 px. */
.kpis.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 639px) { .kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 640px) {
  .kpis.five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kpis.five > * { grid-column: span 2; }
  .kpis.five > :nth-child(n + 4) { grid-column: span 3; }
}
@media (min-width: 1024px) {
  .kpis.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .kpis.five > *, .kpis.five > :nth-child(n + 4) { grid-column: auto; }
}
#site-filters { align-items: flex-end; gap: var(--s-3) var(--s-4); }
#site-filters .fl { flex: 0 1 11rem; }
#site-filters .fl.search { flex: 1 1 16rem; }
#site-filters .actions { flex: none; }
.results { margin: 0; padding: var(--s-3) var(--s-6) 0; }
.hostlink { color: var(--ink); text-decoration: none; }
.hostlink:hover b { text-decoration: underline; }
.table-wrap.sites .site { display: grid; gap: var(--s-1); }
.table-wrap.sites .chipline .note { font-size: 0.75rem; }
@media (max-width: 1023px) {
  #site-filters .fl { flex: 1 1 9rem; }
  #site-filters .fl.search { flex-basis: 100%; }
  #site-filters .fl.client { flex: 2 1 14rem; }
}
@media (max-width: 639px) {
  #site-filters { padding: var(--s-4); }
  #site-filters .fl { flex: 1 1 calc(50% - var(--s-2)); }
  #site-filters .fl.client { flex-basis: 100%; }
  .results { padding: var(--s-3) var(--s-4) 0; }
}
/* De sitetabel heeft vijf kolommen met badges: als tabel pas vanaf 1024 px, daaronder gestapelde kaarten. */
@media (min-width: 640px) and (max-width: 1023px) {
  .table-wrap:is(.sites, .changes-table) table, .table-wrap:is(.sites, .changes-table) tbody, .table-wrap:is(.sites, .changes-table) tr, .table-wrap:is(.sites, .changes-table) td { display: block; width: 100%; }
  .table-wrap:is(.sites, .changes-table) td.blank { display: none; }
  .table-wrap:is(.sites, .changes-table) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table-wrap:is(.sites, .changes-table) tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-6); padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--line); }
  .table-wrap:is(.sites, .changes-table) tr:last-child { border-bottom: 0; }
  .table-wrap:is(.sites, .changes-table) td, .table-wrap:is(.sites, .changes-table) tr:last-child td { display: grid; gap: var(--s-1); padding: 0; border: 0; align-content: start; }
  .table-wrap:is(.sites, .changes-table) td::before { content: attr(data-label); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
  .table-wrap:is(.sites, .changes-table) tbody tr:hover { background: none; }
}
/* Wijzigingen: in de sitehub staat de tabel naast de zijbalk en het overzicht heeft acht kolommen: kaarten tot 1200 px. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .table-wrap.changes-table table, .table-wrap.changes-table tbody, .table-wrap.changes-table tr, .table-wrap.changes-table td { display: block; width: 100%; }
  .table-wrap.changes-table td.blank { display: none; }
  .table-wrap.changes-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table-wrap.changes-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-6); padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--line); }
  .table-wrap.changes-table tr:last-child { border-bottom: 0; }
  .table-wrap.changes-table td, .table-wrap.changes-table tr:last-child td { display: grid; gap: var(--s-1); padding: 0; border: 0; align-content: start; }
  .table-wrap.changes-table td::before { content: attr(data-label); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
  .table-wrap.changes-table tbody tr:hover { background: none; }
}
@media (max-width: 639px) {
  .table-wrap.sites td { align-items: flex-start; }
  .table-wrap.sites td .cell { margin-left: auto; text-align: right; min-width: 0; }
  .table-wrap.sites .site { justify-items: end; }
  .table-wrap.sites .chipline { justify-content: flex-end; }
  .table-wrap.sites .chipline .badge { white-space: normal; text-align: left; }
}

/* Vingerafdruk: groot en monospace, in groepjes van vier, breekt enkel tussen groepjes. */
.fp { display: block; font: 700 clamp(1.125rem, 1rem + 0.8vw, 1.5rem)/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; color: var(--ink); word-spacing: 0.2em; overflow-wrap: normal; }
dialog .confirm-code { margin: 0 0 var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--radius-s); background: var(--surface-2); font: 700 1.0625rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em; word-spacing: 0.15em; color: var(--ink); }
.fp.small { display: inline; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; word-spacing: 0.1em; }

/* Wachtrij */
.queue { display: grid; gap: var(--gap); }
.reg { display: grid; gap: var(--s-5); padding: var(--s-5) var(--s-6); }
.reg-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-2) var(--s-6); }
.reg-head h2 { overflow-wrap: anywhere; }
.reg-head .chipline { margin: var(--s-2) 0 0; color: var(--muted); font-size: 0.875rem; }
.reg-head > .note { margin: 0; }
.reg-fp { padding: var(--s-4) var(--s-5); border-radius: var(--radius-s); background: var(--surface-2); border: 1px solid var(--line-strong); }
.reg-fp .l { margin: 0 0 var(--s-2); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.reg-fp .note { margin: var(--s-3) 0 0; max-width: 72ch; }
/* Fase 6 Task 6: kaart met golflabel, statusscherm-link, getypte vingerafdruk, filters en verlopen aanmeldingen. */
.reg-head > .reg-when { display: grid; gap: var(--s-2); justify-items: end; text-align: right; }
.reg-when .chipline { margin: 0; justify-content: flex-end; }
.reg-when .note { margin: 0; }
.reg-link { margin: var(--s-3) 0 0; }
.wp-link { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 2.75rem; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.wp-link:hover { text-decoration-thickness: 2px; }
/* De beslissing: eerst het veld met de getypte vingerafdruk, dan "Schrijven uit", dan beide knoppen op een rij. Het goedkeurformulier
   verliest zijn eigen doos (display: contents) zodat zijn onderdelen en het weigerformulier in hetzelfde raster staan. */
.reg-decide { display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: 'typed typed typed' 'chk chk chk' 'ok no .'; gap: var(--s-3); align-items: center; }
.reg-decide > form:first-child { display: contents; }
.reg-decide > form + form { grid-area: no; }
.reg-decide .reg-typed { grid-area: typed; max-width: 34rem; margin: 0; gap: var(--s-2); }
.reg-decide .reg-typed > label { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.reg-decide .chk-row, .reg-decide .writes-fixed { grid-area: chk; padding: 0; margin: 0; }
.reg-decide .btn.primary { grid-area: ok; }
.reg-decide .btn { min-height: 2.75rem; padding-inline: var(--s-6); }
.fp-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; }
.fp-input::placeholder { color: var(--muted); opacity: 0.7; font-weight: 400; }
.reg-typed .field-error { margin: 0; }
.reg.has-error { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad), var(--shadow); }
.back { margin: var(--s-4) 0 0; }
#queue-filters { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: var(--s-4); align-items: flex-end; gap: var(--s-3) var(--s-4); }
#queue-filters .fl { flex: 0 1 11rem; }
#queue-filters .fl.search { flex: 1 1 16rem; }
#queue-filters .actions { flex: none; }
.results { margin: 0 0 var(--s-3); }
.expired { margin-bottom: var(--gap); }
.expired[open] { display: grid; gap: var(--s-4); }
.expired > summary { display: flex; align-items: center; gap: var(--s-3); cursor: pointer; color: var(--ink); min-height: 2.75rem; }
.expired[open] > summary { margin-bottom: var(--s-3); }
.expired-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3) var(--s-6); }
.expired-head .note { margin: 0; max-width: 60ch; }
.host-list { list-style: none; margin: 0; padding: 0; max-height: 13.5rem; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); }
.host-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); padding: var(--s-2) var(--s-4); }
.host-list li + li { border-top: 1px solid var(--line); }
.host-list b { color: var(--ink); overflow-wrap: anywhere; }
.host-list .note { margin-left: auto; }
@media (max-width: 639px) {
  .reg { padding: var(--s-4); }
  .reg-fp { padding: var(--s-3) var(--s-4); }
  .reg-head > .reg-when { justify-items: start; text-align: left; }
  .reg-when .chipline { justify-content: flex-start; }
  .reg-decide { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'typed' 'chk' 'ok' 'no'; }
  .reg-decide .btn, .reg-decide > form + form { width: 100%; }
  .expired-head form, .expired-head .btn { width: 100%; }
  #queue-filters { padding: var(--s-4); }
  #queue-filters .fl { flex: 1 1 calc(50% - var(--s-2)); }
  #queue-filters .fl.search { flex-basis: 100%; }
}

/* Site-hub. Telefoon en tablet (DOM-volgorde): host en project, het menu, dan de inhoud van het tabblad, daarna de
   omgevingen en de knoppen. Vanaf 900 px: links host, knoppen en (meeschuivend) menu, rechts de inhoud. */
.hub { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
.hub-side, .hub-more { min-width: 0; }
@media (min-width: 900px) {
  .hub { grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; grid-template-areas: 'side main' 'more main' 'menu main' '. main'; }
  .hub-side { grid-area: side; }
  .hub-more { grid-area: more; }
  .hub > .hubmenu { grid-area: menu; position: sticky; top: var(--s-4); }
  .hub-main { grid-area: main; }
}
.hub-more .hub-context > :first-child { padding-top: 0; border-top: 0; }
.hub-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); min-width: 0; }
.hub-warning { background: var(--warn-bg); border-color: var(--warn); }
.hub-warning > p { margin: 0; }
.hub-warning-title { color: var(--warn); font-weight: 700; }
.hub-warning-text { margin-top: var(--s-1); color: var(--ink); font-size: 0.875rem; }
.hub-warning-text + .hub-warning-title { margin-top: var(--s-3); }
@media (forced-colors: active) { .hub-warning { border: 2px solid CanvasText; } }
.hub-main > .notice { margin: 0; }
.hub-context { display: grid; gap: var(--s-3); }
.hub-context > * { margin: 0; }
.hosttitle { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); overflow-wrap: anywhere; }
@media (min-width: 900px) { .hub-side .hosttitle { font-size: 1.375rem; } }
.hub-project { display: grid; gap: var(--s-1); margin: 0; }
.hub-project > div { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: var(--s-2); align-items: baseline; }
.hub-project dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.hub-project dd { margin: 0; color: var(--ink); font-size: 0.875rem; font-weight: 600; overflow-wrap: anywhere; }
.pagehead .hub-project { margin-top: var(--s-2); }
.envswitch { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.envswitch .l, .pagehead .l { margin: 0 0 var(--s-2); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.envswitch ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.envswitch a { display: flex; align-items: center; gap: var(--s-2); min-height: 2.5rem; padding: var(--s-1) var(--s-2); border-radius: var(--radius-s); color: var(--ink); text-decoration: none; font-size: 0.875rem; }
.envswitch a span:last-child { min-width: 0; overflow-wrap: anywhere; }
.envswitch a .env { flex: none; }
.envswitch a:hover { background: var(--surface-2); }
.envswitch a[aria-current='page'] { background: var(--surface-2); font-weight: 700; box-shadow: inset 2px 0 0 var(--ink); }
.hub-actions { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.hub-actions .btn, .hub-actions form { width: 100%; }
.hubmenu { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--s-2); }
.hubmenu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.125rem; }
.hubitem { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); min-height: 2.5rem; padding: var(--s-2) var(--s-3); border-radius: var(--radius-s); font-size: 0.875rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.hubitem small { font-size: 0.6875rem; font-weight: 500; text-align: right; }
a.hubitem { color: var(--ink); }
a.hubitem:hover { background: var(--surface-2); }
a.hubitem[aria-current='page'] { background: var(--ink); color: var(--surface); }
.hubitem.locked small { color: var(--warn); font-weight: 600; }
.hubmenu-note { margin: var(--s-2) var(--s-3) var(--s-1); font-size: 0.75rem; color: var(--muted); }
/* Telefoon en tablet: het menu schuift zijwaarts (zoals het hoofdmenu), de reden staat onder elk onderdeel. */
@media (max-width: 899px) {
  .hubmenu { padding: var(--s-1); overflow-x: auto; scrollbar-width: thin; mask-image: linear-gradient(to right, #000 calc(100% - var(--s-8)), transparent); }
  .hubmenu ul { padding-right: var(--s-8); }
  .hubmenu ul { display: flex; gap: var(--s-1); }
  .hubmenu li { flex: none; }
  .hubitem { flex-direction: column; align-items: flex-start; gap: 0; min-height: 2.75rem; padding: var(--s-1) var(--s-3); white-space: nowrap; }
  .hubitem small { text-align: left; }
}
.dash h2 { margin-bottom: var(--s-3); }
.dash dl.meta > div { grid-template-columns: 10rem minmax(0, 1fr); align-items: start; }
.dash dd { display: grid; gap: var(--s-1); justify-items: start; }
.dash .chipline { justify-content: flex-start; }
.dd-sub { color: var(--muted); font-size: 0.8125rem; }
.versions-line { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.dash > p { margin: var(--s-4) 0 0; }
.dash > p + p { margin-top: var(--s-2); }
.hub-manage .manage textarea { min-height: 5rem; }
.hub-manage > .manage:first-child, .hub-manage .notice + .manage { border-top: 0; padding-top: 0; }
.hub-manage .manage .field { margin-bottom: var(--s-3); }
.hub-manage .notice { display: block; margin-bottom: var(--s-4); }
.hub-manage .notice a { color: inherit; font-weight: 700; }
@media (min-width: 640px) { .hub-manage .manage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; } }
@media (max-width: 479px) { .dash dl.meta > div { grid-template-columns: 1fr; gap: var(--s-1); } }

/* Overzicht klant: zijn sites */
.sitelist { list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.sitelist li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.sitelist li:first-child { border-top: 0; }
.sitelist .hostlink { min-width: 0; overflow-wrap: anywhere; }
.kpis + section, section + section > .kpis { margin-top: 0; }
@media (forced-colors: active) {
  a.hubitem[aria-current='page'], .envswitch a[aria-current='page'] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .kpi.warn, .kpi.bad { border-width: 2px; }
  .banner, .env, .reg-fp { border: 2px solid CanvasText; }
}
.pagehead .chipline + h1 { margin-top: var(--s-2); }
.pagehead > div > .chipline { margin: 0; }

/* Fix ronde 1: sync-kaart breed open, op de telefoon ingeklapt; compacte siterij op de telefoon. */
.syncinfo.narrow { display: none; margin-bottom: var(--gap); }
.syncinfo.narrow .acc-body > p { margin: 0; }
.syncinfo.narrow .banner { margin: var(--s-3) 0 0; }
.m-label { display: none; }
@media (max-width: 639px) {
  .syncinfo.wide { display: none; }
  .syncinfo.narrow { display: block; }
  .table-wrap.sites tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); padding: var(--s-3) var(--s-4); }
  .table-wrap.sites td, .table-wrap.sites td.nowrap { display: block; padding: 0; text-align: left; }
  .table-wrap.sites td::before { content: none; }
  .table-wrap.sites td .cell { margin: 0; text-align: left; }
  /* Rij 1: host + omgeving; rij 2: status links, licentie rechts; rij 3: project · klant en laatste contact, gedempt. */
  .table-wrap.sites td:nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
  .table-wrap.sites td:nth-child(1) .site { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); justify-items: start; }
  .table-wrap.sites td:nth-child(3) { grid-column: 1; grid-row: 2; }
  .table-wrap.sites td:nth-child(4) { grid-column: 2; grid-row: 2; }
  .table-wrap.sites td:nth-child(2) { grid-column: 1; grid-row: 3; font-size: 0.8125rem; color: var(--muted); min-width: 0; }
  .table-wrap.sites td:nth-child(5) { grid-column: 2; grid-row: 3; font-size: 0.75rem; color: var(--muted); text-align: right; }
  .table-wrap.sites td:nth-child(5) .m-label { display: inline; }
  .table-wrap.sites td:nth-child(2) .cell { min-width: 0; overflow: hidden; }
  .table-wrap.sites td:nth-child(2) .site { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .table-wrap.sites td:nth-child(2) .site span { font-size: inherit; color: inherit; overflow-wrap: normal; }
  .table-wrap.sites td:nth-child(5) { white-space: nowrap; }
  .table-wrap.sites td:nth-child(3) .note { display: none; }
  .table-wrap.sites td:nth-child(2) .site b { display: inline; font-weight: 500; color: var(--text); }
  .table-wrap.sites td:nth-child(2) .site span::before { content: '\00a0· '; }
  .table-wrap.sites .chipline { justify-content: flex-start; }
  .table-wrap.sites td:nth-child(4) .chipline, .table-wrap.sites td:nth-child(4) .cell { justify-content: flex-end; text-align: right; }
  .table-wrap.sites .muted-dash { display: none; }
}

/* ---------- Licenties (Fase 2 Task 17) ---------- */
.banner.info { background: var(--info-bg); color: var(--info); }
.lic-mode { display: block; padding: var(--s-4) var(--s-5); }
.lic-mode h2 { margin: 0 0 var(--s-1); font-size: 0.9375rem; color: inherit; }
.lic-mode p { margin: 0; max-width: 80ch; }
#licence-filters { align-items: flex-end; gap: var(--s-3) var(--s-4); }
#licence-filters .fl { flex: 0 1 12rem; }
#licence-filters .fl.search { flex: 1 1 18rem; }
#licence-filters .actions { flex: none; }
.lic-envs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.lic-envs li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); min-width: 0; }
.lic-envs .env { flex: none; }
.lic-envs .h { min-width: 0; overflow-wrap: anywhere; font-size: 0.875rem; }
.lic-envs.detail { gap: 0; margin-bottom: var(--s-3); }
.lic-envs.detail li { padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.lic-envs.detail li:last-child { border-bottom: 0; }
.lic-envs.detail .h { flex: 1 1 10rem; font-weight: 600; }
.table-wrap.lics .site { display: grid; gap: var(--s-1); }
.table-wrap.lics .site > span { color: var(--muted); font-size: 0.8125rem; }
.table-wrap.lics .site > span.v { color: var(--text); font-size: 0.875rem; }
.table-wrap.lics .site > span.soon { color: var(--warn); font-weight: 600; }
@media (min-width: 1024px) {
  .table-wrap.lics td { vertical-align: top; }
  .table-wrap.lics td:nth-child(3), .table-wrap.lics td:nth-child(7), .table-wrap.lics td.mod { white-space: nowrap; }
}
/* Tablet: kaarten in twee kolommen met labels; telefoon: compact (project en status, contract, geldig tot, omgevingen). */
@media (min-width: 640px) and (max-width: 1023px) {
  .table-wrap.lics table, .table-wrap.lics tbody, .table-wrap.lics tr, .table-wrap.lics td { display: block; width: 100%; }
  .table-wrap.lics thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  /* Drie kolommen: project, status, geldig tot; daaronder contract en de omgevingen; daaronder Leads en Onderhoud. */
  .table-wrap.lics tr { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1fr); gap: var(--s-3) var(--s-5); padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--line); }
  .table-wrap.lics tr:last-child { border-bottom: 0; }
  .table-wrap.lics td, .table-wrap.lics tr:last-child td { display: grid; gap: var(--s-1); padding: 0; border: 0; align-content: start; text-align: left; }
  .table-wrap.lics td::before { content: attr(data-label); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
  .table-wrap.lics td .cell { margin: 0; }
  .table-wrap.lics tbody tr:hover { background: none; }
  .table-wrap.lics td:nth-child(3) .cell, .table-wrap.lics td.mod .cell { justify-self: start; }
  .table-wrap.lics td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .table-wrap.lics td:nth-child(3) { grid-column: 2; grid-row: 1; }
  .table-wrap.lics td:nth-child(7) { grid-column: 3; grid-row: 1; }
  .table-wrap.lics td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .table-wrap.lics td:nth-child(8) { grid-column: 2 / -1; grid-row: 2; }
  .table-wrap.lics td.mod-leads { grid-column: 1; grid-row: 3; }
  .table-wrap.lics td.mod-maint { grid-column: 2; grid-row: 3; }
  .table-wrap.lics td.mod-kw { grid-column: 3; grid-row: 3; }
}
@media (max-width: 639px) {
  #licence-filters { padding: var(--s-4); }
  #licence-filters .fl { flex: 1 1 100%; }
  .table-wrap.lics tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); padding: var(--s-3) var(--s-4); }
  .table-wrap.lics td { display: block; padding: 0; text-align: left; }
  .table-wrap.lics td::before { content: none; }
  .table-wrap.lics td .cell { margin: 0; text-align: left; }
  .table-wrap.lics td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .table-wrap.lics td:nth-child(3) { grid-column: 2; grid-row: 1; align-self: start; }
  .table-wrap.lics td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: 0.8125rem; }
  .table-wrap.lics td:nth-child(2) .site { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); }
  .table-wrap.lics td:nth-child(2) .site b { font-weight: 600; }
  .table-wrap.lics td:nth-child(7) { grid-column: 1 / -1; grid-row: 3; }
  .table-wrap.lics td:nth-child(7) .site { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); }
  .table-wrap.lics td:nth-child(8) { grid-column: 1 / -1; grid-row: 6; padding-top: var(--s-1); }
  /* Projectschakelaars: regels "Leads Aan · Onderhoud Uit" en "Keywords Aan", het label inline vóór de chip. */
  .table-wrap.lics td.mod { display: flex; justify-content: flex-start; align-items: center; gap: var(--s-2); grid-row: 4; font-size: 0.8125rem; }
  .table-wrap.lics td.mod::before { content: attr(data-label); color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 0.8125rem; font-weight: 600; }
  .table-wrap.lics td.mod .cell { flex: none; width: auto; }
  .table-wrap.lics td.mod-leads { grid-column: 1; }
  .table-wrap.lics td.mod-maint { grid-column: 2; }
  .table-wrap.lics td.mod-kw { grid-column: 1 / -1; grid-row: 5; }
  .table-wrap.lics .lic-envs .h { font-size: 0.8125rem; }
}

/* Detail: links de feiten en omgevingen, rechts de formulieren (vanaf 1024 px). */
.lic-detail { display: grid; gap: var(--gap); align-items: start; }
.lic-col { display: grid; gap: var(--gap); min-width: 0; }
@media (min-width: 1024px) { .lic-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.lic-detail h2 { margin-bottom: var(--s-3); }
.lic-detail section > .note:last-child { margin: 0; }
.lic-forms { display: grid; gap: var(--s-4); }
.lic-forms > .notice { display: block; margin: 0; }
.lic-forms > .notice a { color: inherit; font-weight: 700; }
.lic-forms .acc-body > form > .note:first-child { margin: 0 0 var(--s-4); }
.lic-forms .field textarea { min-height: 5rem; }
.lic-forms .chk-row { margin-bottom: var(--s-2); }
@media (forced-colors: active) {
  .lic-mode, .notice.warn { border: 2px solid CanvasText; }
}
/* Hosts onder elkaar uitgelijnd: de omgevingsbadge krijgt een vaste breedte (Productie en Staging; Ontwikkeling mag breder). */
.lic-envs .env { display: inline-block; min-width: 6.5rem; text-align: center; }
@media (max-width: 639px) { .lic-forms form .actions, .lic-forms form .actions .btn { width: 100%; } }
/* Een geopend formulier (na een fout of de herbevestiging) staat eerst in de pagina; breed blijft het rechts. */
@media (min-width: 1024px) {
  .lic-detail.forms-first > .lic-col:first-child { grid-column: 2; grid-row: 1; }
  .lic-detail.forms-first > .lic-col:last-child { grid-column: 1; grid-row: 1; }
}

/* Polish: zes cijferkaarten (2 × 3 op de telefoon, 3 × 2 op tablet, 6 naast elkaar breed); de kaart van de actieve filter omlijnd. */
.kpis.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .kpis.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .kpis.six { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kpi.selected { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink), var(--shadow); }
.kpi.selected .l { color: var(--ink); }
/* Handmatige contracten: breed een banner, op de telefoon ingeklapt. */
.lic-mode-narrow { display: none; margin-bottom: var(--gap); }
.lic-mode-narrow .acc-body > p { margin: 0; }
@media (max-width: 639px) { .lic-mode.wide { display: none; } .lic-mode-narrow { display: block; } }
.lic-envs.detail .lic-st { margin-left: auto; display: inline-flex; justify-content: flex-end; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.lic-retry { font-size: 0.75rem; color: var(--muted); }
.lic-precedence { margin: 0; padding: var(--s-3) var(--s-6); border-bottom: 1px solid var(--line); background: var(--warn-bg); color: var(--warn); font-size: 0.875rem; font-weight: 500; border-radius: var(--radius) var(--radius) 0 0; }
@media (max-width: 639px) { .lic-precedence { padding: var(--s-3) var(--s-4); } }
@media (forced-colors: active) {
  .kpi.selected { border: 3px solid Highlight; }
  .input[aria-invalid='true'], .field input[aria-invalid='true'], .field textarea[aria-invalid='true'] { border: 2px solid CanvasText; }
}

/* ---------- Merkbibliotheek: klant zoeken (live filter van "Alle klanten", combobox in de kop van een bibliotheek) ---------- */
.js .actions.nojs { display: none; }
.klant-filters { align-items: flex-end; gap: var(--s-3) var(--s-4); }
.klant-filters .fl.search { flex: 1 1 22rem; max-width: 36rem; }
.klant-filters .actions { flex: none; }
/* Knoppen naast een zoekveld zijn even hoog als het veld. */
.klant-filters .actions .btn, .project-select .actions .btn { min-height: 2.75rem; }
/* Eén eigen wisknop in het veld; het kruisje van de browser staat uit. */
.search-wrap { position: relative; }
.search-wrap input[type='search'] { padding-right: 2.75rem; }
.search-wrap input[type='search']::-webkit-search-cancel-button, .search-wrap input[type='search']::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-clear { position: absolute; top: 50%; right: var(--s-1); translate: 0 -50%; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: var(--radius-s); background: transparent; color: var(--muted); cursor: pointer; }
.search-clear::before, .search-clear::after { content: ''; grid-area: 1 / 1; width: 0.875rem; height: 2px; border-radius: 1px; background: currentcolor; rotate: 45deg; }
.search-clear::after { rotate: -45deg; }
.search-clear:hover { color: var(--ink); background: var(--surface-2); }
.search-clear:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; color: var(--ink); }
/* "Alle klanten": kop, label, telregel en tabel op één lijn (vanaf 1024 px springen de buitenste tabelcellen in zoals
   de kaartkop; op tablet blijft de tabel smal genoeg, daar springen kop, veld en telregel in zoals de tabel). */
@media (min-width: 640px) and (max-width: 1023px) {
  .card:has(> .klant-filters) > .cardhead, .klant-filters, #klanten-count, .live-error { padding-inline: var(--s-5); }
  /* Vijf kolommen op tablet: smallere binnenruimte, zodat "Open bibliotheek" niet buiten beeld valt. */
  .klanten-results .table-wrap th, .klanten-results .table-wrap td { padding-inline: var(--s-3); }
  .klanten-results .table-wrap th { white-space: normal; }
  .klanten-results .table-wrap th:first-child, .klanten-results .table-wrap td:first-child { padding-left: var(--s-5); }
  .klanten-results .table-wrap th:last-child, .klanten-results .table-wrap td:last-child { padding-right: var(--s-5); }
}
@media (min-width: 1024px) {
  .klanten-results .table-wrap th:first-child, .klanten-results .table-wrap td:first-child { padding-left: var(--s-6); }
  .klanten-results .table-wrap th:last-child, .klanten-results .table-wrap td:last-child { padding-right: var(--s-6); }
}
.live-error { padding-top: var(--s-2); color: var(--bad); }
.klanten-results { transition: opacity var(--ease); }
.klanten-results[aria-busy='true'] { opacity: 0.6; }
.klanten-results > .empty-state { padding-block: var(--s-8) var(--s-12); }
.table-wrap.projects mark { padding: 0 0.0625rem; border-radius: 0.1875rem; background: var(--brand); color: var(--brand-ink); }
/* De voorstellen van de wisselaar. */
.combo-pop { position: absolute; z-index: 15; top: calc(100% + var(--s-1)); right: 0; min-width: min(26rem, calc(100vw - 2 * var(--gutter))); padding: var(--s-1);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-m); box-shadow: 0 2px 4px rgb(0 0 0 / 0.06), 0 16px 36px -12px rgb(0 0 0 / 0.28); font-size: 0.9375rem; font-weight: 400; }
.combo-list { display: grid; gap: 0.125rem; margin: 0; padding: 0; list-style: none; max-height: min(26rem, 60vh); overflow-y: auto; overscroll-behavior: contain; }
.combo-opt { display: grid; gap: 0.0625rem; padding: var(--s-2) var(--s-3); border-radius: var(--radius-s); color: var(--ink); cursor: pointer; }
.combo-opt:hover { background: var(--surface-2); }
.combo-opt[aria-selected='true'] { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--ink); }
.combo-main { font-weight: 600; overflow-wrap: anywhere; }
.combo-sub { font-size: 0.8125rem; color: var(--muted); overflow-wrap: anywhere; }
.combo-all { margin-bottom: var(--s-1); }
.combo-all::after { content: ''; display: block; height: 1px; margin: var(--s-2) calc(-1 * var(--s-3)) calc(-1 * var(--s-2) - 0.0625rem); background: var(--line); }
.combo-note { margin: 0; padding: var(--s-2) var(--s-3); font-size: 0.8125rem; color: var(--muted); }
.combo-list mark { padding: 0 0.0625rem; border-radius: 0.1875rem; background: var(--brand); color: var(--brand-ink); }
@media (max-width: 639px) {
  .klant-filters { padding: var(--s-4); }
  .klant-filters .fl.search { flex-basis: 100%; max-width: none; }
  .live-error { padding-inline: var(--s-4); }
  .klanten-results .table-wrap tr { padding-inline: var(--s-4); }
  .combo-pop { left: 0; min-width: 0; }
  .pagehead .actions:has(> .project-select) { width: 100%; }
  .project-select .fl { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .klanten-results { transition: none; } }
@media (forced-colors: active) {
  .combo-pop { border: 1px solid CanvasText; }
  .search-clear { forced-color-adjust: none; color: ButtonText; background: ButtonFace; }
  .search-clear:focus-visible { outline-color: Highlight; }
  /* Eigen systeemkleuren (geen tekstplaat achter de letters): de actieve keuze is Highlight met HighlightText. */
  .combo-opt[aria-selected='true'] { forced-color-adjust: none; background: Highlight; color: HighlightText; box-shadow: none; outline: 2px solid CanvasText; outline-offset: -2px; }
  .combo-opt[aria-selected='true'] .combo-sub { color: HighlightText; }
  .combo-list mark, .table-wrap.projects mark { background: Mark; color: MarkText; }
  .combo-opt[aria-selected='true'] mark { background: HighlightText; color: Highlight; }
}
@media (max-width: 639px) { .card:has(> .klant-filters) > .cardhead { padding-inline: var(--s-4); } }

/* AI-toegang per onderdeel (gebruiker, Mijn account) en de reikwijdte van een MCP-adres (toestemmingspagina). */
.ai-areas { list-style: none; margin: var(--s-2) 0 var(--s-3); padding: 0; display: grid; }
.ai-areas li { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.ai-areas li:first-child { border-top: 0; padding-top: 0; }
.ai-areas li > div { min-width: 0; display: grid; gap: var(--s-1); }
.ai-areas b { color: var(--ink); }
.ai-areas .badge { flex: none; margin-top: 0.125rem; }
.note.block { display: block; margin-top: var(--s-1); }
.checks.flat { max-height: none; }
.checks.flat .chk-row + .chk-row { border-top: 1px solid var(--line); }
.chk-row > span { min-width: 0; }
.scope { margin: var(--s-4) 0; padding: var(--s-4); border-radius: var(--radius-s); background: var(--surface-2); }
.scope > p { margin: 0; }
.scope > p + p, .scope-areas + p { margin-top: var(--s-2); }
.scope-title b { color: var(--ink); font-size: 1rem; }
.scope-areas { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.scope-areas > li > b { color: var(--ink); }
.scope-areas > li.off { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.tool-list { margin: var(--s-1) 0 0; padding-left: var(--s-5); }
.tool-list li + li { margin-top: var(--s-1); }
.tool-list code, .scope code { color: var(--ink); }

/* Contractformulier: looptijd (radio) met de einddatum en het vernieuwen eronder */
fieldset.looptijd { border: 0; padding: 0; margin: 0 0 var(--s-4); min-width: 0; }
fieldset.looptijd legend { padding: 0; font-weight: 600; margin-bottom: var(--s-1); }
.when-einddatum, .when-vernieuwen { margin: 0; }
.when-einddatum[hidden], .when-vernieuwen[hidden] { display: none; }

/* Gebruiker: Projecten. Gekoppelde projecten met hun omgevingen; "Project koppelen" met een zoekbare keuzelijst. */
.field > label { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.linked-projects { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-m); }
.linked-projects > .lp { padding: var(--s-3) var(--s-4); }
.linked-projects > .lp + .lp { border-top: 1px solid var(--line); }
.lp.lp-pending { background: var(--warn-bg); }
.lp-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.lp-name { flex: 1 1 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); min-width: 0; }
.lp-name b { color: var(--ink); overflow-wrap: anywhere; }
.lp-name .note { flex-basis: 100%; }
.lp-head form { flex: none; }
.lp > .note { margin: var(--s-2) 0 0; }
.lp-envs { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-1); font-size: 0.875rem; }
.lp-envs li { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.lp-envs .env { display: inline-block; flex: none; min-width: 6.5rem; text-align: center; }
.lp-envs a { min-width: 0; overflow-wrap: anywhere; }
.lp-link h3 { margin-top: 0; }
.lp-link .field { margin-bottom: 0; }
.lp-grants { margin-top: var(--s-3); padding-top: var(--s-1); border-top: 1px dashed var(--line); }
.lp-grant { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-4); }
.lp-grant .chk-row { flex: 1 1 18rem; }
.lp-grant > .note { flex-basis: 100%; margin: 0 0 var(--s-2); }
.lp-grant > .btn { flex: none; }
p.lp-grant { margin: var(--s-2) 0 0; }
@media (max-width: 639px) { .lp-grant > .btn { margin: 0 0 var(--s-2) calc(1.25rem + var(--s-3)); } }
.lp-link-write { margin-top: var(--s-3); }
@media (min-width: 640px) { .manage.lp-link { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; } }
.pick { position: relative; }
.pick-list { list-style: none; margin: 0; padding: var(--s-1); max-height: 18rem; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface); box-shadow: var(--shadow); }
.pick-list [role='option'] { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--radius-s); cursor: pointer; }
.pick-list [role='option'] b { color: var(--ink); overflow-wrap: anywhere; }
.pick-list [role='option'] .note { flex-basis: 100%; font-size: 0.8125rem; overflow-wrap: anywhere; }
.pick-list [role='option']:hover { background: var(--surface-2); }
.pick-list [role='option'][aria-selected='true'] { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--ink); }
.pick-more { margin: 0; font-size: 0.8125rem; }
.pick-list mark { padding: 0 0.0625rem; border-radius: 0.1875rem; background: var(--brand); color: var(--brand-ink); }
/* Niet vers aangemeld: de herbevestiging is de eerste stap (tekst en knop naast elkaar, op smal scherm onder elkaar). */
.lp-reauth { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.lp-reauth > p { margin: 0; flex: 1 1 16rem; }
.lp-reauth > .btn { flex: none; }
.lp-demo { margin: 0 0 var(--s-3); }
@media (max-width: 639px) { .lp-link form .actions, .lp-link form .actions .btn { width: 100%; } }
@media (forced-colors: active) {
  .pick-list [role='option'][aria-selected='true'] { outline: 2px solid Highlight; }
  .pick-list mark { background: Mark; color: MarkText; }
  .lp.lp-pending { outline: 2px solid CanvasText; }
}

/* Wijziging bevestigen (/portaal/bevestigen/:id) */
.confirm-what { margin: 0 0 var(--s-4); padding: var(--s-4); border: 1px solid var(--bad); border-radius: var(--radius-s); background: var(--surface-2); }
.confirm-what p.confirm-first { margin: 0; font-weight: 700; color: var(--ink); }
.confirm-what ul { margin: var(--s-2) 0 0; padding-left: var(--s-5); }
.confirm-what li { overflow-wrap: anywhere; }
.confirm-what li + li { margin-top: var(--s-1); }
.confirm-summary { font-style: italic; }
.card dl.meta + .notice, .card dl.meta + .note { margin-top: var(--s-4); }
.card .note + .actions { margin-top: var(--s-2); }
@media (forced-colors: active) { .confirm-what { border-color: CanvasText; } }

/* Update-run bevestigen (/portaal/bevestigen/:id, scope run; Fase 5 Taak 10) */
.confirm-hosts { margin: var(--s-3) 0 0; }
.confirm-hosts h3, .confirm-what h3.confirm-details-h { margin: 0 0 var(--s-2); font-size: 0.875rem; color: var(--ink); }
.confirm-what h3.confirm-details-h { margin-top: var(--s-4); }
.confirm-run .confirm-what ul { margin-top: 0; }
.confirm-what li.sub { list-style: circle; margin-left: var(--s-4); font-size: 0.875rem; }
.confirm-what li.sub + li:not(.sub) { margin-top: var(--s-2); }
.confirm-hostlist, .confirm-run .confirm-what ul.confirm-hostlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1) var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.confirm-hostlist li, .confirm-what .confirm-hostlist li + li { margin: 0; display: flex; align-items: center; gap: var(--s-2); min-width: 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); }
.confirm-hostlist .env { flex: none; }
.confirm-host { min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: var(--ink); }
.confirm-run.is-live .confirm-what { border-width: 2px; }
/* Taak 16 UX: red belongs to LIVE. A staging run gets a neutral frame; the final LIVE go-button is solid red. */
.confirm-run:not(.is-live) .confirm-what { border-color: var(--line-strong); }
.confirm-run .confirm-what .notice.warn { margin: var(--s-3) 0 0; }
.confirm-run.is-live .actions .btn.danger { background: var(--danger-fill); border-color: var(--danger-fill); color: #fff; }
.confirm-run.is-live .actions .btn.danger:hover { background: var(--danger-fill-hover); border-color: var(--ink); }
.confirm-run dd code { overflow-wrap: anywhere; font-size: 0.8125rem; }
@media (max-width: 479px) {
  .confirm-run .confirm-what { padding: var(--s-3); }
  .confirm-run .confirm-what ul:not(.confirm-hostlist) { padding-left: var(--s-4); }
  .confirm-run .actions, .confirm-run .actions form, .confirm-run .actions .btn { width: 100%; }
}

/* ---------- Site-hub: tab Info (Combell, alleen lezen) ---------- */
.info-title { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3) var(--s-6); }
.info-title > div { min-width: 0; flex: 1 1 16rem; }
.info-title p { margin: var(--s-1) 0 0; }
.info-title form { flex: none; }
@media (max-width: 479px) { .info-title form, .info-title form .btn { width: 100%; } }
.hub-main > .banner { margin: 0; }
.info-asof { margin: 0 0 var(--s-3); }
.info-empty { margin: 0; padding: var(--s-4) var(--s-5); border: 1px dashed var(--line-strong); border-radius: var(--radius-m); background: var(--surface-2); color: var(--muted); }
details.acc .acc-body > .info-asof { margin-bottom: var(--s-3); }
details.acc .acc-body h3 { margin: var(--s-5) 0 var(--s-2); }
details.acc .acc-body > .info-asof + h3 { margin-top: var(--s-2); }
.dd-sub { display: block; color: var(--muted); font-size: 0.8125rem; margin-top: var(--s-1); }
.plainlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.plainlist.keys code { overflow-wrap: anywhere; }
.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-m); }
.info-list > li { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); min-width: 0; }
.info-list > li:last-child { border-bottom: 0; }
.info-list p { margin: var(--s-1) 0 0; overflow-wrap: anywhere; }
.info-item-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); }
.info-item-head b { color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.usage-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); }
progress.usage { appearance: none; -webkit-appearance: none; flex: none; width: 8rem; max-width: 100%; height: 0.5rem; border: 0; border-radius: 999px; overflow: hidden; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); }
progress.usage::-webkit-progress-bar { background: var(--surface-2); }
progress.usage::-webkit-progress-value { background: var(--ink); border-radius: 999px; }
progress.usage::-moz-progress-bar { background: var(--ink); border-radius: 999px; }
/* DNS: gestapelde kaarten op mobiel (zie .table-wrap), lange waarden breken; filter en sortering komen van portal.js. */
.dns-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin-bottom: var(--s-4); align-items: center; }
.dns-tools[hidden] { display: none; }
.dns-tools .field { margin: 0; }
.dns-tools .note { margin: 0; }
@media (min-width: 640px) { .dns-tools { grid-template-columns: minmax(0, 1fr) 12rem auto; } .dns-sortpick { display: none; } }
.table-wrap.dns, .table-wrap:has(.dns-content) { border: 1px solid var(--line); border-radius: var(--radius-m); }
.dns-content, .dns-name { overflow-wrap: anywhere; word-break: break-word; }
.dns-content .cell { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; max-width: 100%; }
.dns-type { font-weight: 700; color: var(--ink); font-size: 0.8125rem; }
@media (min-width: 640px) { .dns-content { min-width: 16rem; max-width: 36rem; } .table-wrap.dns td { vertical-align: top; } }
th[data-sort] .sortbtn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s-1); font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit; }
th[data-sort] .sortbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--radius-2xs); }
th[data-sort] .sortbtn::after { content: ''; width: 0.4rem; height: 0.4rem; border-right: 2px solid transparent; border-bottom: 2px solid transparent; transform: rotate(45deg); margin-bottom: 0.15rem; }
th[aria-sort='ascending'] .sortbtn::after { border-color: var(--ink); transform: rotate(-135deg); margin-bottom: -0.15rem; }
th[aria-sort='descending'] .sortbtn::after { border-color: var(--ink); }
@media (forced-colors: active) {
  progress.usage { appearance: auto; -webkit-appearance: auto; border: 1px solid CanvasText; background: Canvas; color: Highlight; box-shadow: none; }
  progress.usage::-webkit-progress-bar { background: Canvas; }
  progress.usage::-webkit-progress-value { background: Highlight; }
  progress.usage::-moz-progress-bar { background: Highlight; }
  .info-empty, .info-list { border-color: CanvasText; }
  th[aria-sort='ascending'] .sortbtn::after, th[aria-sort='descending'] .sortbtn::after { border-color: CanvasText; }
}
.table-wrap tr[hidden], .info-empty[hidden] { display: none !important; }

/* ---------- Acties (prompts) en Wijzigingen ---------- */
.actions-head > * { margin: 0; }
.actions-head > * + * { margin-top: var(--s-2); }
.actions-head h2 { margin-bottom: 0; }
.prompt-list { display: grid; gap: var(--s-6); }
.prompt-card { display: grid; gap: var(--s-3); min-width: 0; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.prompt-list > .prompt-card:first-child { padding-top: 0; border-top: 0; }
.prompt-card > * { margin: 0; }
.prompt-card h3 { font-size: 1rem; }
.prompt-text { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 0.875rem; line-height: 1.5; padding: var(--s-3) var(--s-4); border-radius: var(--radius-m); border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); resize: vertical; min-height: 6rem; field-sizing: content; max-height: 24rem; }
.prompt-card .actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
@media (max-width: 639px) { .prompt-card .actions .btn { flex: 1 1 100%; justify-content: center; } }
/* Tracking: "Leadtracking / Keywordtracking automatisch installeren" (Fase 8 D6b) */
.tracking-prompts { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); display: grid; gap: var(--s-3); }
.tracking-prompts > * { margin: 0; }
.tracking-prompt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.tracking-prompt { display: grid; gap: var(--s-2); min-width: 0; }
.tracking-prompt h3 { margin: 0; font-size: 1rem; }
.tracking-prompt .prompt-buttons { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
/* Secondary under "Tracking in orde maken": small buttons; on a phone three in a row (wrapping when needed), never full width. */
@media (max-width: 639px) {
  .tracking-prompts { margin-top: var(--s-3); padding-top: var(--s-3); gap: var(--s-2); }
  .tracking-prompt-list { gap: var(--s-3); }
  .tracking-prompt h3 { font-size: 0.9375rem; }
  .tracking-prompt .prompt-buttons { gap: var(--s-1); }
  .tracking-prompt .prompt-buttons .btn { flex: 1 1 auto; justify-content: center; }
}
.card.pad > h2 + .tracking-prompts { margin-top: 0; padding-top: 0; border-top: 0; }
@media (forced-colors: active) { .tracking-prompts { border-top-color: CanvasText; } }
@media (forced-colors: active) { .prompt-text { border-color: CanvasText; background: Canvas; color: CanvasText; } .prompt-card { border-top-color: CanvasText; } }
.table-wrap.changes-table .site { display: grid; gap: 0.125rem; min-width: 0; overflow-wrap: break-word; }
.table-wrap.changes-table .dd-sub { margin-top: 0; }
@media (min-width: 1200px) { .table-wrap.changes-table td { vertical-align: top; } .table-wrap.changes-table:not(.in-hub) td:nth-child(n+2) { min-width: 7.5rem; } .table-wrap.in-hub td:nth-child(2) { width: 100%; } }
.changes-head > .pad > * { margin: 0; }
.changes-head > .pad > * + * { margin-top: var(--s-2); }
.row-details { margin-top: var(--s-2); }
.row-details > summary { cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: var(--ink); text-decoration: underline; min-height: 1.5rem; }
.row-details > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--radius-2xs); }
.row-details [data-lazy-body] { margin-top: var(--s-2); text-align: left; }
.row-details [data-lazy-body] > * { margin: 0; }
.diff { display: grid; gap: var(--s-3); margin: 0; }
.diffbox { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--s-3); font-size: 0.875rem; }
.pending-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.pending-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-m); }
.pending-item > div { display: grid; gap: var(--s-1); min-width: 0; flex: 1 1 14rem; overflow-wrap: anywhere; }
.pending-item .dd-sub { margin-top: 0; }
@media (forced-colors: active) { .diffbox, .pending-item { border-color: CanvasText; } }
.row-details dl.meta > div { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
.row-details .diffbox { margin: 0; min-width: 0; }
.changes-table .byline { color: var(--ink); }
.changes-table .request { font-style: italic; }

/* ---------- UX-pass Fase 3 (bevestigen, acties, wijzigingen, info) ---------- */
/* Bevestigen: een smalle kolom houdt de beslissing leesbaar; de knoppen staan op mobiel onder elkaar en zijn groot genoeg. */
.confirm-card { max-width: 46rem; }
.confirm-card .actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
@media (max-width: 479px) { .confirm-card .actions { display: grid; } .confirm-card .actions form, .confirm-card .actions .btn, .confirm-card .actions button { width: 100%; justify-content: center; } }
/* Acties: op een smal scherm een hoger tekstvak, zodat de Regels niet afgekapt achter een scrollbalk zitten. */
@media (max-width: 639px) { .prompt-text { max-height: 40rem; } }
/* Wijzigingen: de kaartweergave in de sitehub zet Wat bovenaan over de volle breedte; Wanneer, Status en actie eronder. */
@media (min-width: 640px) and (max-width: 1199px) {
  .table-wrap.changes-table.in-hub td:nth-child(2) { grid-column: 1 / -1; order: -1; }
}
/* Wijziging-detail: lucht tussen de feiten en 'Voor en na', en onder de vergelijking. */
.card dl.meta + h3 { margin-top: var(--s-6); }
.card .diff + p { margin-top: var(--s-5); }

/* ---------- Leads (Fase 4): startpagina en project-overzicht ---------- */
.subnav { display: flex; gap: var(--s-1); margin: 0 0 var(--s-6); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
.subnav a { flex: none; margin-bottom: -1px; padding: var(--s-3) var(--s-4); font-size: 0.875rem; font-weight: 500; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.srcchips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: var(--s-3) 0 0; padding: 0; font-size: 0.8125rem; color: var(--muted); }
.srcchips li { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; overflow-wrap: anywhere; }
.pagehead p + .srcchips { margin-top: var(--s-3); }
.pagehead .actions { align-items: center; }

/* Startpagina: een kaart per project */
.leads-search.filters { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: var(--gap); box-shadow: var(--shadow); }
#leads-resultaten > .results { margin: 0 0 var(--s-3); padding: 0; color: var(--muted); font-size: 0.875rem; }
.lgrid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.lcard { position: relative; display: grid; gap: var(--s-4); align-content: start; transition: border-color var(--ease); }
.lcard:has(.lcard-link:hover) { border-color: var(--line-strong); }
.lcard:has(.lcard-link:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.lcard.archived { background: var(--surface-2); box-shadow: none; }
.lcard > * { margin: 0; }
.lhead h2 { font-size: 1.125rem; overflow-wrap: anywhere; }
.lhead .note { margin: var(--s-1) 0 0; }
.lcard-link { color: var(--ink); text-decoration: none; }
.lcard-link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
.lcard-link:focus-visible { outline: none; }
.lstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.lstats dt { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.lstats dd { margin: var(--s-1) 0 0; font-size: 1.5rem; font-weight: 700; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.lstats .trend { font-size: 0.8125rem; margin-left: var(--s-1); white-space: nowrap; }
.lspark .chart-mini { display: block; width: 100%; }
.lspark .chart-svg { height: 3.25rem; }
.lspark .chart-line .line { stroke-width: 2; }
.lstatus { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.lupd { font-size: 0.8125rem; }
.leads-empty { text-align: center; padding: var(--s-8) var(--s-4); }
.leads-empty h2 { margin-bottom: var(--s-2); }
.leads-empty p { max-width: 34rem; margin-inline: auto; }
.flat { color: var(--muted); font-weight: 600; }

/* Overzicht: periode en filters in één kaart */
.lfilters { display: grid; gap: var(--s-4); margin-bottom: var(--gap); }
.lfilters > * { margin: 0; }
.periods { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.prow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-2); }
.period-btn, .vtab { display: inline-flex; align-items: center; justify-content: center; min-height: 2rem; padding: 0.25rem var(--s-3); border-radius: var(--radius-xs); font-size: 0.8125rem; font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap; }
a.period-btn:hover, a.vtab:hover { background: var(--surface); color: var(--ink); }
.period-btn[aria-current='true'], .vtab[aria-current='true'] { background: var(--ink); color: var(--bg); }
.vtab[aria-disabled='true'] { color: var(--muted); opacity: 0.6; cursor: not-allowed; }
.pcustom.on { border-color: var(--ink); }
.pcustom { gap: var(--s-2); padding: 3px var(--s-1) 3px 3px; }
.period-date { font: inherit; font-size: 0.8125rem; min-height: 2rem; padding: 0 var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: var(--surface); color: var(--ink); }
.compare { font-size: 0.8125rem; }
details.lf > summary { display: none; list-style: none; cursor: pointer; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 2.75rem; padding: var(--s-2) var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--radius-m); font-weight: 600; color: var(--ink); }
details.lf > summary::-webkit-details-marker { display: none; }
details.lf > summary::after { content: ''; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform var(--ease); }
details.lf[open] > summary::after { transform: rotate(45deg); }
.lf-body { display: grid; gap: var(--s-4); }
.lf-body > * { margin: 0; }
.sitechips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2rem; padding: 0.25rem var(--s-3); border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.8125rem; font-weight: 600; color: var(--text); text-decoration: none; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-current='true'] { border-color: var(--ink); background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lf-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.lf-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.fixedsel { flex-basis: 100%; margin: 0; }
details.more > summary { cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.more-body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-3); }
.fl-pop { position: relative; }
.fl-pop > summary, .menu > summary { list-style: none; cursor: pointer; }
.fl-pop > summary::-webkit-details-marker, .menu > summary::-webkit-details-marker, .goal-edit > summary::-webkit-details-marker { display: none; }
.fl-pop[open] > summary { border-color: var(--ink); }
.pop { position: absolute; z-index: 10; top: calc(100% + var(--s-2)); left: 0; width: min(22rem, 86vw); padding: var(--s-4); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-m); box-shadow: var(--shadow); }
.pop .field { margin-bottom: var(--s-3); }
.pop-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); color: var(--ink); }
.pop-list { display: grid; gap: 2px; max-height: 16rem; overflow: auto; }
.pop-src { margin: var(--s-2) 0 var(--s-1); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.chk { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-1) 0; font-size: 0.875rem; color: var(--text); cursor: pointer; }
.chk input { flex: none; width: 1.125rem; height: 1.125rem; margin: 0.1875rem 0 0; accent-color: var(--ink); }
.chk small { color: var(--muted); font-size: 0.8125rem; }
.chk.unique { align-items: center; }
/* In a filter popover a checkbox row starts at the left (the generic .chk centres a lone box); the first-digit list of the postcode filter is a compact grid. */
.pop .chk { justify-content: flex-start; }
.pop-list.digits { grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: 0 var(--s-3); margin-bottom: var(--s-3); }
.chk.unique span { display: inline-flex; flex-wrap: wrap; gap: 0 var(--s-2); align-items: baseline; }

/* Cijferkaarten */
.leadkpis .kpi { position: relative; }
.kpi .l { text-transform: uppercase; }
.kpi .goalnote { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.6875rem; }
.kpi .s.trend { margin-top: var(--s-1); }
.kpi .s.trend span:not(.up):not(.down):not(.flat) { color: var(--muted); }
.infotip { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin: -0.25rem 0 -0.25rem 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font: 700 0.6875rem/1 var(--font); cursor: help; vertical-align: middle; text-transform: none; letter-spacing: 0; box-shadow: inset 0 0 0 1px var(--line-strong); }
.infotip:hover, .infotip:focus-visible { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tip { display: none; position: absolute; z-index: 5; left: var(--s-3); right: var(--s-3); top: 2.75rem; padding: var(--s-2) var(--s-3); border-radius: var(--radius-s); background: var(--ink); color: var(--bg); font-size: 0.8125rem; font-weight: 500; line-height: 1.4; text-transform: none; letter-spacing: 0; box-shadow: var(--shadow); }
.infotip:hover + .tip, .infotip:focus-visible + .tip { display: block; }

/* Staafgrafiek en donuts */
.chartcard { padding: var(--s-5) var(--s-6); margin-bottom: var(--gap); }
.chart-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
.chart-tabs { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.vtabs { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-2); }
.donuts { display: grid; gap: var(--gap); margin-bottom: var(--gap); }
@media (min-width: 900px) { .donuts { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } }
.donuts .smallh { font-size: 0.9375rem; margin-bottom: var(--s-3); }
.donuts .chart-donut { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.donuts .chart-svg { max-width: 12.5rem; }
.donuts .chart-legend-list { width: 100%; }

/* Kanalen & campagnes */
.chancard { margin-bottom: var(--gap); padding-bottom: var(--s-2); --cols: minmax(0, 1fr) 4.5rem 4.5rem; }
.chancard.costs { --cols: minmax(0, 1fr) 4.5rem 4.5rem 7rem 6rem; }
.chancard .pad { padding: var(--s-5) var(--s-6) 0; }
.chancard .sectionhead { align-items: flex-start; }
.chancard .sectionhead p { max-width: 46rem; }
.cov p { margin: 0; font-size: 0.875rem; }
.covpct { display: block; margin-top: var(--s-1); text-align: right; }
.covbar { display: block; width: 100%; height: 0.5rem; margin-top: var(--s-2); }
.covbg { fill: var(--surface-2); }
.covfg { fill: var(--ink); }
.chan-head, details.chan > summary { display: grid; grid-template-columns: var(--cols) 0.5rem; align-items: center; gap: var(--s-4); }
.chan-head { margin-top: var(--s-4); padding: var(--s-2) var(--s-6); border-bottom: 1px solid var(--line); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.cn { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; white-space: nowrap; }
.chan-head .cn { color: var(--muted); }
details.chan > summary::after { justify-self: end; }
details.chan .acc-body { padding-top: var(--s-2); }
details.chan .table-wrap { border: 1px solid var(--line); border-radius: var(--radius-s); }
td.num { font-variant-numeric: tabular-nums; }
@media (min-width: 640px) { td.num, th.num { text-align: right; } }
details.tail { margin-top: var(--s-3); }
details.tail > summary { cursor: pointer; padding: var(--s-2) 0; font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.costnote { margin: 0; padding-bottom: var(--s-3); }
.lupdated { margin: var(--s-2) 0 0; }
@media (max-width: 639px) {
  .chan-head { display: none; }
  details.chan > summary { position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-3); padding-right: var(--s-12); }
  details.chan > summary .t { grid-column: 1 / -1; }
  details.chan > summary::after { position: absolute; top: var(--s-5); right: var(--s-6); }
  .cn { text-align: left; }
  .cn::before { content: attr(data-label); display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
  .chancard .pad { padding: var(--s-4) var(--s-4) 0; }
  details.acc.chan summary { padding-inline: var(--s-4); }
  details.acc.chan .acc-body { padding-inline: var(--s-4); }
  .chartcard { padding: var(--s-4); }
}

/* Exporteren en doel */
.menu, .goal-edit { position: relative; }
.menu-pop { position: absolute; z-index: 10; right: 0; top: calc(100% + var(--s-2)); display: grid; min-width: 14rem; padding: var(--s-2); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-m); box-shadow: var(--shadow); }
.menu-pop .l { margin: 0; padding: var(--s-1) var(--s-3); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.menu-pop a, .menuitem { display: flex; align-items: center; min-height: 2.25rem; padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--radius-xs); background: none; color: var(--ink); font: inherit; font-size: 0.875rem; text-align: left; text-decoration: none; cursor: pointer; }
.menu-pop a:hover, .menuitem:hover { background: var(--surface-2); }
.goal-pill { cursor: pointer; list-style: none; min-height: 2rem; border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
.goal-pill:hover { border-color: var(--ink); }
.goal-edit > form { position: absolute; z-index: 10; right: 0; top: calc(100% + var(--s-2)); width: 16rem; padding: var(--s-4); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-m); box-shadow: var(--shadow); }
.print-only { display: none; }

@media (max-width: 767px) {
  details.lf > summary { display: flex; }
  .lf-body { margin-top: var(--s-3); }
  .pop { position: static; width: auto; margin-top: var(--s-2); box-shadow: none; }
  .fl-pop { flex: 1 1 100%; }
  .fl-pop > summary { width: 100%; justify-content: space-between; min-height: 2.5rem; }
  .menu, .goal-edit { position: static; }
  .pagehead .actions { position: relative; }
  .menu-pop, .goal-edit > form { left: 0; right: 0; width: auto; }
  .leadkpis .kpi .tip { left: var(--s-2); right: var(--s-2); }
  .period-btn, .vtab { min-height: 2.25rem; }
}
@media (max-width: 479px) {
  .periods { gap: var(--s-2); }
  .prow { width: 100%; justify-content: space-between; }
  .prow .period-btn { flex: 1; }
  .pcustom { justify-content: space-between; }
  .pcustom .period-date { flex: 1 1 8rem; min-width: 0; }
  .pagehead .actions { width: 100%; }
  .pagehead .actions > * { flex: none; }
}
/* Formulieren en Regio's */
.lreport > .card { margin-bottom: var(--gap); }
.lreport .sectionhead { align-items: flex-start; }
.lreport .sectionhead .badge { flex: none; }
.lreport h3 { font-size: 1rem; }
.gcards, .rcards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
@media (min-width: 1200px) { .rcards { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); } }
.gcard { display: grid; gap: var(--s-2); align-content: start; box-shadow: none; background: var(--surface-2); }
.gcard > * { margin: 0; }
.gcard header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.gcard h3 { display: flex; align-items: center; gap: var(--s-2); min-width: 0; overflow-wrap: anywhere; }
.gcard h3 .dot, .rcard .l .dot { flex: none; }
.gshare { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.gcount { color: var(--muted); font-size: 0.875rem; }
.gcount b { font-size: 1.75rem; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.gtrend, .gpostal { font-size: 0.8125rem; }
.gcard .covbar { margin-top: var(--s-1); }
.flist { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; }
.flist li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: var(--s-2) 0; border-top: 1px solid var(--line); font-size: 0.875rem; }
.flist .t { min-width: 0; overflow-wrap: anywhere; color: var(--text); }
.flist .n { flex: none; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.attn { border-color: var(--warn); }
.attn > .actions { margin: var(--s-4) 0 0; }
.twocols { display: grid; gap: var(--s-6); }
.twocols > div > * { margin-top: 0; }
@media (min-width: 768px) { .twocols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card.kpi.rcard, a.kpi.link.rcard { display: grid; gap: var(--s-1); align-content: start; color: inherit; text-decoration: none; }
.rcard .l { display: flex; align-items: center; gap: var(--s-2); }
.rcard .v { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem); font-weight: 700; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.rcard .s { font-size: 0.8125rem; color: var(--muted); }
a.rcard { transition: border-color var(--ease); }
a.rcard:hover { border-color: var(--line-strong); }
a.rcard:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
a.rcard[aria-current='true'] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.rcard .trend span:not(.up):not(.down):not(.flat) { color: var(--muted); }
.chartnote { margin: var(--s-2) 0 0; }
.lreport .cov { margin-top: var(--s-5); }
.recon { margin: 0; display: grid; }
.recon > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: var(--s-2) 0; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.recon dt { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.recon dd { margin: 0; flex: none; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.recon .l0 { font-weight: 600; }
.recon .l0 dt { color: var(--ink); }
.recon .l1 dt { padding-left: var(--s-4); }
.recon .l2 dt { padding-left: var(--s-8); }
.recon .l3 dt { padding-left: var(--s-12); }
.recon .l3 dd, .recon .l2 dd { font-weight: 500; }
.recon + .note { margin: var(--s-3) 0 0; }
.postal-search { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.postal-search .search-wrap { flex: 1 1 18rem; max-width: 28rem; }
.postal-search .search-wrap .input { width: 100%; }
.postal-search .actions { margin: 0; }
.results { margin: 0 0 var(--s-3); }
.postals { border: 1px solid var(--line); border-radius: var(--radius-s); }
.postals th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: var(--s-1); }
.postals th a:hover { color: var(--ink); text-decoration: underline; }
.postals th a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--radius-2xs); }
.postals th[aria-sort] a { color: var(--ink); }
.postals th[aria-sort] a::after { content: ''; width: 0.4rem; height: 0.4rem; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); margin-bottom: 0.15rem; }
.postals th[aria-sort='ascending'] a::after { transform: rotate(-135deg); margin-bottom: -0.15rem; }
.postals td .cell { overflow-wrap: anywhere; }
.sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); font-size: 0.8125rem; color: var(--muted); }
.sortopt a { display: inline-flex; align-items: center; min-height: 2rem; padding: 0.25rem var(--s-3); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); font-weight: 600; text-decoration: none; }
.sortopt[aria-current='true'] a { border-color: var(--ink); background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
@media (min-width: 640px) { .sortbar { display: none; } }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); margin-top: var(--s-4); font-size: 0.875rem; color: var(--muted); }
.pager-links { display: inline-flex; align-items: center; gap: var(--s-3); }
@media (max-width: 639px) { .postal-search .search-wrap { max-width: none; } .pager { justify-content: center; } }

@media (forced-colors: active) {
  .period-btn[aria-current='true'], .vtab[aria-current='true'], .chip[aria-current='true'] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}
@media print {
  .subnav, .lfilters, .pagehead .actions, .crumb, .notice, .infotip, .tip, .vtabs, .chancard .sectionhead .btn, .lupdated, .lcard-link::after { display: none; }
  .print-only { display: block; margin: 0 0 var(--s-4); }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  details.chan > summary::after { display: none; }
}

/* The visually hidden data table of a chart is positioned inside its figure and clipped there (it never widens the page). */
.chart { position: relative; overflow-x: clip; }

/* Review ronde 1: rustige omgevingsbadge op rapportpagina's, lichtere dekkingsbalk, leesbare grafiek en subnavigatie op de telefoon. */
.env.quiet { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.covfg { fill: var(--info); }
.covbg { fill: var(--line); }
.nodata { margin: 0; padding: var(--s-3) 0; }
@media (max-width: 639px) {
  .subnav a { padding: var(--s-3) var(--s-2); font-size: 0.8125rem; }
  .chartcard .chart-svg { font-size: 22px; }
  .chartcard .chart-bar .total { display: none; }
}

/* Grafieken (src/portal/charts.ts). Categorisch: vaste volgorde. Alle 12 slots gevalideerd met de dataviz-validator (licht op #fff, donker op
   #171a1d): contrast >= 3:1, chroma, adjacente CVD en normaal-zicht-verschil. Het 'Overig'-slot is bewust neutraal en geen deel van de reeksen. */
:root { --chart-1: #2a78d6; --chart-2: #d1541f; --chart-3: #10906a; --chart-4: #b57600; --chart-5: #c74e7e; --chart-6: #008300; --chart-7: #6250d6; --chart-8: #e34948; --chart-9: #0088a0; --chart-10: #a0522d; --chart-11: #a3329b; --chart-12: #6b7f00; --chart-other: #8b8a85; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --chart-1: #3987e5; --chart-2: #d95926; --chart-3: #199e70; --chart-4: #c98500; --chart-5: #d55181; --chart-6: #1a9a1a; --chart-7: #9085e9; --chart-8: #e66767; --chart-9: #27a3b3; --chart-10: #c9744a; --chart-11: #c060b8; --chart-12: #84a028; --chart-other: #a3a29c; } }
:root[data-theme='dark'] { --chart-1: #3987e5; --chart-2: #d95926; --chart-3: #199e70; --chart-4: #c98500; --chart-5: #d55181; --chart-6: #1a9a1a; --chart-7: #9085e9; --chart-8: #e66767; --chart-9: #27a3b3; --chart-10: #c9744a; --chart-11: #c060b8; --chart-12: #84a028; --chart-other: #a3a29c; }
.chart .c1 { --c: var(--chart-1); }
.chart .c2 { --c: var(--chart-2); }
.chart .c3 { --c: var(--chart-3); }
.chart .c4 { --c: var(--chart-4); }
.chart .c5 { --c: var(--chart-5); }
.chart .c6 { --c: var(--chart-6); }
.chart .c7 { --c: var(--chart-7); }
.chart .c8 { --c: var(--chart-8); }
.chart .c9 { --c: var(--chart-9); }
.chart .c10 { --c: var(--chart-10); }
.chart .c11 { --c: var(--chart-11); }
.chart .c12 { --c: var(--chart-12); }
.chart .cother { --c: var(--chart-other); }
.chart { margin: 0; color: var(--muted); min-width: 0; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; font: 500 11px var(--font); }
.chart .fillc { fill: var(--c); }
.chart .strokec { stroke: var(--c); }
.chart .bar, .chart .slice { stroke: var(--surface); stroke-width: 2; }
.chart .grid { stroke: var(--line); }
.chart .axis { stroke: var(--line-strong); }
.chart .goal { color: var(--text); }
.chart .total { color: var(--ink); font-weight: 600; }
.chart .donut-total { color: var(--ink); font-size: 22px; font-weight: 700; }
.chart .dot { stroke: var(--surface); stroke-width: 2; }
.chart .slice-link { cursor: pointer; }
.chart .slice-link:hover .slice { opacity: 0.85; }
.chart .slice-link:focus-visible { outline: none; }
.chart .slice-link:focus-visible .slice { stroke: var(--ink); stroke-width: 3; }
.chart-donut { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr); gap: var(--s-4) var(--s-6); align-items: center; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: var(--s-3) 0 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--text); }
.chart-legend li { display: inline-flex; align-items: center; gap: var(--s-2); }
.chart-legend-list { display: grid; margin: 0; gap: var(--s-2); }
.chart-legend-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--s-2); }
.chart-legend li .lbl, .chart-legend li span { overflow-wrap: anywhere; min-width: 0; }
.chart-legend-list a.lbl { color: var(--ink); text-underline-offset: 2px; }
.chart-legend-list .val { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.chart-legend-list .pct { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 3.5rem; text-align: right; }
.chart-mini { display: inline-block; width: 7.5rem; vertical-align: middle; }
.chart-empty .empty { border: 1px dashed var(--line-strong); border-radius: var(--radius-s); }
@media (max-width: 40rem) { .chart-donut { grid-template-columns: 1fr; } }
@media (forced-colors: active) { .chart .bar, .chart .slice { stroke: Canvas; } .chart .fillc, .chart .sw { forced-color-adjust: none; } }
/* Hub 2.5.0: the admin forms never print. */
@media print { .note-new, .note-actions, .budgets-actions .btn, .report-new, .report-card .actions { display: none !important; } }
@media print {
  html:root:root { --chart-1: #2a78d6; --chart-2: #d1541f; --chart-3: #10906a; --chart-4: #b57600; --chart-5: #c74e7e; --chart-6: #008300; --chart-7: #6250d6; --chart-8: #e34948; --chart-9: #0088a0; --chart-10: #a0522d; --chart-11: #a3329b; --chart-12: #6b7f00; --chart-other: #8b8a85; --surface: #fff; --line: #e3e5e0; --line-strong: #cfd2cb; --ink: #000; --text: #222; --muted: #444; --ok: #1f7a4a; --bad: #b3261e; --warn: #8a5a00; --bg: #fff; --surface-2: #f1f2ee; --ok-bg: #e3f5ea; --warn-bg: #fff4cc; --bad-bg: #fde7e5; --info: #2a4fa8; --info-bg: #e6ecfb; --goal-text: #b8312f; }
  .chart { break-inside: avoid; }
  .chart .bar, .chart .slice { stroke: #fff; }
}

/* ---- Leads, Instellingen (/portaal/leads/:slug/settings): één formulier met drie accordeons en een vaste opslagbalk ---- */
.settings { display: block; }
.setcard { margin-bottom: var(--s-4); }
.setcard details.acc .acc-body { padding-bottom: var(--s-6); }
.settings .sgrid { display: grid; gap: 0 var(--s-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 720px) { .settings .sgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.settings .sectionhead.sub { margin: var(--s-6) 0 var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.settings .sectionhead.sub h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; font-size: 1rem; }
.settings .acc-body .field { margin-bottom: var(--s-4); }
.settings .acc-body .field input[type='color'] { width: 4rem; padding: var(--s-1); cursor: pointer; }
.settings .field.color { flex: none; }
.sitems { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-4); counter-reset: sitem; }
.sitem { counter-increment: sitem; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-2); min-width: 0; scroll-margin-top: var(--s-6); }
.sitem-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); min-width: 0; }
.sitem-n::before { content: counter(sitem); display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 var(--s-2); border-radius: 999px; background: var(--ink); color: var(--surface); font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sitem-title { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.sitem-tools { display: inline-flex; flex: none; gap: var(--s-1); }
.sitem-tools .btn { min-width: 2.5rem; min-height: 2.5rem; }
.sitem-tools .btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.sitem-grid { display: grid; gap: 0 var(--s-4); grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.sitem .checks { margin-bottom: 0; background: var(--surface); }
.sitem .field { margin-bottom: var(--s-4); }
.sitem .field textarea { min-height: 5rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9375rem; }
.settings .checks.wide { max-height: none; margin-bottom: 0; }
.settings .checks.wide > .note { margin: 0 0 var(--s-2); }
.choice-grid { display: grid; gap: 0 var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.choice > span { display: grid; min-width: 0; }
.choice > span > b { overflow-wrap: anywhere; font-weight: 600; }
.choice.is-new > span > .note:not(:empty) { color: var(--warn); font-weight: 600; }
.catalog-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.catalog-toolbar h3 { margin: 0; }
.catalog-toolbar p { margin: var(--s-1) 0 0; color: var(--muted); font-size: 0.875rem; max-width: 60ch; }
.catalog-empty { margin: 0 0 var(--s-4); padding: var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--radius-s); color: var(--muted); font-size: 0.875rem; }
.catalog-empty[hidden] { display: none; }
.catalog-empty strong { display: block; color: var(--ink); }
.catalog-empty p { margin: var(--s-1) 0 0; }
.settings .actions + .actions { margin-top: var(--s-3); }
.savebar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-top: var(--s-4); padding: var(--s-3) var(--s-5); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.savebar .note { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.dirty-mark { display: inline-flex; align-items: center; gap: var(--s-1); padding: 0.1875rem var(--s-3); border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-weight: 700; }
.dirty-mark[hidden] { display: none; }
@media (max-width: 40rem) {
  .savebar { padding: var(--s-3) var(--s-4); }
  .savebar .btn { width: 100%; }
  .sitem-grid { grid-template-columns: minmax(0, 1fr); }
  .sitem-head { flex-wrap: wrap; }
  .sitem-title { flex: 1 1 calc(100% - 3rem); }
  .sitem-tools { flex: 1 1 100%; justify-content: flex-end; }
  .catalog-toolbar .btn { width: 100%; }
}

.errsum { margin: 0 0 var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--radius-s); background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad); }
.errsum:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.errsum h2 { margin: 0 0 var(--s-2); font-size: 1rem; color: inherit; }
.errsum ul { margin: 0; padding-left: var(--s-5); font-size: 0.875rem; }
.errsum a { color: inherit; font-weight: 700; }

/* Koppelingen (Leads, Task 21): credentials and ad accounts per project. */
.conn-page { display: grid; gap: var(--s-8); }
.conn-section > .card { margin: 0; }
.conn-list { list-style: none; margin: 0; padding: 0; }
.conn-row { display: grid; gap: var(--s-3); padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.conn-row:first-child { border-top: 0; padding-top: 0; }
.conn-row:last-child { padding-bottom: 0; }
.conn-row.is-inactive .conn-name b { color: var(--muted); }
.conn-main { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.conn-name { display: grid; gap: var(--s-1); min-width: 0; flex: 1 1 14rem; }
.conn-name b { color: var(--ink); overflow-wrap: anywhere; }
.conn-name .note { overflow-wrap: anywhere; }
.conn-badges { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.conn-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s-2) var(--s-5); margin: 0; }
.conn-meta div { display: grid; gap: 0.125rem; min-width: 0; }
.conn-meta dt { font-size: 0.75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.conn-meta dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: 0.875rem; color: var(--text); }
.conn-result { margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--radius-s); font-size: 0.875rem; font-weight: 500; background: var(--ok-bg); color: var(--ok); }
.conn-result.bad { background: var(--bad-bg); color: var(--bad); }
.conn-accounts, .conn-archived { border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--s-2) var(--s-3); }
.conn-archived { margin-top: var(--s-4); }
.conn-accounts summary, .conn-archived summary { cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.conn-accounts ul, .conn-archived ul { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.conn-accounts li, .conn-archived li { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: 0.875rem; overflow-wrap: anywhere; }
.conn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.conn-actions form { margin: 0; }
.conn-replace { padding: var(--s-4); border-radius: var(--radius-s); background: var(--surface-2); }
.conn-replace h4 { margin: 0 0 var(--s-1); font-size: 0.9375rem; }
.conn-replace .actions { margin: 0; }
.conn-add { display: grid; gap: 0 var(--s-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
.conn-add .field { align-content: start; }
.conn-badges .badge { flex: none; }
@media (min-width: 48rem) { .conn-add { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); } .conn-add .conn-secret, .conn-add .conn-hint { grid-column: 1 / -1; } }
.conn-secret textarea { min-height: 10rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875rem; }
.conn-secret code { font-size: 0.8125rem; }
.conn-hint { margin: calc(-1 * var(--s-2)) 0 var(--s-4); }
/* Only the secret field that fits the chosen network (a browser without :has() shows both; the server reads the right one). */
form:has(select[name='network'] option[value='google']:checked) .conn-token,
form:has(select[name='network'] option[value='meta']:checked) .conn-json,
form:has(select[name='network'] option[value='hubspot']:checked) .conn-json { display: none; }
.conn-metanote { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--radius-s); background: var(--info-bg); color: var(--info); font-size: 0.875rem; }
.conn-linkblock { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.conn-subhead { margin: 0 0 var(--s-2); font-size: 0.9375rem; color: var(--ink); }
.conn-link { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.conn-link .field { margin: 0; flex: 1 1 18rem; min-width: 0; }
.conn-link .field select { max-width: 100%; }
@media (max-width: 40rem) { .conn-link .btn, .conn-actions .btn { width: 100%; } .conn-actions form, .conn-actions > a { flex: 1 1 100%; } }

/* Leads beheer and status (Fase 4 Task 19) */
a.st { color: inherit; text-decoration: none; }
a.st.ok { color: var(--ok); } a.st.warn { color: var(--warn); } a.st.bad { color: var(--bad); }
a.st:hover { text-decoration: underline; }
.enable { margin-bottom: var(--gap); }
.enable .note { margin: 0 0 var(--s-3); }
.enable-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-4); }
.enable-row .field { flex: 1 1 18rem; margin-bottom: 0; }
.subhead { margin: var(--s-5) 0 var(--s-3); font-size: 0.9375rem; }
.srcmeta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); margin: 0; }
.srcmeta .note { margin: 0; }
.srclinks { display: inline-flex; gap: var(--s-4); font-size: 0.875rem; }
.srclist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.srcrow { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); }
.srcrow.is-archived { background: var(--surface-2); }
.srcrow-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.srcdot { flex: none; }
.srcrow-name { flex: 1 1 12rem; min-width: 0; display: grid; }
.srcrow-name b { color: var(--ink); overflow-wrap: anywhere; }
.srcrow-name .note { overflow-wrap: anywhere; }
.srcrow-badges { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.srcrow-sync { margin: 0; }
.srcrow-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.srcrow-actions form { margin: 0; }
.srcmove { display: inline-flex; gap: var(--s-1); }
details.subacc { margin-top: var(--s-4); }
details.subacc > summary { cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--ink); padding: var(--s-2) 0; }
details.subacc > .srclist { margin-top: var(--s-2); }
.addsrc { margin-top: var(--s-5); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); }
.addsrc > h3, details.acc .addsrc > h3 { margin: 0 0 var(--s-4); font-size: 1rem; }
.addblock + .addblock { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.addblock h4 { margin: 0 0 var(--s-3); font-size: 0.875rem; color: var(--ink); }
.addgrid { display: grid; gap: 0 var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); align-items: start; }
.addgrid .field.color input { width: 4rem; padding: var(--s-1); }
.addblock .actions { margin: var(--s-3) 0 0; }
.dangerzone { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.dangerzone .subhead { margin-top: 0; }
.dangerzone .note { max-width: 70ch; margin: 0 0 var(--s-3); }
.dangerzone form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: 0; }
.stack-cell { display: grid; gap: var(--s-1); justify-items: start; min-width: 0; }
.stack-cell b { color: var(--ink); overflow-wrap: anywhere; }
.stack-cell form { margin: var(--s-1) 0 0; }
.statustable td code { font-size: 0.8125rem; }
.statustable .stack-cell b { overflow-wrap: break-word; }
@media (min-width: 40.0625rem) { .statustable td:nth-child(2) { min-width: 11rem; } }
.enable-done { margin: 0 0 var(--s-4); }
.costsync { margin-top: var(--s-8); }
.costsync .sectionhead h2 { margin: 0; }
@media (max-width: 40rem) {
  .enable-row .btn { width: 100%; }
  .srcrow-actions .btn { min-height: 2.5rem; }
  .addsrc { padding: var(--s-4); }
  .stack-cell { justify-items: end; text-align: right; }
}
.stack-cell form .btn { white-space: nowrap; }

/* ---------- Onderhoud (Fase 5, Taak 14): overzicht, update-run, afbreken ---------- */
.onderhoud-grid { display: grid; gap: var(--s-8); }
.onderhoud-grid > section > .sectionhead { margin-bottom: var(--s-3); }
.onderhoud-grid .acc-body .prompt-card { border-top: 0; padding-top: 0; }
.onderhoud-grid .acc-body .prompt { margin-bottom: 0; }
.onderhoud-grid .acc-body .prompt-meta { margin-bottom: var(--s-2); }
.onderhoud-grid .acc-body .actions { margin-top: var(--s-3); }
@media (max-width: 639px) { .onderhoud-grid .acc-body .actions .btn { flex: 1 1 100%; justify-content: center; } }
.pagehead .actions form { margin: 0; }
@media (max-width: 479px) { .pagehead .actions, .pagehead .actions form, .pagehead .actions .btn { width: 100%; } .pagehead .actions .btn { justify-content: center; } }
/* Runs: the tabel van een run toont ruime cellen; onder 640 px staat elk veld als blok met zijn label erboven. */
.run-host { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); min-width: 0; }
.run-host b { color: var(--ink); overflow-wrap: anywhere; }
.run-why { display: block; margin-top: var(--s-1); overflow-wrap: anywhere; }
.run-table td.stack > .cell { display: grid; gap: var(--s-1); justify-items: start; }
@media (max-width: 639px) {
  .run-table td.stack { display: grid; justify-content: stretch; gap: var(--s-1); text-align: left; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
  .run-table td.stack:last-child { border-bottom: 0; }
  .run-table td.stack::before { margin-bottom: var(--s-1); }
  .run-table tr { padding: var(--s-3) var(--s-4); }
  .run-table tbody tr + tr { border-top: 1px solid var(--line-strong); }
}
/* Trackingopzet op mobiel: compacte stapkaarten. Rij 1 de stap (vet) met rechts de status, rij 2 waar, daaronder de uitleg; de
   kolomlabels vallen weg (de badges en de vette stapnaam zeggen het al; de tabelkop blijft voor schermlezers). Desktop: ongewijzigd. */
@media (max-width: 639px) {
  .setup-steps tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-1) var(--s-3); }
  .setup-steps td, .setup-steps td.stack { display: block; padding: 0; border: 0; text-align: left; }
  .setup-steps td::before, .setup-steps td.stack::before { display: none; }
  .setup-steps td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .setup-steps td:nth-child(3) { grid-column: 2; grid-row: 1; justify-self: end; }
  .setup-steps td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: 0.8125rem; color: var(--muted); }
  .setup-steps td:nth-child(2).blank { display: none; }
  .setup-steps td.stack { grid-column: 1 / -1; padding-top: var(--s-1); }
}
@media (min-width: 640px) { .run-table td.stack { vertical-align: top; min-width: 8rem; } .run-table td.stack:first-child { min-width: 12rem; } }
.run-changes, .run-checks, .run-lines, .run-hostlist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-1); min-width: 0; }
.run-changes li, .run-checks li, .run-lines li { overflow-wrap: anywhere; }
.run-changes .pkg { color: var(--ink); font-weight: 600; }
.run-changes .ver { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.run-checks li { display: grid; gap: var(--s-1); justify-items: start; padding: var(--s-2) 0; border-top: 1px solid var(--line); }
.run-checks li:first-child { border-top: 0; }
.run-lines { padding-left: 0; }
.run-lines li.sub { margin-left: var(--s-4); font-size: 0.8125rem; color: var(--muted); }
.run-lines li.sub::before { content: '· '; }
/* Een genummerde lijst (de stappen van de trackingopzet): de nummers blijven zichtbaar. */
.run-lines.numbered { list-style: decimal; padding-left: var(--s-5); }
.run-lines.numbered li { padding-left: var(--s-1); }
.run-lines.numbered li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
.actions.plan-actions { margin-top: var(--s-5); }
.runlog { margin: var(--s-2) 0 0; padding: var(--s-3); max-height: 16rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s); font-size: 0.8125rem; line-height: 1.45; color: var(--ink); text-align: left; }
.runlog:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.run-next { margin: var(--s-4) 0 0; color: var(--ink); }
.out-scope { margin: 0; }
.run-actions { display: grid; gap: var(--s-6); }
.run-actions section { display: grid; gap: var(--s-3); min-width: 0; padding-top: var(--s-5); border-top: 1px solid var(--line); }
.run-actions section:first-child { padding-top: 0; border-top: 0; }
.run-actions section > * { margin: 0; }
.run-actions h3 { font-size: 1rem; }
.run-actions section.run-live { padding: var(--s-4); border: 2px solid var(--bad); border-radius: var(--radius-s); background: var(--bad-bg); }
.run-live h3 { color: var(--bad); }
.run-live .note { color: var(--text); }
.run-live .row-details { margin-top: 0; }
.run-live .row-details .run-lines { margin-top: var(--s-2); padding: var(--s-3); background: var(--surface); border-radius: var(--radius-s); }
.run-hostlist { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--s-2); }
.run-hostlist li { display: flex; align-items: center; gap: var(--s-2); min-width: 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); }
.run-hostlist li b { color: var(--ink); overflow-wrap: anywhere; }
.run-hostlist .env { flex: none; }
@media (max-width: 479px) { .run-actions .actions, .run-actions .actions form, .run-actions .actions .btn { width: 100%; } .run-actions .actions .btn { justify-content: center; } }
dl.meta .confirm-summary { overflow-wrap: anywhere; }
.pending-item .chipline { margin-top: var(--s-1); }
@media (forced-colors: active) { .runlog, .run-hostlist li, .run-actions section.run-live { border-color: CanvasText; } .run-actions section.run-live { background: Canvas; color: CanvasText; } }

.run-refresh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); }
.run-refresh .note { margin: 0; }
[data-refresh-toggle][hidden] { display: none; }
@media (max-width: 479px) { .run-refresh .actions, .run-refresh .actions .btn { width: 100%; } .run-refresh .actions .btn { justify-content: center; } }
.card.pad > h2 + .run-actions { margin-top: var(--s-4); }

/* ---------- Audit-bevindingen en site-hub Updates/Plugins (Fase 5, Taak 15) ---------- */
#audit-filters { align-items: flex-end; gap: var(--s-3) var(--s-4); }
#audit-filters .fl { flex: 0 1 11rem; }
#audit-filters .fl.client { flex: 1 1 13rem; }
#audit-filters .fl.search { flex: 1 1 14rem; }
#audit-filters .actions { flex: none; }
.fl.check, .field.check { display: flex; align-items: center; gap: var(--s-2); font-weight: 500; min-height: 2.75rem; }
.fl.check { flex: 0 0 auto; }
.fl.check input, .field.check input { flex: none; width: 1.125rem; height: 1.125rem; min-height: 0; margin: 0; accent-color: var(--ink); }
.field.check > span { font-size: 0.875rem; font-weight: 500; }
@media (max-width: 1023px) { #audit-filters .fl { flex: 1 1 9rem; } #audit-filters .fl.search { flex-basis: 100%; } }
@media (max-width: 639px) {
  #audit-filters { padding: var(--s-4); }
  #audit-filters .fl { flex: 1 1 calc(50% - var(--s-2)); }
  #audit-filters .fl.client, #audit-filters .fl.check { flex-basis: 100%; }
}
.finding { overflow-wrap: anywhere; color: var(--ink); }
.audit-table .snooze { margin-top: 0; }
.audit-table .snooze form { display: grid; gap: var(--s-2); min-width: min(100%, 16rem); margin-top: var(--s-2); }
.audit-table .snooze .field { margin: 0; }
.audit-table .snooze textarea { min-height: 4.5rem; }
.audit-table .snooze .actions { margin: 0; }
@media (max-width: 639px) {
  .audit-table.run-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-2) var(--s-3); }
  .audit-table.run-table td.stack { display: block; padding: 0; border: 0; }
  .audit-table.run-table td.stack::before { display: none; }
  .audit-table.run-table td:nth-child(1), .audit-table.run-table td:nth-child(4), .audit-table.run-table td:nth-child(6) { grid-column: 1 / -1; }
  .audit-table.run-table td:nth-child(5) { grid-column: 1 / -1; color: var(--muted); font-size: 0.8125rem; }
  .audit-table.run-table td:nth-child(5)::before { display: inline; content: 'Sinds '; text-transform: none; letter-spacing: 0; font-weight: 500; }
  .audit-table.run-table td:nth-child(6) { padding-top: var(--s-1); }
}
.attribution { margin: 0; }
.attribution-list { margin: var(--s-2) 0 0; padding-left: var(--s-5); color: var(--muted); font-size: 0.8125rem; display: grid; gap: var(--s-1); }
.attribution-list li { overflow-wrap: anywhere; }

.repo-block { min-width: 0; margin: 0 0 var(--s-5); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); }
.repo-block legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); padding: 0 var(--s-2); font-size: 0.9375rem; }
.repo-block legend b { color: var(--ink); overflow-wrap: anywhere; }
.repo-block > .chipline { margin: 0 0 var(--s-3); }
.repo-block > .chipline .note { margin: 0; }
.repo-grid { display: grid; gap: 0 var(--s-4); grid-template-columns: minmax(0, 1fr); }
.repo-grid .field { margin-bottom: var(--s-3); min-width: 0; align-content: start; }
.repo-grid .field-error { margin: calc(-1 * var(--s-2)) 0 var(--s-3); }
@media (min-width: 640px) { .repo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .repo-grid .field.remote, .repo-grid .field.path { grid-column: 1 / -1; } .repo-grid .field.owner { grid-column: span 1; } }
.repo-block .field.check { margin: var(--s-1) 0 0; }
.repo-wipe { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.repo-wipe form { margin: 0; }
@media (max-width: 479px) { .repo-wipe form, .repo-wipe .btn { width: 100%; } .repo-wipe .btn { justify-content: center; } }
.card.pad .actions form { margin: 0; }
.pkg-meta { margin: 0 0 var(--s-3); }
.pkg-table .pkg, .plugin-table .ver, .pkg-table .ver { font-variant-numeric: tabular-nums; }
.pkg-table .pkg { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.pkg-more { margin-top: var(--s-3); }
.pkg-more .table-wrap { margin-top: var(--s-2); }
@media (max-width: 639px) {
  .pkg-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--s-3); padding: var(--s-3) var(--s-4); }
  .pkg-table td { display: block; padding: 0; text-align: left; }
  .pkg-table td::before { display: none; }
  .pkg-table td:nth-child(1) { grid-column: 1 / -1; }
  .pkg-table td:nth-child(3) { text-align: right; color: var(--muted); font-size: 0.8125rem; }
}
.plugin-vulns { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.plugin-vulns li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); overflow-wrap: anywhere; }
.plugin-table td.stack > .cell { justify-items: start; }
.card > .pad > h2 + .note { margin-top: 0; }
.card > .pad > :last-child { margin-bottom: 0; }
@media (min-width: 640px) { .pkg-table td { padding-block: var(--s-2); } .pkg-table th { padding-block: var(--s-2); } }
.field .field-error { margin: 0; }
@media (max-width: 639px) {
  .plugin-table.run-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-2) var(--s-3); }
  .plugin-table.run-table td.stack { display: block; padding: 0; border: 0; }
  .plugin-table.run-table td.stack::before { display: none; }
  .plugin-table.run-table td:nth-child(1), .plugin-table.run-table td:nth-child(4) { grid-column: 1 / -1; }
  .plugin-table.run-table td:nth-child(3) { text-align: right; }
  .plugin-table.run-table td:nth-child(2) { color: var(--muted); font-size: 0.875rem; }
}

/* Taak 16 UX: long remote hints in the repo blocks wrap at 375 px. */
.repo-grid small, .repo-grid input { overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.repo-block .live-note { margin: var(--s-2) 0 var(--s-3); }

/* Solid danger fill for the final LIVE go-button (fix round 1, Minor 8): a deep red with white text in both themes. */
:root { --danger-fill: #b3261e; --danger-fill-hover: #8f1d17; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --danger-fill: #c62828; --danger-fill-hover: #e0393a; } }
:root[data-theme='dark'] { --danger-fill: #c62828; --danger-fill-hover: #e0393a; }
@media (forced-colors: active) { .confirm-run.is-live .actions .btn.danger { border: 2px solid ButtonText; } }
/* ---------- Uitrol (/portaal/sites/rollout): voortgangskaarten, golven, nog te doen ---------- */
.rcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.rcard-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.rcard-head h2 { font-size: 1.0625rem; }
.rcard-big { margin: 0 0 var(--s-3); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); color: var(--muted); }
.rcard-big b { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
progress.rbar { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 0.625rem; border: 0; border-radius: 999px; overflow: hidden; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ok); }
progress.rbar::-webkit-progress-bar { background: var(--surface-2); }
progress.rbar::-webkit-progress-value { background: var(--ok); border-radius: 999px; }
progress.rbar::-moz-progress-bar { background: var(--ok); border-radius: 999px; }
.rstats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); margin: var(--s-4) 0 0; }
.rstats div { min-width: 0; }
.rstats dt { font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.rstats dd { margin: var(--s-1) 0 0; font-size: 1.125rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.rcard .note { margin: var(--s-4) 0 0; }
.rhead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3) var(--s-4); }
.rhead h2 { font-size: 1.125rem; }
.rhead .note { margin: var(--s-1) 0 0; max-width: 62ch; }
.rhead:not(:has(> div)) { display: block; }
.rhead:not(:has(> div)) .note { margin-top: var(--s-1); }
.wave-list { border-top: 1px solid var(--line); }
details.wave { border-bottom: 1px solid var(--line); }
details.wave:last-child { border-bottom: 0; }
details.wave > summary { list-style: none; cursor: pointer; display: grid; gap: var(--s-2) var(--s-4); padding: var(--s-4) var(--s-6); align-items: center; position: relative; padding-right: var(--s-12); }
details.wave > summary::-webkit-details-marker { display: none; }
details.wave > summary::after { content: ''; position: absolute; right: var(--s-6); top: 50%; width: 0.5rem; height: 0.5rem; margin-top: -0.375rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform var(--ease); }
details.wave[open] > summary::after { transform: rotate(-135deg); margin-top: -0.125rem; }
details.wave > summary:hover { background: var(--surface-2); }
details.wave > summary:focus-visible { outline-offset: -2px; }
.w-label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; }
.w-label b { color: var(--ink); overflow-wrap: anywhere; }
.w-when { font-size: 0.875rem; color: var(--text); }
.w-counts { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
@media (min-width: 900px) { details.wave > summary { grid-template-columns: minmax(12rem, 1.2fr) minmax(10rem, 1fr) minmax(0, 2fr); } }
.wave-body { padding: 0 var(--s-6) var(--s-5); }
.wave-body .note { margin: var(--s-3) 0 0; }
.table-wrap.w-report { border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.w-reason { overflow-wrap: anywhere; color: var(--text); max-width: 46rem; }
@media (min-width: 640px) { .table-wrap.w-report th { text-align: left; padding: var(--s-3) var(--s-5); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border-bottom: 1px solid var(--line); } .table-wrap.w-report td { vertical-align: top; } }
.wave-body .table-wrap tr { background: transparent; }
#rollout-filters { border-top: 1px solid var(--line); }
.card > .results { margin: 0; padding: var(--s-3) var(--s-6) var(--s-2); }
.sortpick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-6) var(--s-3); }
.sortpick .note { margin-right: var(--s-1); }
.sortpick .btn.selected { border-color: var(--ink); background: var(--surface-2); }
@media (min-width: 640px) { .sortpick { display: none; } }
.table-wrap.todo th { text-align: left; padding: var(--s-3) var(--s-5); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table-wrap.todo th[aria-sort] { color: var(--ink); }
.table-wrap.todo .site { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.table-wrap.todo td .cell { overflow-wrap: anywhere; }
.sortlink { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: var(--s-1); border-radius: var(--radius-2xs); }
.sortlink:hover { color: var(--ink); text-decoration: underline; }
.sortmark { display: inline-block; min-width: 0.75em; }
.rwb { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); }
.rwb h2 { font-size: 1.125rem; }
.rwb .note { margin: var(--s-1) 0 0; }
.rwb-hint { margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--radius-s); background: var(--surface-2); border: 1px solid var(--line); }
.rwb-hint code { overflow-wrap: anywhere; font-weight: 600; color: var(--ink); }
@media (max-width: 639px) {
  details.wave > summary { padding-inline: var(--s-4) var(--s-12); }
  details.wave > summary::after { right: var(--s-4); }
  .wave-body { padding-inline: var(--s-4); }
  .card > .results { padding-inline: var(--s-4); }
  .sortpick { padding-inline: var(--s-4); }
  .rhead .btn { width: 100%; }
}
@media (forced-colors: active) {
  progress.rbar { appearance: auto; -webkit-appearance: auto; border: 1px solid CanvasText; background: Canvas; color: Highlight; box-shadow: none; }
  progress.rbar::-webkit-progress-bar { background: Canvas; }
  progress.rbar::-webkit-progress-value { background: Highlight; }
  progress.rbar::-moz-progress-bar { background: Highlight; }
  details.wave > summary::after { border-color: CanvasText; }
}
@media (max-width: 639px) {
  #rollout-filters .fl { flex: 1 1 calc(50% - var(--s-2)); }
  #rollout-filters .fl.search { flex-basis: 100%; }
}
.rcard.empty { background: transparent; box-shadow: none; border-style: dashed; text-align: left; align-self: start; }
.rcard.empty .rcard-head { margin-bottom: var(--s-2); }
.rcard.empty .note { margin: 0; }
@media (max-width: 639px) {
  #rollout-filters .fl.reason { flex-basis: 100%; }
  /* Compact to-do cards: the project name is noise next to host and klant (it stays in the CSV). */
  .table-wrap.todo tr { padding: var(--s-3) var(--s-4); }
  .table-wrap.todo td { padding: 0; }
  .table-wrap.todo td[data-label='Project'] { display: none; }
  .table-wrap.todo td[data-label='Host'] { padding-bottom: var(--s-1); }
  .table-wrap.todo td[data-label='Host'] .cell { text-align: left; }
}

/* 0.8.0 automatic repo detection: a calm running notice, where each prefilled value came from, the bulk progress. */
.notice.detect { align-items: flex-start; }
.notice.detect > span { min-width: 0; overflow-wrap: anywhere; }
.notice.detect.running { background: var(--info-bg); color: var(--info); }
.detect-dot { flex: none; width: 0.625rem; height: 0.625rem; margin-top: 0.3rem; border-radius: 50%; background: currentColor; animation: detect-pulse 1.6s var(--ease) infinite; }
@keyframes detect-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.detect-note { margin: 0 0 var(--gap); }
.detect-note .notice { margin-bottom: 0; }
.detect-note .run-refresh { margin-top: var(--s-2); }
.repo-grid .field-src { display: inline-flex; align-items: center; gap: var(--s-1); justify-self: start; padding: 0 var(--s-2); border-radius: var(--radius-xs); background: var(--info-bg); color: var(--info); font-size: 0.75rem; font-weight: 600; line-height: 1.6; }
.sectionhead > .actions form { margin: 0; }
.keyhost-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.keyhost-list code { display: inline-block; padding: var(--s-1) var(--s-2); border-radius: var(--radius-xs); background: var(--surface-2); border: 1px solid var(--line); overflow-wrap: anywhere; }
.detect-table td:nth-child(3) { color: var(--muted); font-size: 0.875rem; overflow-wrap: anywhere; }
@media (max-width: 639px) {
  .detect-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); padding: var(--s-3) var(--s-4); }
  .detect-table td { display: block; padding: 0; text-align: left; }
  .detect-table td::before { display: none; }
  .detect-table td:nth-child(1) { overflow-wrap: anywhere; font-weight: 600; }
  .detect-table td:nth-child(3) { grid-column: 1 / -1; }
}
.pagehead .actions form { margin: 0; }

/* ---------- Projectschakelaars (Modules): Leads en Onderhoud ---------- */
.modules h2 { margin-bottom: var(--s-3); }
.module-list { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; }
.module { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.module:last-child { border-bottom: 0; }
.module-main { min-width: 0; }
.module-main h3 { font-size: 1rem; margin-bottom: var(--s-1); }
.module-main .note { margin: 0; }
.module-note { margin: var(--s-2) 0 0; font-size: 0.8125rem; color: var(--warn); font-weight: 600; }
.module-control { flex: none; display: grid; justify-items: end; gap: var(--s-2); }
.module-control form { margin: 0; }
.modules > .notice { margin-bottom: var(--s-3); }
.switch { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; padding: 0 var(--s-1); border: 0; border-radius: var(--radius-s); background: none; color: var(--ink); font: 600 0.875rem/1 var(--font); cursor: pointer; }
.switch-track { position: relative; display: inline-block; width: 2.75rem; height: 1.5rem; border-radius: 999px; background: var(--line-strong); transition: background-color var(--ease); }
.switch-knob { position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); transition: transform var(--ease); }
.switch[aria-checked='true'] .switch-track { background: var(--ok); }
.switch[aria-checked='true'] .switch-knob { transform: translateX(1.25rem); }
.switch-text { min-width: 1.75rem; text-align: left; }
.switch:hover .switch-track { box-shadow: inset 0 0 0 2px var(--ink); }
.switch:disabled { cursor: not-allowed; opacity: 0.55; }
.switch:disabled:hover .switch-track { box-shadow: none; }
.stop-list { margin: 0 0 var(--s-4); padding-left: var(--s-5); display: grid; gap: var(--s-2); }
@media (prefers-reduced-motion: reduce) { .switch-track, .switch-knob { transition: none; } }
@media (forced-colors: active) {
  .switch-track { border: 1px solid CanvasText; background: Canvas; }
  .switch-knob { background: CanvasText; }
  .switch[aria-checked='true'] .switch-track { background: Highlight; }
  .switch[aria-checked='true'] .switch-knob { background: HighlightText; }
}
@media (max-width: 479px) { .module { flex-direction: column; gap: var(--s-2); } .module-control { justify-items: start; } }

/* Inhoud-tab (Fase 7): tabs, thumbnails, opdrachtenlade per rij, menuboom */
.tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.tabs a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0.25rem var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-m); color: var(--text); text-decoration: none; font-weight: 600; }
.tabs a:hover { background: var(--surface); color: var(--ink); }
.tabs a[aria-current='page'] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.media-thumb { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-xs); background: var(--surface-2); }
.row-actions { margin-top: var(--s-2); }
.row-actions summary { cursor: pointer; font-weight: 600; }
.item-action { display: grid; gap: var(--s-1); margin-top: var(--s-3); }
.item-action-t { font-size: 0.8125rem; color: var(--muted); }
.menu-tree ul { margin: var(--s-1) 0 0; padding-left: var(--s-5); }
.menu-block + .menu-block { border-top: 1px solid var(--line); }
@media (forced-colors: active) { .tabs a[aria-current='page'] { forced-color-adjust: none; background: Highlight; color: HighlightText; } }
/* ---------- Keywords (Fase 8): overzicht en projectpagina ---------- */
/* Zoekvelden werken enkel met JS (het filteren gebeurt in de browser): zonder JS zijn ze er niet. */
.kw-jsonly { display: none; }
.js .fl.kw-jsonly { display: grid; }
.js form.kw-jsonly { display: flex; }
.kw-search.filters, .kwfilters.filters { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: var(--gap); box-shadow: var(--shadow); }
.kw-search .fl.search { flex: 1 1 22rem; max-width: 36rem; }
.kwfilters { align-items: flex-end; }
.kwfilters .fl.search { flex: 2 1 16rem; }
#kw-resultaten > .results { margin: 0 0 var(--s-3); padding: 0; color: var(--muted); font-size: 0.875rem; }
.kw-accent { display: block; width: 100%; height: 0.25rem; border-radius: 2px; }
.kw-title { color: var(--ink); text-decoration: none; }
.kw-title:hover { text-decoration: underline; }
.kwstats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.kw-nodata { padding: var(--s-4) 0; }
.kwcard .actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.kpis.seven { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .kpis.seven { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .kpis.seven { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.kpi.ok .v { color: var(--ok); }
.kwtable { padding: 0; overflow: hidden; }
.kwtable .kw-rowcount { margin: 0; padding: var(--s-4) var(--s-5) var(--s-2); color: var(--muted); font-size: 0.875rem; }
.kw-scroll { overflow-x: auto; }
.kw-table { width: 100%; min-width: 56rem; border-collapse: collapse; font-size: 0.875rem; }
.kw-table th { text-align: left; font-size: 0.75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); white-space: nowrap; }
.kw-table td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.kw-table tbody tr:last-child td { border-bottom: 0; }
.kw-table tbody tr:hover { background: var(--surface-2); }
.kw-table td.num, .kw-table th[data-kw-sort='traffic'], .kw-table th[data-kw-sort='volume'], .kw-table th[data-kw-sort='keyword_difficulty'] { text-align: right; font-variant-numeric: tabular-nums; }
.kw-table td strong { color: var(--ink); overflow-wrap: anywhere; }
.kw-table .tag { margin: 0 var(--s-1) var(--s-1) 0; }
.kw-sort { display: inline-flex; align-items: center; gap: var(--s-2); font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: var(--s-1) 0; min-height: 2rem; cursor: pointer; }
.kw-sort:hover { color: var(--ink); }
.kw-table th[aria-sort='ascending'] .kw-sort, .kw-table th[aria-sort='descending'] .kw-sort { color: var(--ink); }
.kw-table th[aria-sort='ascending'] .kw-sort::after, .kw-table th[aria-sort='descending'] .kw-sort::after { content: ''; border-left: 0.3rem solid transparent; border-right: 0.3rem solid transparent; }
.kw-table th[aria-sort='ascending'] .kw-sort::after { border-bottom: 0.4rem solid currentcolor; }
.kw-table th[aria-sort='descending'] .kw-sort::after { border-top: 0.4rem solid currentcolor; }
.pos { display: inline-flex; justify-content: center; min-width: 2rem; padding: 0.125rem var(--s-2); border-radius: 999px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.pos.top3 { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.pos.top10 { background: var(--info-bg); color: var(--info); border-color: transparent; }
.pos.top20 { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.pos.low { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.trend.trend-up { color: var(--ok); font-weight: 600; }
.trend.trend-down { color: var(--bad); font-weight: 600; }
.trend.trend-none { color: var(--muted); }
.kw-url { color: var(--info); font-weight: 700; text-decoration: none; padding: var(--s-2); }
.kw-url:hover { text-decoration: underline; }
@media (forced-colors: active) { .pos { border: 1px solid CanvasText; } }
/* Position distribution, dark theme: top 3 and top 10 a lighter shade of the old colours (3:1 on the dark card; POSITION_COLORS_DARK). */
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .bar.kwpos-top3 { fill: #15937A; } :root:not([data-theme='light']) .bar.kwpos-top10 { fill: #3A86D6; } }
:root[data-theme='dark'] .bar.kwpos-top3 { fill: #15937A; }
:root[data-theme='dark'] .bar.kwpos-top10 { fill: #3A86D6; }
/* Smaller tables need less width: history (4 columns) fits a phone, competitors (5) scroll only a little. */
.kw-table.kw-history { min-width: 0; }
.kw-table.kw-competitors { min-width: 34rem; }
/* Phone and tablet: the first column (keyword, domain, date) stays in view while the table scrolls sideways, so a row of the
   500-row table can still be read next to its traffic or volume. */
@media (max-width: 1023px) {
  .kw-table th:first-child, .kw-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: inset -1px 0 0 var(--line); }
  .kw-table tbody tr:hover td:first-child { background: var(--surface-2); }
  .kw-table td:first-child { min-width: 8rem; max-width: 11rem; }
  .kw-table.kw-history td:first-child { min-width: 0; white-space: nowrap; }
}

/* ---------- Keywords (Fase 8, B12): Keywordprojecten (beheer) ---------- */
.kwadmin { margin-bottom: var(--gap); }
.kwadmin > h2 .count { font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
.kwadmin-list { list-style: none; margin: 0 0 var(--gap); padding: 0; display: grid; gap: var(--s-3); }
.kwadmin-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-3); }
.kwadmin-head h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.kwadmin-head .btn { margin-left: auto; }
.kwadmin-grid { display: grid; gap: 0 var(--s-4); grid-template-columns: minmax(0, 1fr); }
.kwadmin-grid .field > label { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.kwadmin-grid textarea.input { min-height: 2.75rem; }
.kwadmin-color input[type='color'] { width: 5rem; padding: 0.25rem; cursor: pointer; }
.kwadmin-active { align-self: end; margin-bottom: var(--s-4); }
.kw-suggest { color: var(--ink); }
.kwadmin-row .actions { display: flex; justify-content: flex-end; }
@media (min-width: 720px) {
  .kwadmin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kwadmin-project { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .kwadmin-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) 6rem minmax(0, 1.4fr); }
  .kwadmin-notes { grid-column: 1 / 3; }
  .kwadmin-project { grid-column: 3 / -1; }
}
.kw-confirm { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }

/* 0.12.1: the window note on a promotion confirmation is running text with host names: a block that wraps, never a flex row. */
.notice.window-note { display: block; overflow-wrap: anywhere; }

/* ---------- Globale zoekfunctie in de kop (portal.js maakt er een combobox van; zonder JS een gewoon GET-formulier) ---------- */
kbd.topsearch-hint { font: inherit; font-size: 0.75rem; font-weight: 600; padding: 0.0625rem 0.375rem; border: 1px solid var(--line-strong); border-radius: var(--radius-2xs); background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.topsearch { position: relative; flex: 1 1 14rem; min-width: 12rem; max-width: 28rem; margin: 0; }
.topsearch .search-wrap input[type='search'] { padding-right: 4.5rem; }
/* De sneltoetshint staat in het veld; zodra er tekst staat neemt het wiskruisje die plaats in. */
.topsearch-hint { position: absolute; top: 50%; right: var(--s-3); translate: 0 -50%; pointer-events: none; }
.topsearch .search-wrap:has(input:not(:placeholder-shown)) .topsearch-hint { display: none; }
.search-pop { position: absolute; z-index: 15; top: calc(100% + var(--s-1)); left: 0; width: max(100%, min(32rem, calc(100vw - 2 * var(--gutter)))); padding: var(--s-1);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-m); box-shadow: 0 2px 4px rgb(0 0 0 / 0.06), 0 16px 36px -12px rgb(0 0 0 / 0.28); font-size: 0.9375rem; font-weight: 400; }
.search-pop .combo-list { max-height: min(30rem, 65vh); }
.search-head { padding: var(--s-2) var(--s-3) var(--s-1); font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.search-head:not(:first-child) { margin-top: var(--s-1); }
.search-all { margin-top: var(--s-1); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-s) var(--radius-s); font-weight: 600; }
.search-all .combo-main { font-weight: 600; }
.combo-main .env { margin-left: var(--s-1); vertical-align: 0.0625rem; }
.search-group { margin-bottom: var(--s-4); }
.search-group h2 { font-size: 1rem; }
.search-group mark { padding: 0 0.0625rem; border-radius: 0.1875rem; background: var(--brand); color: var(--brand-ink); }
/* Tablet: het veld staat links van het midden; de lijst hangt aan de rechterrand van het veld, zodat hij nooit buiten beeld valt. */
@media (min-width: 640px) and (max-width: 1023px) { .search-pop { left: auto; right: 0; width: min(32rem, calc(100vw - 2 * var(--gutter))); } }
@media (max-width: 639px) {
  /* Eigen volle rij onder de logo-regel; de lijst is even breed als het scherm en hangt onder de hele kop. */
  .topbar:has(> .topsearch) { position: relative; }
  .topsearch { position: static; flex: 1 1 100%; max-width: none; min-width: 0; order: 3; }
  .topsearch-hint { display: none; }
  .topsearch .search-wrap input[type='search'] { padding-right: 2.75rem; }
  .search-pop { top: 100%; left: 0; right: 0; width: auto; border-width: 1px 0; border-radius: 0; }
  .search-pop .combo-list { max-height: 70vh; }
}
@media (forced-colors: active) {
  .search-pop { border: 1px solid CanvasText; }
  .topsearch-hint { forced-color-adjust: none; }
  .search-group mark { background: Mark; color: MarkText; }
}
/* ---------- Updates zonder git (Fase 9, G10): method line, available updates, items of a run, no-backup choice ---------- */
.method-line { margin: 0; gap: var(--s-2); }
.method-line > span { color: var(--muted); font-size: 0.875rem; }
.run-table td.stack .chipline { gap: var(--s-1); }
.confirm-nobackup { min-width: 0; margin: 0 0 var(--s-4); padding: var(--s-4); border: 1px solid var(--warn); border-radius: var(--radius-s); background: var(--warn-bg); }
.confirm-nobackup legend { padding: 0 var(--s-2); font-weight: 700; color: var(--ink); }
.confirm-nobackup > .note { margin: 0 0 var(--s-2); color: var(--ink); }
.confirm-nobackup .field.check { margin: 0; }
.confirm-nobackup .field.check b { overflow-wrap: anywhere; }
@media (forced-colors: active) { .confirm-nobackup { border-color: CanvasText; } }
/* One legend under a table of connector items: only the labels that occur. */
.item-legend { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--muted); }
.item-legend li { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); align-items: baseline; }
.confirm-card .actions > form#confirm-go { margin: 0; }
/* A host in an accordion heading breaks at its dots only; on a narrow screen the tag moves below the text. */
details.acc summary .t b.acc-host { overflow-wrap: normal; word-break: normal; }
@media (max-width: 480px) { details.acc summary:has(.tag) { flex-wrap: wrap; } details.acc summary:has(.tag) .t { flex-basis: calc(100% - 2rem); } details.acc summary:has(.tag) .tag { order: 3; } }
.confirm-hostlist li:has(.confirm-optional) { flex-wrap: wrap; }
.confirm-hostlist li .confirm-optional { flex-basis: 100%; margin: 0; }
/* ---------- Leads hub 2.5.0: column tooltip, comparison line, annotations, budgets, reports ---------- */
.chart .colhit { cursor: default; }
.chart .colhit:hover { fill-opacity: 0.05; }
.chart .cmpline { stroke: #5f5e5a; }
.chart .cmpdot { fill: #5f5e5a; }
.chart-legend .cmpline { stroke: #5f5e5a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .chart .cmpline, :root:not([data-theme='light']) .chart-legend .cmpline { stroke: #b4afa6; } :root:not([data-theme='light']) .chart .cmpdot { fill: #b4afa6; } }
:root[data-theme='dark'] .chart .cmpline, :root[data-theme='dark'] .chart-legend .cmpline { stroke: #b4afa6; }
:root[data-theme='dark'] .chart .cmpdot { fill: #b4afa6; }
.compare-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-3); }
.project-insight { margin: var(--s-3) 0; font-size: 0.9375rem; color: var(--ink); }
.budget-years { display: flex; gap: var(--s-2); }
.budgets-table { width: 100%; border-collapse: collapse; }
.budgets-table th, .budgets-table td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.budgets-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.budgets-table tr.is-current th { color: var(--brand-strong); }
.budget-cell { min-width: 10rem; border-left: 3px solid transparent; }
.budget-cell.is-under { border-left-color: var(--ok); background: var(--ok-bg); }
.budget-cell.is-over { border-left-color: var(--bad); background: var(--bad-bg); }
.budget-cell.is-under .budget-status { color: var(--ok); font-weight: 600; }
.budget-cell.is-over .budget-status { color: var(--bad); font-weight: 600; }
.budget-cell.is-pending .budget-status { color: var(--muted); }
.budget-input { display: flex; align-items: center; gap: var(--s-1); }
.budget-input input { width: 100%; min-width: 6rem; font-variant-numeric: tabular-nums; }
.budget-spent { font-size: 0.8125rem; color: var(--text); font-variant-numeric: tabular-nums; }
.budget-status { font-size: 0.8125rem; }
.budgets-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4); }
.budget-unassigned-list { margin-top: var(--s-4); }
.notes-card { margin-top: var(--s-4); }
.notes-card h2 .badge { vertical-align: middle; margin-left: var(--s-2); }
.note-new { margin: var(--s-3) 0; }
.note-new > summary { list-style: none; cursor: pointer; display: inline-flex; }
.note-new > summary::-webkit-details-marker { display: none; }
.note-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-3) 0; }
.note-grid .wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .note-grid { grid-template-columns: 1fr; } }
.note-list { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.note-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.note-item.editing { display: block; }
.note-marker { width: 10px; height: 10px; margin-top: 0.35rem; background: #7b5ea7; border-radius: 2px; }
.note-dates { color: var(--muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.note-body { margin: var(--s-1) 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.note-text strong { overflow-wrap: anywhere; }
.note-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.legend-notes svg rect { fill: #7b5ea7; }
.report-filter { margin: var(--s-3) 0; }
.report-new { margin-bottom: var(--s-4); }
.report-new > summary { cursor: pointer; }
.report-grid { display: grid; grid-template-columns: auto minmax(0, 12rem); gap: var(--s-3); margin: var(--s-3) 0; align-items: end; }
.report-grid .wide { grid-column: 1 / -1; }
.report-grid textarea { width: 100%; min-height: 16rem; }
.report-type { border: 0; padding: 0; margin: 0; }
.report-types { display: flex; gap: var(--s-3); flex-wrap: wrap; }
@media (max-width: 640px) { .report-grid { grid-template-columns: 1fr; } }
.report-list { display: grid; gap: var(--s-3); }
.report-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.report-meta { margin-top: var(--s-3); }
.report-latest { border-left: 3px solid var(--warn); background: var(--warn-bg); padding: var(--s-3); margin-bottom: var(--s-3); }
.badge.report-imom { background: var(--info-bg); color: var(--info); }
.badge.report-marcom { background: var(--ok-bg); color: var(--ok); }
/* ---------- Globale zoekfunctie in de kop (portal.js maakt er een combobox van; zonder JS een gewoon GET-formulier) ---------- */
kbd.topsearch-hint { font: inherit; font-size: 0.75rem; font-weight: 600; padding: 0.0625rem 0.375rem; border: 1px solid var(--line-strong); border-radius: var(--radius-2xs); background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.topsearch { position: relative; flex: 1 1 14rem; min-width: 12rem; max-width: 28rem; margin: 0; }
.topsearch .search-wrap input[type='search'] { padding-right: 4.5rem; }
/* De sneltoetshint staat in het veld; zodra er tekst staat neemt het wiskruisje die plaats in. */
.topsearch-hint { position: absolute; top: 50%; right: var(--s-3); translate: 0 -50%; pointer-events: none; }
.topsearch .search-wrap:has(input:not(:placeholder-shown)) .topsearch-hint { display: none; }
.search-pop { position: absolute; z-index: 15; top: calc(100% + var(--s-1)); left: 0; width: max(100%, min(32rem, calc(100vw - 2 * var(--gutter)))); padding: var(--s-1);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-m); box-shadow: 0 2px 4px rgb(0 0 0 / 0.06), 0 16px 36px -12px rgb(0 0 0 / 0.28); font-size: 0.9375rem; font-weight: 400; }
.search-pop .combo-list { max-height: min(30rem, 65vh); }
.search-head { padding: var(--s-2) var(--s-3) var(--s-1); font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.search-head:not(:first-child) { margin-top: var(--s-1); }
.search-all { margin-top: var(--s-1); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-s) var(--radius-s); font-weight: 600; }
.search-all .combo-main { font-weight: 600; }
.combo-main .env { margin-left: var(--s-1); vertical-align: 0.0625rem; }
.search-group { margin-bottom: var(--s-4); }
.search-group h2 { font-size: 1rem; }
.search-group mark { padding: 0 0.0625rem; border-radius: 0.1875rem; background: var(--brand); color: var(--brand-ink); }
/* Tablet: het veld staat links van het midden; de lijst hangt aan de rechterrand van het veld, zodat hij nooit buiten beeld valt. */
@media (min-width: 640px) and (max-width: 1023px) { .search-pop { left: auto; right: 0; width: min(32rem, calc(100vw - 2 * var(--gutter))); } }
@media (max-width: 639px) {
  /* Eigen volle rij onder de logo-regel; de lijst is even breed als het scherm en hangt onder de hele kop. */
  .topbar:has(> .topsearch) { position: relative; }
  .topsearch { position: static; flex: 1 1 100%; max-width: none; min-width: 0; order: 3; }
  .topsearch-hint { display: none; }
  .topsearch .search-wrap input[type='search'] { padding-right: 2.75rem; }
  .search-pop { top: 100%; left: 0; right: 0; width: auto; border-width: 1px 0; border-radius: 0; }
  .search-pop .combo-list { max-height: 70vh; }
}
@media (forced-colors: active) {
  .search-pop { border: 1px solid CanvasText; }
  .topsearch-hint { forced-color-adjust: none; }
  .search-group mark { background: Mark; color: MarkText; }
}

/* Leads main chart, hub 2.5.0 parity (gateway 0.17.1): the red goal line "goal N/day", the legend above the plot and
   "---- Vorige periode (…)" under it, the "✎ Doel" pill next to the title and the column tooltip box (portal.js). */
.chart-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); min-width: 0; }
.chart-title h2 { margin: 0; }
.chart .goal-hub, .chart-legend .goal-hub { stroke: #e24b4a; }
.chart-hub > .chart-legend:first-child { margin: 0 0 var(--s-3); }
/* Text colour of "goal N/day": the old #E24B4A darkened (light) or lightened (dark) for contrast; print is always light (--goal-text in the print block). */
:root { --goal-text: #b8312f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --goal-text: #ff8582; } }
:root[data-theme='dark'] { --goal-text: #ff8582; }
.chart-legend .legend-goal span { color: var(--goal-text); }
.chart-legend.legend-below { margin-top: var(--s-2); color: var(--muted); }
.chart-title .goal-edit { position: relative; }
.chart-title .goal-pill { min-height: 1.75rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.chart-title .goal-pill:hover, .chart-title .goal-pill:focus-visible { color: var(--ink); }
.chart-title .goal-pencil { font-size: 1rem; line-height: 1; }
.chart-title .goal-edit > form { position: static; display: inline-flex; align-items: center; gap: var(--s-2); width: auto; margin-top: var(--s-2); padding: 0; background: none; border: 0; box-shadow: none; }
.js .chart-title .goal-edit[open] > summary { display: none; }
.js .chart-title .goal-edit > form { margin-top: 0; }
.chart-title .goal-edit input[type=number] { width: 5.5rem; min-height: 2rem; padding: 0 var(--s-2); font-variant-numeric: tabular-nums; }
.chart.has-coltips .chart-svg:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: var(--radius-xs); }
.chart .colhit.is-active { fill-opacity: 0.06; }
.coltip { position: absolute; z-index: 20; top: 0; left: 0; max-width: min(18rem, calc(100% - 1rem)); padding: var(--s-2) var(--s-3); background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-s); box-shadow: var(--shadow); font-size: 0.8125rem; line-height: 1.45; pointer-events: none; font-variant-numeric: tabular-nums; }
.coltip[hidden] { display: none; }
.coltip p, .coltip ul { margin: 0; padding: 0; list-style: none; }
.coltip .coltip-t { font-weight: 600; color: var(--ink); margin-bottom: var(--s-1); }
.coltip li { display: flex; align-items: center; gap: var(--s-2); overflow-wrap: anywhere; }
.coltip .sw { flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--muted); }
.coltip .coltip-f { margin-top: var(--s-1); padding-top: var(--s-1); border-top: 1px solid var(--line); }
.coltip .coltip-f p:first-child { font-weight: 600; color: var(--ink); }
.coltip .coltip-n { margin-top: var(--s-1); color: var(--muted); }

/* Site-hub: "Schrijven uit" uitgelegd onder de chips; "Opnieuw koppelen" na een sleutelprobleem */
.hub-writes-note { font-size: 0.8125rem; line-height: 1.45; }
.hub-writes-note a { font-weight: 600; white-space: nowrap; }
.dash dd > form { margin-top: var(--s-1); }
.relink { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.relink h3 { margin: 0 0 var(--s-2); font-size: 1rem; }
.relink ol { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--s-3); }
.relink li { padding-left: var(--s-1); overflow-wrap: break-word; }
.relink li b { color: var(--ink); }
.relink code { font-size: 0.8125rem; white-space: nowrap; }
.relink code.long { white-space: normal; overflow-wrap: anywhere; }
.relink > .note { margin: var(--s-3) 0 0; }

/* ---------- Meldingencentrum (Fase 10a): bel en paneel, pagina Meldingen, Services ---------- */
.bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color var(--ease); anchor-name: --sc-bell; }
.bell:hover { border-color: var(--ink); }
.bell-count { position: absolute; top: -0.4rem; right: -0.4rem; display: grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.25rem; border-radius: 999px; border: 1px solid var(--bad); background: var(--bad-bg); color: var(--bad); font-size: 0.6875rem; font-weight: 700; line-height: 1; }
.bell-dot { position: absolute; top: 0.2rem; right: 0.2rem; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--info); border: 2px solid var(--surface); }
.bell-wrap { display: inline-flex; }
.bell-panel { position: fixed; inset: auto var(--gutter) auto auto; top: 4.5rem; margin: 0; width: min(26rem, calc(100vw - 2 * var(--gutter))); max-height: min(36rem, calc(100dvh - 6rem)); overflow: auto; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
@supports (top: anchor(bottom)) { .bell-panel { position-anchor: --sc-bell; top: calc(anchor(bottom) + var(--s-2)); } }
@media (max-width: 479px) { .bell-panel { inset: auto 0 auto 0; top: 8rem; width: auto; max-height: calc(100dvh - 9rem); border-radius: 0 0 var(--radius) var(--radius); } @supports (top: anchor(bottom)) { .bell-panel { top: calc(anchor(bottom) + var(--s-2)); } } }
.bell-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
.bell-top h2 { font-size: 1rem; }
.bell-top form { margin: 0; }
.bell-list { list-style: none; margin: 0; padding: 0; }
.bell-row { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.bell-row.unread { background: var(--surface-2); }
.bell-row p { margin: 0; }
.bell-title { margin-top: var(--s-1) !important; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.bell-meta { font-size: 0.8125rem; color: var(--muted); overflow-wrap: anywhere; }
.bell-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-2); }
.bell-empty { margin: 0; padding: var(--s-6) var(--s-4); color: var(--muted); }
.bell-foot { margin: 0; padding: var(--s-3) var(--s-4); font-size: 0.875rem; }
.sev { display: inline-flex; align-items: center; gap: var(--s-1); font-size: 0.75rem; font-weight: 700; border-radius: 999px; padding: 0.1875rem var(--s-3); }
.sev.bad { background: var(--bad-bg); color: var(--bad); }
.sev.info { background: var(--info-bg); color: var(--info); }
.alert-handle { display: block; }
.alert-handle > summary { list-style: none; }
.alert-handle > summary::-webkit-details-marker { display: none; }
.alert-handle[open] { flex: 1 1 100%; }
.alert-handle form { display: grid; gap: var(--s-2); margin: var(--s-2) 0 0; }
.alert-handle .field { display: grid; gap: var(--s-1); font-size: 0.8125rem; }
.alert-handle input[type='text'] { font: inherit; width: 100%; padding: var(--s-2) var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); }
@media (forced-colors: active) { .bell, .bell-panel, .bell-count { border: 1px solid CanvasText; } }
/* Pagina Meldingen */
.alert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.alert-card { padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-2); }
.alert-card h2 { font-size: 1.0625rem; overflow-wrap: anywhere; }
.alert-card p { margin: 0; overflow-wrap: anywhere; }
.alert-card .alert-body { white-space: pre-wrap; }
.alert-card .alert-facts { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: 0.8125rem; color: var(--muted); }
.alert-card .alert-status { font-weight: 600; color: var(--ink); }
.alert-card .alert-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: flex-start; }
/* Services (hub dashboard) */
.services { list-style: none; margin: 0 0 var(--gap); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: var(--s-3); }
.svc { display: grid; gap: var(--s-1); height: 100%; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-top: 4px solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface); color: var(--text); text-decoration: none; }
a.svc:hover { border-color: var(--ink); }
.svc-l { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.svc-t { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.svc.ok { border-top-color: var(--ok); } .svc.ok .svc-t { color: var(--ok); }
.svc.warn { border-top-color: var(--warn); } .svc.warn .svc-t { color: var(--warn); }
.svc.bad { border-top-color: var(--bad); } .svc.bad .svc-t { color: var(--bad); }
.svc.none .svc-t { color: var(--muted); }
.svc-cell { display: inline-flex; align-items: center; gap: var(--s-1); font-size: 0.8125rem; font-weight: 600; }
.svc-cell.ok { color: var(--ok); } .svc-cell.warn { color: var(--warn); } .svc-cell.bad { color: var(--bad); } .svc-cell.none { color: var(--muted); }
@media (forced-colors: active) { .svc { border: 1px solid CanvasText; border-top-width: 4px; } }
.alert-filters { gap: var(--s-3); }
.alert-filters .fl { flex: 1 1 8.5rem; }
.alert-filters .input { min-width: 0; width: 100%; }
@media (max-width: 639px) { .alert-filters { padding: var(--s-4); } .alert-filters .fl { flex: 1 1 calc(50% - var(--s-2)); } }
.svc-wrap { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0 var(--s-2); }
@media (min-width: 640px) { .svc-wrap { flex-direction: column; align-items: flex-start; justify-content: flex-start; } }

/* ---------- DNS-geschiedenis (Fase 10b) ---------- */
.dns-head .meta { margin-top: var(--s-3); }
.dns-limits { max-width: 60rem; }
.dns-timeline, .dns-diff, .dns-watch, .dns-inactive { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.dns-change { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-s); min-width: 0; }
.dns-change-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-weight: 600; }
.dns-diff { gap: var(--s-2); }
.dns-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); min-width: 0; overflow-wrap: anywhere; }
.dns-tag { display: inline-block; flex: none; padding: 0.125rem var(--s-2); border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.dns-tag.add { background: var(--ok-bg); color: var(--ok); }
.dns-tag.rem { background: var(--bad-bg); color: var(--bad); }
.dns-tag.chg { background: var(--info-bg); color: var(--info); }
.dns-old, .dns-new { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.dns-rec { min-width: 0; max-width: 100%; overflow-wrap: anywhere; white-space: pre-wrap; background: var(--surface-2); border-radius: var(--radius-s); padding: 0.125rem var(--s-2); }
.dns-full { flex: 1 1 100%; }
.dns-full summary { cursor: pointer; font-size: 0.8125rem; }
.dns-full .dns-rec { display: block; margin-top: var(--s-2); }
.dns-announced, .dns-reviewed { margin: 0; }
.dns-announce-now { margin: 0 0 var(--s-2); overflow-wrap: anywhere; }
.dns-review summary { display: inline-block; }
.dns-watch-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-width: 0; overflow-wrap: anywhere; }
.dns-watch-item .actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-left: auto; }
.dns-records td code { overflow-wrap: anywhere; white-space: pre-wrap; }
.muted-row { color: var(--muted); }
.dns-full > summary { min-height: 2.75rem; display: list-item; padding-top: var(--s-2); }
@media (forced-colors: active) { .dns-change, .dns-tag { border: 1px solid CanvasText; } }
.dns-sec form { display: grid; gap: var(--s-3); justify-items: start; margin-top: var(--s-3); }
.dns-sec .field { width: 100%; max-width: 40rem; }
.dns-sec .field input[type='text'] { width: 100%; }
.dns-sec h3 { margin: var(--s-6) 0 var(--s-1); }
.dns-sec h3:first-of-type { margin-top: var(--s-4); }
.dns-sec .dns-watch { margin-bottom: var(--s-2); }
.dns-sec .dns-watch-item form, .dns-sec .actions form { display: inline; margin: 0; }
.dns-hosts { display: block; overflow-wrap: anywhere; }
section[aria-labelledby^='dns-'] { margin-top: var(--s-6); }
/* Verwacht / Bekeken: a radio group (bell and DNS tab); the generic .field input rule must not stretch the radios. */
fieldset.field { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
fieldset.field legend { flex: 1 0 100%; padding: 0; font-weight: 600; }
fieldset.field label { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; }
fieldset.field input[type='radio'] { width: 1.125rem; height: 1.125rem; min-height: 0; margin: 0; accent-color: var(--ink); }
.svc-t { overflow-wrap: break-word; word-break: normal; hyphens: auto; }
/* Projecten (1.2.0): notes keep their line breaks; the SSH edit form of one environment sits in its table cell. */
.facts .pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.ssh-edit { display: grid; gap: var(--s-2); }
.ssh-edit .field { margin: 0; }
@media (min-width: 900px) { .ssh-edit { grid-template-columns: 1fr 1fr auto; align-items: end; } }