/* Intake-dossier surface — styling-pass (PM-425 correctie e).
   Eigen stylesheet (geen gedeelde CSS aangeraakt). Sluit aan op de portal-vormtaal:
   compacte velden i.p.v. pagina-breed, gestructureerde lijst, status-badges. */

.ssp-intake-wrap .ss-card { margin-bottom: 1rem; }

/* Koppen */
.ssp-intake-wrap .ss-h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
.ssp-intake-wrap .ss-h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
.ssp-intake-wrap .ss-muted { color: #6b7280; }
.ssp-intake-wrap .ss-hr { border: 0; border-top: 1px solid #e5e7eb; margin: 1.5rem 0 1rem; }

/* ── Lijst ─────────────────────────────────────────────────────────────────── */
.ss-intake-table { width: 100%; border-collapse: collapse; margin: .75rem 0 .25rem; font-size: .95rem; }
.ss-intake-table thead th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: #6b7280; border-bottom: 2px solid #e5e7eb; padding: .5rem .6rem;
}
.ss-intake-table tbody td { padding: .6rem .6rem; border-bottom: 1px solid #f0f1f3; vertical-align: middle; }
.ss-intake-table tbody tr:hover { background: #f9fafb; }

/* Status-badges */
.ss-badge {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
  background: #eef0f2; color: #374151;
}
.ss-badge--draft      { background: #eef0f2; color: #4b5563; }
.ss-badge--qualifying { background: #e0f2fe; color: #075985; }
.ss-badge--surveying  { background: #fef3c7; color: #92400e; }
.ss-badge--ready      { background: #dcfce7; color: #166534; }
.ss-badge--promoted   { background: #ede9fe; color: #5b21b6; }
.ss-badge--archived   { background: #f3f4f6; color: #9ca3af; }

/* ── Create-form: compact grid, NIET pagina-breed (correctie e) ────────────── */
.ss-intake-create { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.25rem; max-width: 680px; }
.ss-intake-create .ss-form-row { display: flex; flex-direction: column; gap: .25rem; }
.ss-intake-create label { font-weight: 600; font-size: 16px; } /* typografie: zie SS-FORM-KOPPEL */
.ss-intake-create input[type="text"],
.ss-intake-create select {
  width: 100%; padding: .5rem .6rem; border: 1px solid #d1d5db; border-radius: .45rem;
  font-size: 16px; background: #fff;
}
.ss-intake-create input:focus, .ss-intake-create select:focus {
  outline: none; border-color: #0b3d2e; box-shadow: 0 0 0 3px rgba(11,61,46,.12);
}
.ss-intake-create .ss-field-hint { font-size: .78rem; color: #9ca3af; }
.ss-intake-create > button[type="submit"] { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 560px) { .ss-intake-create { grid-template-columns: 1fr; } }

/* ── Panelen: volledigheid + model-advies ──────────────────────────────────── */
.ss-progress { height: 8px; background: #e5e7eb; border-radius: 999px; overflow: hidden; margin: .35rem 0 .5rem; }
.ss-progress__bar { height: 100%; background: #0b3d2e; border-radius: 999px; transition: width .3s; }
.ss-list { margin: .25rem 0 .5rem; padding-left: 1.1rem; }
.ss-list li { margin: .1rem 0; }
.ss-list--caution li { color: #92400e; }
.ss-intake-completeness, .ss-intake-advies { border-left: 3px solid #0b3d2e; }
.ss-intake-advies { border-left-color: #b45309; }
.ss-fineprint { font-size: .78rem; }

/* Knoppen (val terug op portal-stijl indien aanwezig; anders deze basis) */
.ssp-intake-wrap .ss-btn--sm { padding: .3rem .7rem; font-size: .82rem; }

/* Notices */
.ss-notice { padding: .6rem .9rem; border-radius: .45rem; margin-bottom: 1rem; font-size: .92rem; }
.ss-notice--success { background: #dcfce7; color: #166534; }
.ss-notice--error   { background: #fee2e2; color: #991b1b; }
.ss-notice--info    { background: #ede9fe; color: #4c1d95; }
.ss-notice--warning { background: #ffedd5; color: #9a3412; }

/* Meerdere robotmodellen per intake (R-20261016-01) — checkboxen per leverancier */
.ss-intake-models { display: flex; flex-direction: column; gap: .35rem; }
.ss-intake-models .ss-intake-models__group { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: .15rem 1.1rem; }
.ss-intake-models .ss-intake-models__group legend { padding: 0; margin-bottom: .1rem; width: 100%; } /* maat: SS-FORM-KOPPEL 3a */
.ss-intake-models .ss-intake-models__opt { display: inline-flex; align-items: center; gap: .3rem; font-size: .92rem; font-weight: 400; margin: 0; }
.ss-intake-models .ss-intake-models__opt .ss-muted { font-size: .8rem; }

/* ── Mobiel: voorkom iOS-auto-zoom bij veld-focus ───────────────────────────
   iOS Safari zoomt automatisch in zodra een input een font-size < 16px heeft —
   dat maakt het invullen op de telefoon hortend (elke veld-tap zoomt in, daarna
   handmatig terug-knijpen). De create-form-inputs (.95rem) én de hergebruikte
   schouwing-wizard-inputs (14px) zitten daar beide onder. Op smalle viewports
   tillen we ze naar 16px. Scoped onder .ssp-intake-wrap → alleen het /intake/-
   surface; overschrijft ss-dashboard-v2.css zonder dat gedeelde bestand te raken
   (ss-intake.css laadt erná als dependency). Desktop-dichtheid blijft ongemoeid. */
@media (max-width: 600px) {
  .ssp-intake-wrap .ss-intake-create input[type="text"],
  .ssp-intake-wrap .ss-intake-create select,
  .ssp-intake-wrap .ss-pilot-setup-input,
  .ssp-intake-wrap .ss-pilot-setup-select,
  .ssp-intake-wrap .ss-pilot-setup-textarea {
    font-size: 16px;
  }
}

/* ── FASE B1.1 (Ron): inklapbare info-cards (harmonica) — beperkt scrollen ──────
   Completeness / Model-advies / Klant-uitnodigen als <details class="ss-acc">.
   Summary = klikbare koptekst met chevron; body verschijnt bij openklappen. */
.ssp-intake-wrap .ss-acc { padding: 0; }
.ssp-intake-wrap .ss-acc > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .5em;
  font-weight: 600;
}
.ssp-intake-wrap .ss-acc > summary::-webkit-details-marker { display: none; }
.ssp-intake-wrap .ss-acc > summary::before {
  content: "▸";
  font-size: .8em;
  color: #6b7280;
  transition: transform .15s ease;
}
.ssp-intake-wrap .ss-acc[open] > summary::before { transform: rotate(90deg); }
.ssp-intake-wrap .ss-acc > .ss-acc__body { padding: 0 16px 14px; }

/* ── Onderste pill-nav (spiegel van boven) — Vorige/Volgende vervallen ─────── */
.ssp-intake-wrap .ss-wz__stepper--bottom { margin-top: 18px; }

/* ── FASE E (Ron): "+ toelichting"-disclosure — optionele notitievelden pas op
   verzoek, i.p.v. een muur van lege textareas. Native <details>; het veld post
   gewoon mee (geen save-risico). Op /pilot/ (geen ss-intake.css) valt dit terug
   op de native disclosure-triangle — functioneel identiek. */
.ssp-intake-wrap .ss-note-acc { margin: 2px 0 10px; }
.ssp-intake-wrap .ss-note-acc > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-size: .85rem;
  color: #1E73BE;
  padding: 4px 0;
  user-select: none;
}
.ssp-intake-wrap .ss-note-acc > summary::-webkit-details-marker { display: none; }
.ssp-intake-wrap .ss-note-acc > summary::before { content: "+"; font-weight: 700; }
.ssp-intake-wrap .ss-note-acc[open] > summary { color: #6b7280; }
.ssp-intake-wrap .ss-note-acc[open] > summary::before { content: "\2212"; } /* − */
.ssp-intake-wrap .ss-note-acc > .ss-pilot-setup-field { margin-top: 4px; }
.ssp-intake-wrap .ss-note-acc > .ss-pilot-setup-field > .ss-pilot-setup-field__label { display: none; }

/* ── Compacter op mobiel: minder wit in de info-cards + form-card ──────────── */
@media (max-width: 600px) {
  .ssp-intake-wrap .ss-card-body { padding: 14px; }
  .ssp-intake-wrap .ss-acc > summary { padding: 11px 14px; }
  .ssp-intake-wrap .ss-acc > .ss-acc__body { padding: 0 14px 12px; }
  .ssp-intake-wrap .ss-wz__stepper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── FASE B1.1 ronde 2 (Ron): compacte intake-kop-card — minder wit ─────────── */
.ssp-intake-wrap .ss-intake-head .ss-card-body { padding: 14px 16px; }
.ssp-intake-wrap .ss-intake-head__back { margin: 0 0 6px; }
.ssp-intake-wrap .ss-intake-head .ss-h1 { margin: 0 0 6px; font-size: 1.4rem; line-height: 1.2; }
.ssp-intake-wrap .ss-intake-head p.ss-muted { margin: 0; }
@media (max-width: 600px) {
  .ssp-intake-wrap .ss-intake-head .ss-h1 { font-size: 1.2rem; }
  .ssp-intake-wrap .ss-intake-head .ss-card-body { padding: 12px 14px; }
}

/* ── "Mijn schouwingen"-lijst: responsief op mobiel ─────────────────────────
   Op smalle viewports verborg de tabel de acties (Openen/Indienen) buiten beeld.
   Verberg de secundaire kolommen (Robot-type · Locatie/Deal · Bijgewerkt) zodat
   Klant · Status · acties binnen de viewport passen. Desktop = volledige tabel. */
@media (max-width: 600px) {
  .ssp-intake-wrap .ss-intake-table th:nth-child(2),
  .ssp-intake-wrap .ss-intake-table td:nth-child(2),
  .ssp-intake-wrap .ss-intake-table th:nth-child(3),
  .ssp-intake-wrap .ss-intake-table td:nth-child(3),
  .ssp-intake-wrap .ss-intake-table th:nth-child(5),
  .ssp-intake-wrap .ss-intake-table td:nth-child(5) { display: none; }
  .ssp-intake-wrap .ss-intake-table th,
  .ssp-intake-wrap .ss-intake-table td { padding: 8px 6px; }
  /* acties (Openen + Indienen) onder elkaar stapelen zodat niets buiten beeld valt */
  .ssp-intake-wrap .ss-intake-table td:last-child { white-space: normal; }
  .ssp-intake-wrap .ss-intake-table td:last-child form { display: block; }
  .ssp-intake-wrap .ss-intake-table td:last-child .ss-btn {
    display: block;
    width: 100%;
    margin: 3px 0;
    text-align: center;
  }
}

/* ── F-selects (Ron): robotmodellen-beheer = office-DESKTOP-taak. Op desktop een
   STRAKKE tabel (volle breedte, uitgelijnd, ruime rijen, zebra). Op mobiel:
   secundaire kolommen verbergen + horizontaal scrollen (niet van 't scherm). */
.ssp-intake-wrap .ss-models-table { width: 100%; border-collapse: collapse; }
.ssp-intake-wrap .ss-models-table th,
.ssp-intake-wrap .ss-models-table td { text-align: left; padding: 10px 14px; vertical-align: middle; border-bottom: 1px solid #eef0f3; }
.ssp-intake-wrap .ss-models-table thead th { border-bottom: 2px solid #e2e5ea; font-weight: 700; white-space: nowrap; }
.ssp-intake-wrap .ss-models-table tbody tr:nth-child(even) { background: #fafbfc; }
.ssp-intake-wrap .ss-models-table td:last-child { white-space: nowrap; text-align: right; }
.ssp-intake-wrap .ss-models-table td:last-child .ss-btn { margin-left: 6px; }
@media (max-width: 600px) {
  .ssp-intake-wrap .ss-models-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ssp-intake-wrap .ss-models-table th:nth-child(4),
  .ssp-intake-wrap .ss-models-table td:nth-child(4),
  .ssp-intake-wrap .ss-models-table th:nth-child(5),
  .ssp-intake-wrap .ss-models-table td:nth-child(5) { display: none; }
  .ssp-intake-wrap .ss-models-table th,
  .ssp-intake-wrap .ss-models-table td { padding: 8px 6px; }
  .ssp-intake-wrap .ss-models-table td:last-child { text-align: left; }
  .ssp-intake-wrap .ss-models-table td:last-child form { display: block; }
  .ssp-intake-wrap .ss-models-table td:last-child .ss-btn { display: block; width: 100%; margin: 3px 0; text-align: center; }
}

/* Meerkeuze-groepen (inzetmodi/scenes) in het model-formulier. */
.ssp-intake-wrap .ss-check-group { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ssp-intake-wrap .ss-check { display: inline-flex; align-items: center; gap: .4em; font-weight: 400; }
.ssp-intake-wrap .ss-check input { width: auto; margin: 0; }

/* Machine-picker: aanvinkbare voorraad-kandidaten (meerdere machines per pilot/deploy).
   Checkboxes i.p.v. <select multiple> — die vereist ctrl/cmd-klikken en is op touch onbruikbaar.
   Scrollt zelf zodra de voorraadlijst lang wordt, zodat het paneel compact blijft. */
.ssp-intake-wrap .ss-checklist {
	list-style: none;
	margin: .4em 0 0;
	padding: .5em .75em;
	border: 1px solid var(--ss-border, #dfe3e8);
	border-radius: 6px;
	max-height: 260px;
	overflow-y: auto;
	background: #fff;
}
.ssp-intake-wrap .ss-checklist li { margin: 0; }
.ssp-intake-wrap .ss-checklist label {
	display: flex;
	align-items: center;
	gap: .5em;
	padding: .3em 0;
	font-weight: 400;
	cursor: pointer;
}
.ssp-intake-wrap .ss-checklist input { width: auto; margin: 0; flex: none; }
.ssp-intake-wrap fieldset.ss-form-row { border: 0; padding: 0; margin-bottom: 1em; }
.ssp-intake-wrap fieldset.ss-form-row legend { padding: 0; } /* maat/gewicht: SS-FORM-KOPPEL 3a */

/* R-20261016-03 — stations per model + inzetplan per verdieping/zone. */
.ssp-intake-wrap .ss-st-intro { margin: 0 0 .5em; }
.ssp-intake-wrap .ss-ip__sum { cursor: pointer; font-weight: 600; padding: .25em 0; }
.ssp-intake-wrap .ss-ip__head,
.ssp-intake-wrap .ss-ip__row {
	display: grid;
	grid-template-columns: minmax(8em, 1.2fr) minmax(9em, 1.6fr) minmax(8em, 1fr) 5.5em minmax(8em, 1.2fr) auto;
	gap: .5em;
	align-items: center;
}
.ssp-intake-wrap .ss-ip__head { font-size: .85em; color: #5b6573; padding: .25em 0; }
.ssp-intake-wrap .ss-ip__row { padding: .4em 0; border-top: 1px solid var(--ss-border, #dfe3e8); }
.ssp-intake-wrap .ss-ip__cell input,
.ssp-intake-wrap .ss-ip__cell select { width: 100%; }
.ssp-intake-wrap .ss-ip__cell--models { display: flex; flex-wrap: wrap; gap: .25em .75em; }
.ssp-intake-wrap .ss-ip__model { display: inline-flex; align-items: center; gap: .3em; font-weight: 400; white-space: nowrap; }
.ssp-intake-wrap .ss-ip__model input { width: auto; margin: 0; }
.ssp-intake-wrap [data-ss-ip-add] { margin-top: .5em; }
@media (max-width: 720px) {
	.ssp-intake-wrap .ss-ip__head { display: none; }
	.ssp-intake-wrap .ss-ip__row { grid-template-columns: 1fr 1fr; }
	.ssp-intake-wrap .ss-ip__cell--zone,
	.ssp-intake-wrap .ss-ip__cell--models,
	.ssp-intake-wrap .ss-ip__cell--note { grid-column: 1 / -1; }
}

/* R-20261016-09 — inzetplan per deelgebied: kaart met omgeving, periodes, KPI's, geschiktheid. */
.ssp-intake-wrap .ss-ip__row.ss-da { display: block; padding: .5em .6em .6em; margin: .5em 0; border: 1px solid var(--ss-border, #dfe3e8); border-radius: 8px; background: #fbfcfd; }
.ssp-intake-wrap .ss-da__sum { cursor: pointer; font-weight: 600; padding: .2em 0 .4em; }
.ssp-intake-wrap .ss-da__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5em, 1fr)); gap: .4em .6em; align-items: end; margin: .25em 0; }
.ssp-intake-wrap .ss-da__f { display: flex; flex-direction: column; gap: .15em; font-weight: 400; margin: 0; }
.ssp-intake-wrap .ss-da__f--wide { grid-column: span 2; }
.ssp-intake-wrap .ss-da__l { font-size: .82em; color: #5b6573; }
.ssp-intake-wrap .ss-da__f input,
.ssp-intake-wrap .ss-da__f select { width: 100%; }
.ssp-intake-wrap .ss-da__sub { font-weight: 600; font-size: .9em; margin: .7em 0 .2em; }
.ssp-intake-wrap .ss-da .ss-ip__cell--models { display: flex; flex-wrap: wrap; gap: .25em .75em; }
.ssp-intake-wrap .ss-pd,
.ssp-intake-wrap .ss-kpi { padding: .35em 0; border-top: 1px dashed var(--ss-border, #dfe3e8); }
.ssp-intake-wrap .ss-da__hook { display: contents; }
.ssp-intake-wrap .ss-da__ws { display: contents; }
.ssp-intake-wrap .ss-da__ws[hidden],
.ssp-intake-wrap .ss-da__by[hidden] { display: none; }
.ssp-intake-wrap .ss-kpi__del { align-self: end; }
.ssp-intake-wrap .ss-da [data-ss-add] { margin: .3em 0; }
.ssp-intake-wrap .ss-da__fitlist { list-style: none; margin: .2em 0; padding: 0; font-size: .92em; }
.ssp-intake-wrap .ss-da__fitlist li { margin: .15em 0; }
.ss-fit { display: inline-block; padding: 0 .45em; border-radius: 9px; font-size: .8em; font-weight: 600; line-height: 1.6; background: #eef1f4; color: #3d4652; }
.ss-fit--geschikt { background: #e3f4e8; color: #1f6b3a; }
.ss-fit--beperkt { background: #fff4d6; color: #7a5a00; }
.ss-fit--ongeschikt { background: #fde4e1; color: #9b2c1f; }
.ssp-intake-wrap .ss-st__legacy .ss-pilot-setup-field__value { font-size: .9em; }
.ssp-intake-wrap .ss-intake-models-link { margin: .3em 0 0; font-size: .92em; }
@media (max-width: 720px) {
	.ssp-intake-wrap .ss-da__grid { grid-template-columns: 1fr 1fr; }
	.ssp-intake-wrap .ss-da__f--wide { grid-column: 1 / -1; }
}

/* ── R-20261016-07: mobiel minder tekst + blijf-waar-je-was ─────────────────────
   Uitleg achter een tikbare (i) (ssp_ux_info): <span class="ss-info"><button class="ss-tip">.
   Inline naast het label/de korte regel; open = uitleg eronder. Geen title-tooltip (werkt niet op touch). */
.ssp-intake-wrap .ss-info { display: inline; }
.ssp-intake-wrap .ss-info > .ss-tip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; min-height: 0; padding: 0; margin: 0 2px; border-radius: 50%; border: 1px solid var(--ss-border, #cfd6e0); background: #fff; font-size: 12px; font-weight: 700; font-style: italic; color: #5b6573; cursor: pointer; vertical-align: middle; position: relative; box-shadow: none; }
.ssp-intake-wrap .ss-info > .ss-tip::after { content: ""; position: absolute; inset: -11px; } /* tikvlak 44px */
.ssp-intake-wrap .ss-info.is-open > .ss-tip { background: #eef4fb; }
.ssp-intake-wrap .ss-info__body { display: none; margin: 4px 0 6px; padding: 6px 9px; background: #f6f9fd; border-radius: 6px; font-size: 13px; line-height: 1.4; color: #3d4652; font-style: normal; }
.ssp-intake-wrap .ss-info.is-open > .ss-info__body { display: block; }
/* Terugkeer-anker: het blok staat niet onder de vaste kop weggedoken. */
.ssp-intake-wrap [id^="ss-blk-"] { scroll-margin-top: 72px; }

/* Formuliertypografie: zie SS-FORM-KOPPEL onderaan dit bestand (vervangt SS-FORM-TYPO van
   R-20261016-13; tokens in ss-ontwerpsysteem.css deel 5, STIJLRICHTLIJN-formulieren.md). */

/* R-20261016-13: pilot-dossierknop op normale knopbreedte, de (i) ernaast. */
.ssp-intake-wrap .ss-intake-pilot-create { width: auto; }

/* R-20261016-13: voorraad-picker compact. Gegroepeerd per model; per robot één regel
   (serienummer + markeringen); markeringen kappen af met … i.p.v. de regel op te rekken. */
.ssp-intake-wrap .ss-pick-filter { display: block; width: 100%; box-sizing: border-box; margin: .35em 0 .25em; padding: .45em .6em; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; }
.ssp-intake-wrap .ss-checklist--pick { max-height: 340px; padding: .2em .6em; }
.ssp-intake-wrap .ss-checklist__group { font-size: 13px; font-weight: 600; color: #5b6573; padding: .55em 0 .1em; border-top: 1px solid #eef0f3; }
.ssp-intake-wrap .ss-checklist__group:first-child { border-top: 0; padding-top: .25em; }
.ssp-intake-wrap .ss-checklist--pick label { flex-wrap: wrap; gap: .4em; padding: .15em 0; min-height: 34px; box-sizing: border-box; line-height: 1.3; }
.ssp-intake-wrap .ss-checklist__sn { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ssp-intake-wrap .ss-checklist__flags { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ssp-intake-wrap .ss-checklist__flags .ss-badge { display: inline-block; min-height: 0; padding: 0 .5em; font-size: 11px; line-height: 1.6; vertical-align: middle; margin-right: .25em; }
.ssp-intake-wrap .ss-checklist--pick .ss-info.is-open { flex-basis: 100%; }
.ssp-intake-wrap .ss-checklist__none { font-size: 14px; color: #6b7280; padding: .3em 0; }

/* B1a (R-20261016-20): fasebalk, Voorbereiding als één formulier, vaste opslagbalk, Klaar voor vertrek. */
.ssp-intake-wrap .ss-intake-fasebalk { display: flex; gap: 4px; margin: 0 0 12px; position: sticky; top: 0; z-index: 20; background: #fff; padding: 4px 0; }
.ssp-intake-wrap .ss-intake-fasebalk__tab { flex: 1 1 0; min-width: 0; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 4px; padding: 4px 6px; border: 1px solid var(--ss-border, #d8e2f0); border-radius: 8px; text-decoration: none; color: #374151; font-size: 14px; line-height: 1.25; text-align: center; }
.ssp-intake-wrap .ss-intake-fasebalk__tab.is-active { background: #1E74E0; border-color: #1E74E0; color: #fff; font-weight: 600; }
.ssp-intake-wrap .ss-intake-fasebalk__n { font-weight: 600; }
.ssp-intake-wrap .ss-intake-fasebalk__s { font-size: 12px; opacity: .8; white-space: nowrap; }
.ssp-intake-wrap .ss-intake-blk { scroll-margin-top: 70px; }
.ssp-intake-wrap .ss-intake-blk .ss-h2 { margin-top: 0; }
.ssp-intake-wrap .ss-intake-blk__line { margin: 0 0 8px; }
.ssp-intake-wrap .ss-intake-fs { border: 0; padding: 0; margin: 10px 0 0; min-width: 0; }
.ssp-intake-wrap .ss-intake-fs > legend { padding: 0; margin: 0 0 4px; } /* maat/gewicht: SS-FORM-KOPPEL 3a */
.ssp-intake-wrap .ss-intake-fs__label { display: block; margin-bottom: 2px; }
.ssp-intake-wrap .ss-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 400; cursor: pointer; }
.ssp-intake-wrap .ss-check input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.ssp-intake-wrap .ss-intake-voorb__actions { margin: 4px 0 12px; }
.ssp-intake-wrap .ss-intake-savebar { position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 -4px 12px; padding: 8px 12px; background: #fff; border: 1px solid var(--ss-border, #d8e2f0); border-radius: 10px; box-shadow: 0 -2px 10px rgba(16, 24, 40, .08); }
.ssp-intake-wrap .ss-intake-savebar.is-hidden { visibility: hidden; }
.ssp-intake-wrap .ss-intake-savebar__state { font-size: 14px; color: #6b7280; }
.ssp-intake-wrap .ss-intake-savebar.is-dirty .ss-intake-savebar__state { color: #9a3412; font-weight: 600; }
body.has-ss-savebar .ss-pwa-pill { bottom: 4.75rem; }
.ssp-intake-wrap .ss-intake-vertrek__list { list-style: none; margin: 0 0 10px; padding: 0; }
.ssp-intake-wrap .ss-intake-vertrek__pt { display: flex; align-items: center; gap: 8px; min-height: 44px; border-bottom: 1px solid #eef2f7; }
.ssp-intake-wrap .ss-intake-vertrek__pt .ss-link { flex: 1 1 auto; min-height: 44px; display: flex; align-items: center; }
.ssp-intake-wrap .ss-intake-vertrek__ico { flex: 0 0 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: #eef2f7; color: #6b7280; }
.ssp-intake-wrap .ss-intake-vertrek__pt.is-ok .ss-intake-vertrek__ico { background: #EFF9F1; color: #1f7a3a; }
.ssp-intake-wrap .ss-intake-vertrek__pt.is-warn .ss-intake-vertrek__ico { background: #fff4e5; color: #9a3412; }
.ssp-intake-wrap .ss-intake-vertrek__advies { scroll-margin-top: 70px; }
.ssp-intake-wrap .ss-intake-fs .ss-check { display: flex; }

/* SS-FORM-KOPPEL-START ── R-20261016-28 (PM-939) · STIJLRICHTLIJN-formulieren.md §3-§6, stap 1 ──────
   Koppellaag van de intake op de formulierladder. De maten staan NIET hier: elke regel verwijst naar
   de tokens --ss-form-* uit ss-ontwerpsysteem.css deel 5 (bron). Elke maat wordt expliciet gezet,
   zodat de WordPress-presets (h2 x-large, h1-h6 400, vloeiende legend) niet meer doorlekken.
   Scope: /intake/ (.ssp-intake-wrap) en /intake-aanvullen/ (.ssp-iv-wrap). Staat bewust onderaan
   het bestand: zo wint hij van de oudere intake-regels bij gelijke specificiteit.
   Ladder: 1 blok 20/22 · 2 paragraaf 17/18 paars · 3a groepskop 16/700 · 3b label 16/600 ·
   4 invoer 16/400 (optie 15) · 5 toelichting 13/400. Knoppen 40/36, gecentreerd, 24px erboven. */

/* 1 Onderdeel / blok: summary van een inklapblok en de bloktitel (h2.ss-h2). */
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-acc > summary,
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-h2 {
  font-size: var(--ss-form-fs-blok);
  font-weight: var(--ss-fw-bold);
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ss-color-text);
}
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-acc > summary { flex-wrap: wrap; align-items: baseline; padding: var(--ss-space-3) var(--ss-form-pad-blok); }
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-acc > summary::before { font-size: var(--ss-form-fs-hint); }
/* Open blok: dunne lijn onder de kop, inhoud begint 16px eronder (§5). */
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-acc[open] > summary { border-bottom: 1px solid var(--ss-color-border); }
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-acc[open] > .ss-acc__body { padding: var(--ss-space-4) var(--ss-form-pad-blok) var(--ss-form-pad-blok); }
/* Altijd-open blok met een h2 als eerste kop: dezelfde lijn. */
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-card-body > .ss-h2:first-child,
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-card-body > .ss-notice + .ss-h2 {
  margin: 0 0 var(--ss-space-4);
  padding-bottom: var(--ss-space-3);
  border-bottom: 1px solid var(--ss-color-border);
}

/* 5 Toelichting achter een titel of label: "(nog geen toegewezen)", "(optioneel)". Nooit de
   titelmaat of het titelgewicht erven. */
:is(.ssp-intake-wrap, .ssp-iv-wrap) :is(summary, h2, h3, h4, legend, label, .ss-h2, .ss-h3) .ss-muted {
  font-size: var(--ss-form-fs-hint);
  font-weight: var(--ss-fw-regular);
  font-style: normal;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ss-color-text-soft);
}

/* 2 Paragraaf / subblok: h3/h4 en de wizardgroep-kop. Paars, 32px erboven (0 als eerste). */
:is(.ssp-intake-wrap, .ssp-iv-wrap) :is(h3, h4, .ss-h3),
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-wz-group__title {
  margin: var(--ss-form-gap-par) 0 var(--ss-space-3);
  font-size: var(--ss-form-fs-par);
  font-weight: var(--ss-fw-bold);
  font-style: normal;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ss-form-color-par);
}
:is(.ssp-intake-wrap, .ssp-iv-wrap) :is(h3, h4, .ss-h3):first-child,
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-wz-group__title { margin-top: 0; }

/* 3a Groepskop: elke legend (veldgroep, "Robots op voorraad", de merkkoppen Gausium/Keenon bij de
   modellen), behalve de wizardgroep-kop: die is een paragraaf (niveau 2). */
:is(.ssp-intake-wrap, .ssp-iv-wrap) legend:not(.ss-wz-group__title),
.ss-intake-models .ss-intake-models__group legend,
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-da__sub {
  padding: 0;
  margin: 0 0 var(--ss-space-2);
  font-size: var(--ss-form-fs-label);
  font-weight: var(--ss-fw-bold);
  font-style: normal;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ss-color-text);
}
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-intake-fs { margin-top: var(--ss-form-gap-group); }
:is(.ssp-intake-wrap, .ssp-iv-wrap) :is(h3, h4, .ss-h3) + .ss-intake-fs,
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-intake-fs:first-child { margin-top: 0; }

/* 3b Veldlabel (PM-933): 16 / semibold, geen kapitalen. */
:is(.ssp-intake-wrap, .ssp-iv-wrap) label:not(:has(input[type="checkbox"], input[type="radio"])),
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-pilot-setup-field__label,
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-da__l {
  font-size: var(--ss-form-fs-label);
  font-weight: var(--ss-fw-semibold);
  font-style: normal;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.3;
  color: var(--ss-color-text);
}

/* 4 Invoer: 16 / 400 (iOS-grens), placeholder in de placeholderkleur. */
:is(.ssp-intake-wrap, .ssp-iv-wrap) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]),
:is(.ssp-intake-wrap, .ssp-iv-wrap) select,
:is(.ssp-intake-wrap, .ssp-iv-wrap) textarea {
  font-family: inherit;
  font-size: var(--ss-form-fs-input);
  font-weight: var(--ss-fw-regular);
  text-transform: none;
  letter-spacing: normal;
  color: var(--ss-color-text);
}
:is(.ssp-intake-wrap, .ssp-iv-wrap) ::placeholder { color: var(--ss-color-placeholder); opacity: 1; }
:is(.ssp-intake-wrap, .ssp-iv-wrap) textarea { box-sizing: border-box; max-width: 100%; }
/* Zoekveld voorraad: een invoer, dus de invoerhoogte. */
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-pick-filter { min-height: var(--ss-tap); padding: 0 var(--ss-space-3); }
/* 4o Keuze-optie (vinkje/radio). */
:is(.ssp-intake-wrap, .ssp-iv-wrap) label:has(input[type="checkbox"], input[type="radio"]) {
  font-size: var(--ss-form-fs-option);
  font-weight: var(--ss-fw-regular);
  text-transform: none;
  letter-spacing: normal;
}

/* 5 Toelichting onder een veld en losse uitleg. */
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-field-hint,
:is(.ssp-intake-wrap, .ssp-iv-wrap) p.ss-muted,
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-st-intro {
  font-size: var(--ss-form-fs-hint);
  font-weight: var(--ss-fw-regular);
  line-height: 1.4;
  color: var(--ss-color-text-soft);
}
/* De (i)-ballon houdt zijn eigen opmaak, ook binnen een vet label of een kop. */
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-info__body {
  font-size: var(--ss-form-fs-hint);
  font-weight: var(--ss-fw-regular);
  text-transform: none;
  letter-spacing: normal;
  color: var(--ss-form-color-info);
  background: var(--ss-form-tint-info);
}

/* Knoppen in het formulier: 40 telefoon / 36 desktop, 14/700. */
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-btn {
  box-sizing: border-box;
  height: var(--ss-form-btn-h);
  min-height: 0;
  padding: var(--ss-form-btn-pad);
  font-size: var(--ss-form-btn-fs);
  font-weight: var(--ss-fw-bold);
  line-height: 1;
  border-radius: var(--ss-radius-sm);
  white-space: nowrap;
}
/* Knoppenrij: gecentreerd onder de inhoud, 24px erboven (ss-formulier__acties uit deel 5). */
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-formulier__acties { margin-bottom: 0; }
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-formulier__acties > .ss-btn { flex: 0 0 auto; }
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-intake-voorb__actions { margin: var(--ss-form-gap-actions) 0 var(--ss-space-3); }
/* Wizardvoet (fase 2): knoppen gecentreerd, 24px onder de lijn; een eventuele teller eronder. */
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-wz__foot { justify-content: center; margin-top: var(--ss-form-gap-actions); padding-top: var(--ss-form-gap-actions); }
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-wz__counter { order: 2; flex: 1 1 100%; text-align: center; }
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-wz__foot-actions { margin: 0 auto; width: auto; justify-content: center; gap: var(--ss-space-2); }
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-wz__foot-actions .ss-btn { flex: 0 0 auto; }
/* Repeater-knoppenrij (toevoegen/verwijderen in de wizard): gecentreerd, nooit volle breedte
   (ss-dashboard-v2.css maakt ze op mobiel 100% breed). */
:is(.ssp-intake-wrap, .ssp-iv-wrap) :is(.ss-pilot-setup-form__actions, .ss-pilot-setup-item__actions) {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ss-space-2); width: auto;
  margin-top: var(--ss-form-gap-actions);
}
:is(.ssp-intake-wrap, .ssp-iv-wrap) :is(.ss-pilot-setup-form__actions, .ss-pilot-setup-item__actions) .ss-btn { flex: 0 0 auto; width: auto; }
/* Losse rijbediening zonder eigen rij (schouwing: + Periode, + KPI, + Deelgebied, ... weg):
   gecentreerd onder de rijen waar hij bij hoort, 8px erboven (bediening, geen formulierafsluiting). */
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-btn:is([data-ss-add], [data-ss-del]):not(.ss-kpi__del) {
  display: flex; width: fit-content; max-width: 100%; margin: var(--ss-space-2) auto 0;
}
/* Uitzondering: de vaste opslagbalk blijft volle breedte met de knop rechts. */
:is(.ssp-intake-wrap, .ssp-iv-wrap) .ss-intake-savebar__btn { margin-left: auto; }
/* B2 (R-20261016-30): vooraf ingevulde groep in fase 2, ingeklapt ("Al bekend, klopt dit?").
   De kop is een paragraaf (niveau 2); open toont hij de groep zonder extra inspringing. */
.ssp-intake-wrap .ss-intake-bekend > summary {
  min-height: var(--ss-tap);
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--ss-form-fs-par);
  color: var(--ss-form-color-par);
}
.ssp-intake-wrap .ss-intake-bekend > summary .ss-fold__n { font-size: var(--ss-form-fs-hint); }
.ssp-intake-wrap .ss-intake-bekend > .ss-fold__body { padding: 0 0 var(--ss-space-3); }
/* Kaart "Wat kantoor al weet": label en waarde mogen op 390 onder elkaar breken. */
.ssp-intake-wrap .ss-intake-kantoor .ss-kv { flex-wrap: wrap; align-items: baseline; font-size: var(--ss-form-fs-option); }
.ssp-intake-wrap .ss-intake-kantoor .ss-kv__k { flex: 0 0 auto; }
.ssp-intake-wrap .ss-intake-kantoor .ss-kv__v { flex: 1 1 60%; min-width: 0; text-align: left; overflow-wrap: anywhere; }
/* B3b (R-20261016-34): fotovakken in de wizard (ARCH-intake-voorbereiding-en-veld §7.2). Alleen
   tokens; tikvlak van een vak en van "n.v.t." >= --ss-tap (44px); het camerapictogram is eigen CSS
   (geen iconenset). Miniaturen en het dossier-overzicht: ss-dashboard-v2.css (ook op /pilot/). */
.ssp-intake-wrap .ss-foto-stap { margin: 0 0 var(--ss-form-gap-group); padding: var(--ss-space-3); border: 1px solid var(--ss-color-border); border-radius: var(--ss-radius-sm); background: var(--ss-color-surface); }
.ssp-intake-wrap .ss-foto-stap__kop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ss-space-2); }
.ssp-intake-wrap .ss-foto-stap__kop .ss-h3 { margin: 0; }
.ssp-intake-wrap .ss-foto-teller { font-size: var(--ss-form-fs-hint); font-weight: var(--ss-fw-semibold); color: var(--ss-color-text-soft); white-space: nowrap; }
.ssp-intake-wrap .ss-foto-stap__privacy { margin: var(--ss-space-1) 0 var(--ss-space-3); }
.ssp-intake-wrap .ss-foto-groep { margin-top: var(--ss-space-3); }
.ssp-intake-wrap .ss-foto-groep__t { margin: 0 0 var(--ss-space-2); font-size: var(--ss-form-fs-label); font-weight: var(--ss-fw-bold); color: var(--ss-color-text); overflow-wrap: anywhere; }
.ssp-intake-wrap .ss-foto-rij { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: var(--ss-space-2); }
.ssp-intake-wrap .ss-foto-rij + .ss-foto-rij { margin-top: var(--ss-space-2); }
/* Eén regel per vak: label (tikvlak) links, n.v.t. rechts; miniaturen en status eronder. */
.ssp-intake-wrap .ss-foto-vak { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ss-space-1) var(--ss-space-2); min-width: 0; padding: var(--ss-space-1) var(--ss-space-2); border: 1px dashed var(--ss-color-border); border-radius: var(--ss-radius-sm); background: var(--ss-color-bg); }
.ssp-intake-wrap .ss-foto-vak > * { grid-column: 1 / -1; }
.ssp-intake-wrap .ss-foto-vak > .ss-foto-vak__tik { grid-column: 1; grid-row: 1; }
.ssp-intake-wrap .ss-foto-vak > .ss-foto-vak__nvt { grid-column: 2; grid-row: 1; }
.ssp-intake-wrap .ss-foto-vak.is-done { border-style: solid; border-color: var(--ss-color-success); }
.ssp-intake-wrap .ss-foto-vak.is-nvt { border-style: solid; }
.ssp-intake-wrap .ss-foto-vak__tik { display: flex; align-items: center; gap: var(--ss-space-2); min-height: var(--ss-tap); cursor: pointer; overflow-wrap: anywhere; }
.ssp-intake-wrap .ss-foto-vak__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.ssp-intake-wrap .ss-foto-vak__tik:focus-within { outline: 2px solid var(--ss-color-primary); outline-offset: 2px; border-radius: var(--ss-radius-sm); }
.ssp-intake-wrap .ss-foto-vak__cam { position: relative; flex: 0 0 auto; box-sizing: border-box; width: 26px; height: 18px; margin-top: 4px; border: 2px solid var(--ss-color-primary); border-radius: 4px; }
.ssp-intake-wrap .ss-foto-vak__cam::before { content: ""; position: absolute; top: -6px; left: 5px; box-sizing: border-box; width: 9px; height: 5px; border: 2px solid var(--ss-color-primary); border-bottom: 0; border-radius: 2px 2px 0 0; }
.ssp-intake-wrap .ss-foto-vak__cam::after { content: ""; position: absolute; top: 2px; left: 6px; box-sizing: border-box; width: 10px; height: 10px; border: 2px solid var(--ss-color-primary); border-radius: 50%; }
.ssp-intake-wrap .ss-foto-vak.is-done .ss-foto-vak__cam,
.ssp-intake-wrap .ss-foto-vak.is-done .ss-foto-vak__cam::before,
.ssp-intake-wrap .ss-foto-vak.is-done .ss-foto-vak__cam::after { border-color: var(--ss-color-success); }
.ssp-intake-wrap .ss-foto-vak label.ss-foto-vak__bestand { display: flex; align-items: center; min-height: var(--ss-tap); font-size: var(--ss-form-fs-hint); font-weight: var(--ss-fw-regular); color: var(--ss-color-primary); text-decoration: underline; cursor: pointer; }
.ssp-intake-wrap .ss-foto-vak__cap { box-sizing: border-box; width: 100%; min-height: var(--ss-tap); padding: 0 var(--ss-space-2); border: 1px solid var(--ss-color-border); border-radius: var(--ss-radius-sm); }
.ssp-intake-wrap .ss-foto-vak__thumbs:empty { display: none; }
.ssp-intake-wrap .ss-foto-vak__nvt { align-self: center; min-height: var(--ss-tap); min-width: var(--ss-tap); padding: 0 var(--ss-space-3); border: 1px solid var(--ss-color-border); border-radius: var(--ss-radius-sm); background: var(--ss-color-surface); color: var(--ss-color-text-soft); font-size: var(--ss-form-fs-hint); font-weight: var(--ss-fw-semibold); cursor: pointer; }
.ssp-intake-wrap .ss-foto-vak__nvt[aria-pressed="true"] { background: var(--ss-color-text-soft); border-color: var(--ss-color-text-soft); color: var(--ss-color-surface); }
.ssp-intake-wrap .ss-foto-vak__state { font-size: var(--ss-form-fs-hint); color: var(--ss-color-text-soft); }
.ssp-intake-wrap .ss-foto-vak__state:empty { display: none; }
/* Stip in de stappenbalk bij een stap met ontbrekende foto's. */
.ssp-intake-wrap .ss-wz-step-pill.has-foto-open { position: relative; }
.ssp-intake-wrap .ss-wz-step-pill.has-foto-open::after { content: ""; position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--ss-color-warning); }
/* Herinnering bij "Klaar ter plaatse" / "Intake indienen" (een bevestiging, geen blokkade). */
.ssp-intake-wrap .ss-foto-herinnering { box-sizing: border-box; width: min(92vw, 520px); max-width: 92vw; border: 1px solid var(--ss-color-border); border-radius: var(--ss-radius-md); padding: var(--ss-form-pad-blok); color: var(--ss-color-text); }
.ssp-intake-wrap .ss-foto-herinnering::backdrop { background: rgb(0 0 0 / 35%); }
.ssp-intake-wrap .ss-foto-herinnering ul { margin: 0 0 var(--ss-space-3); padding-left: var(--ss-space-4); max-height: 45vh; overflow: auto; font-size: var(--ss-form-fs-option); }
.ssp-intake-wrap .ss-foto-herinnering li { margin-bottom: var(--ss-space-1); overflow-wrap: anywhere; }
.ssp-intake-wrap .ss-foto-herinnering a { color: var(--ss-color-primary); }
/* SS-FORM-KOPPEL-END */