/* Scope Compass — stylesheet voor spoor IP (projectkennis, bibliotheek laden, import samenvoegen).
   Laadt ná src/styles.css, zodat de tokens daaruit beschikbaar zijn en dit bestand ze kan
   overrulen. Mobiele regels staan onderaan in één @media-blok (max-width 640px), zoals de
   rest van de app; boven die grens verandert er niets aan de desktopmaten. */

/* ============================================================ IP3 — Projectkennis
   Eén scherm, één taak: bewaren wat er al is, en bijhouden wat er al mee gedaan is.
   Opbouw: uitleg → dropzone + linkbalk (alleen voor wie mag schrijven) → lijst. */
.pk-uitleg { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 16px;
  background: var(--pri-soft); border: 1px solid var(--border); border-radius: var(--r-lg);
  color: var(--text-2); font-size: 13.5px; line-height: 1.55; max-width: 96ch; }
.pk-uitleg > .ic { font-size: 20px; color: var(--pri-text); flex: none; margin-top: 1px; }
.pk-uitleg b { color: var(--text); font-weight: 600; }

.pk-dropzone { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; margin-bottom: 12px;
  border: 1.5px dashed var(--border); border-radius: var(--r-lg); padding: 22px 14px;
  color: var(--text-2); background: var(--sunken); transition: border-color .15s, background .15s; }
.pk-dropzone.is-drag { border-color: var(--pri); background: var(--pri-soft); color: var(--pri-text); }
.pk-dropzone.is-busy { opacity: .7; }
.pk-dropzone > .ic { font-size: 24px; opacity: .6; }
.pk-dz-main { font-size: 13.5px; }
.pk-dz-hint { font-size: 12px; color: var(--text-3); }
.pk-pick-link { background: none; border: none; padding: 0; color: var(--pri); font: inherit; cursor: pointer; text-decoration: underline; min-height: 24px; }

.pk-linkbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: 10px; align-items: end; margin-bottom: 16px; }
.pk-linkveld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pk-linkveld .label { font-size: 12px; color: var(--text-3); font-weight: 500; }
.pk-linkveld .input { width: 100%; min-width: 0; }
.pk-linkknop { white-space: nowrap; }

.pk-panel .panel-head { flex-wrap: wrap; gap: 8px; }
.pk-empty { padding: 18px 16px; font-size: 13px; line-height: 1.5; }
.pk-naam { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pk-naam-meta { display: flex; flex-direction: column; min-width: 0; }
.pk-naamtekst, .pk-link { font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.pk-link { text-decoration: none; }
.pk-link:hover { text-decoration: underline; color: var(--pri-text); }
.pk-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.pk-omvang { white-space: nowrap; color: var(--text-2); }
.pk-table th:nth-child(5), .pk-opm { width: 26%; }
.pk-opm .pk-opm-input { width: 100%; min-width: 160px; }
.pk-status { font-weight: 500; }
.pk-status.is-blue  { background-color: var(--blue-soft);  color: var(--blue-text); border-color: transparent; }
.pk-status.is-green { background-color: var(--green-soft); color: var(--green-strong); border-color: transparent; }
.pk-status.is-slate { background-color: var(--slate-soft); color: var(--slate-text); border-color: transparent; }
.pk-acties { text-align: right; white-space: nowrap; }
.pk-acties-wrap { display: inline-flex; gap: 4px; }

/* ============================================================ IP1 — Uit bibliotheek toevoegen
   Eén taak: kiezen wat er uit de bibliotheek in dit project komt, en vooraf zien hoeveel dat is.
   Desktop: een zijpaneel rechts over de processenlijst (zelfde familie als het imp5-zijpaneel);
   telefoon: een lade van onderen (zelfde greep als .pm-sheet). Opbouw: kop → uitleg → branche →
   ketens (uitklapbaar naar groepen) → voet met telling en de ene knop. */
.bl-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(16, 24, 40, .28); }
.bl-paneel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(460px, 100vw);
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: -8px 0 28px rgba(16, 24, 40, .12);
  display: flex; flex-direction: column; min-width: 0; animation: blSchuif .18s ease-out;
  padding-bottom: env(safe-area-inset-bottom, 0px); }
@keyframes blSchuif { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bl-paneel { animation: none; } }
.bl-greep { display: none; }
.bl-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.bl-titel { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; }
.bl-titel .ic { font-size: 18px; color: var(--pri-text); }
.bl-body { flex: 1 1 auto; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.bl-uitleg { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.bl-uitleg b { color: var(--text); font-weight: 600; }
.bl-branches { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-branches .phase-pill { min-height: 32px; }
.bl-lijstkop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.bl-lijstkop-t { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.bl-lijst { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.bl-keten + .bl-keten { border-top: 1px solid var(--border); }
.bl-rij { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px 8px 12px; }
.bl-rij-keten { padding-right: 6px; }
.bl-kies { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left;
  background: transparent; border: none; padding: 6px 4px; min-height: 44px; font: inherit; color: inherit; cursor: pointer;
  border-radius: var(--r-md, 8px); touch-action: manipulation; }
.bl-kies:hover { background: var(--sunken); }
.bl-kies:active { background: var(--pri-soft); }
.bl-kies:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.bl-vink { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border-3); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; }
.bl-vink.is-aan { background: var(--pri); border-color: var(--pri); }
.bl-vink.is-deels { background: var(--pri-soft); border-color: var(--pri); color: var(--pri-text); }
.bl-rij-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.bl-rij-naam { font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.bl-rij-sub { font-size: 12px; color: var(--text-3); }
.bl-rij-tag { flex: none; }
.bl-klap { flex: none; width: 44px; height: 44px; }
.bl-groepen { display: flex; flex-direction: column; background: var(--surface-2); border-top: 1px solid var(--border); }
.bl-rij-groep { padding-left: 40px; border-radius: 0; min-height: 52px; }
.bl-rij-groep + .bl-rij-groep { border-top: 1px solid var(--border); }
.bl-rij-groep .bl-rij-naam { font-weight: 500; font-size: 13px; }
.bl-empty { padding: 24px 12px; font-size: 13px; line-height: 1.5; }
.bl-voet { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px;
  border-top: 1px solid var(--border); background: var(--surface); }
.bl-telling { font-size: 13px; font-weight: 500; color: var(--text); min-width: 0; }
.bl-voet-acties { display: flex; gap: 8px; margin-left: auto; }
.bl-voet .btn { min-height: 40px; }
.bl-bezig { display: flex; flex-direction: column; gap: 10px; padding: 24px 4px; }
.bl-bezig-t { font-size: 14px; font-weight: 600; }
.bl-bezig-s { font-size: 12.5px; color: var(--text-3); }
.bl-balk { height: 8px; border-radius: var(--r-pill); background: var(--sunken); overflow: hidden; }
.bl-balk > span { display: block; height: 100%; background: var(--pri); border-radius: var(--r-pill); transition: width .15s ease-out; }
.bl-klaar { display: flex; flex-direction: column; gap: 10px; padding: 16px 4px; }
.bl-klaar-ic .ic { font-size: 34px; color: var(--green-strong); }
.bl-klaar-t { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.bl-klaar-lijst { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--text-2); }
.bl-klaar-s { margin: 4px 0 0; font-size: 13px; line-height: 1.7; color: var(--text-2); }
/* De chip op de processenrij: zelfde maat als de statuschip ernaast. */
.ov-bib { white-space: nowrap; }

/* ============================================================ IP2 — Mapping bestaand datamodel
   Eén vraag per rij: draait dit proces al in Thinkwise? Links het proces, dan de tabellen die het
   noemt (vinkje = staat in het bestaande datamodel, kruisje = niet), de suggestie met haar reden,
   rechts de drie knoppen. De rij zelf oordeelt niet: de suggestie is uitleg, de knop is de keuze. */
.tw-balk { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tw-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--text-2); min-width: 0; }
.tw-stand-item b { color: var(--text); font-weight: 600; }
.tw-stand-bron { font-size: 12px; flex-basis: 100%; }
.tw-bulk { white-space: nowrap; }
.tw-tabel th:nth-child(1) { width: 22%; }
.tw-tabel th:nth-child(2) { width: 36%; }
.tw-tabel th:nth-child(3) { width: 22%; }
.tw-tabel td { vertical-align: top; }
.tw-proces b { overflow-wrap: anywhere; }
.tw-domein { display: block; font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.tw-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tw-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 6px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 500;
  border: 1px solid transparent; max-width: 100%; overflow-wrap: anywhere; }
.tw-chip .ic { font-size: 12px; flex: none; }
.tw-chip.is-ok { background: var(--green-soft); color: var(--green-strong); }
.tw-chip.is-mis { background: var(--red-soft); color: var(--red); }
.tw-geen { font-size: 12px; }
.tw-delta { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; padding: 6px 10px; border-radius: var(--r-md, 8px);
  background: var(--amber-soft); color: var(--amber-strong); font-size: 12px; line-height: 1.45; }
.tw-delta .ic { flex: none; margin-top: 2px; }
.tw-delta b { font-weight: 600; }
.tw-sug { display: inline-block; padding: 1px 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.tw-sug.is-bestaand { background: var(--pri-soft); color: var(--pri-text); }
.tw-sug.is-nieuw { background: var(--sunken); color: var(--text-2); }
.tw-reden { font-size: 12px; color: var(--text-3); line-height: 1.45; margin-top: 4px; }
.tw-knoppen { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tw-knop { white-space: nowrap; }
.tw-knop.is-actief { background: var(--pri); border-color: var(--pri); color: #fff; }
.tw-status-lbl { font-size: 13px; color: var(--text); }
.tw-rij.is-bestaand .tw-proces b { color: var(--text-2); }
.tw-leeg { max-width: 560px; }

/* ============================================================ IP4 — Aanvullend importeren (samenvoegen)
   Onder de rode strook "Volledig project importeren" staat de rustige tegenhanger: dezelfde
   opbouw (icoon, kop, uitleg, knop) maar in de neutrale toon, want dit vervangt niets. Het rapport
   vooraf is een raster van kaarten, één per entiteit, met drie tellingen (toevoegen / overgeslagen
   / ongeldig) en een uitklapbare lijst met per item de reden. */
.ip4-strook { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; padding: 12px 13px;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.ip4-strook-ic { font-size: 17px; color: var(--pri-text); flex: none; margin-top: 1px; }
.ip4-strook-tekst { flex: 1; min-width: 0; }
.ip4-strook-t { font-size: 13px; font-weight: 600; color: var(--text); }
.ip4-strook-p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-2); line-height: 1.5; max-width: 70ch; }
.ip4-strook-knop { flex: none; white-space: nowrap; }
.ip4-paneel { margin-top: 12px; }
/* Kop: titel links (mag afbreken), sluitkruis rechts op dezelfde regel — ook op de telefoon. */
.ip4-paneel .panel-head { gap: 8px; flex-wrap: nowrap; align-items: flex-start; }
.ip4-paneel .panel-title { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ip4-paneel .panel-head .icontile { flex: none; }
.ip4-bestand { font-weight: 400; font-size: 12.5px; color: var(--text-3); overflow-wrap: anywhere; }
.ip4-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.ip4-uitleg { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-2); max-width: 78ch; }
.ip4-uitleg b { color: var(--text); font-weight: 600; }
.ip4-leeg { display: flex; align-items: center; gap: 8px; padding: 14px 2px; font-size: 13px; }
.ip4-fout { display: flex; gap: 10px; align-items: flex-start; padding: 12px 13px; border-radius: var(--r); background: var(--red-soft); color: var(--red-strong); font-size: 13px; line-height: 1.5; }
.ip4-fout .ic { font-size: 17px; flex: none; margin-top: 1px; }
.ip4-fout ul { margin: 4px 0 0; padding-left: 18px; }
.ip4-fout.is-zacht { background: var(--amber-soft); color: var(--amber-strong); }
.ip4-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ip4-kaart { display: flex; flex-direction: column; gap: 8px; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); min-width: 0; }
.ip4-kaart.is-leeg { opacity: .55; }
.ip4-kaart-kop { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ip4-kaart-kop .ic { font-size: 17px; color: var(--text-3); flex: none; }
.ip4-kaart-t { font-size: 13px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.ip4-tellingen { display: flex; flex-wrap: wrap; gap: 5px; }
.ip4-tel { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--sunken); color: var(--text-2); }
.ip4-tel.is-toe { background: var(--green-soft); color: var(--green-strong); }
.ip4-tel.is-over { background: var(--slate-soft); color: var(--slate-text); }
.ip4-tel.is-fout { background: var(--red-soft); color: var(--red-strong); }
.ip4-klap { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 4px 0; min-height: 28px;
  font: inherit; font-size: 12.5px; color: var(--pri-text); cursor: pointer; }
.ip4-klap:hover { text-decoration: underline; }
.ip4-lijst { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--border); padding-top: 8px; max-height: 260px; overflow: auto; }
.ip4-lijst li { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--text); min-width: 0; }
.ip4-lijst li .ic { font-size: 14px; flex: none; margin-top: 2px; }
.ip4-lijst li > span { min-width: 0; overflow-wrap: anywhere; }
.ip4-lijst li em { font-style: normal; color: var(--text-3); }
.ip4-lijst li.is-toe .ic { color: var(--green-strong); }
.ip4-lijst li.is-over .ic { color: var(--slate-text); }
.ip4-lijst li.is-over > span { color: var(--text-2); }
.ip4-lijst li.is-fout .ic { color: var(--red-strong); }
.ip4-voet { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border); }
.ip4-voet-t { display: flex; flex-wrap: wrap; gap: 5px; }
.ip4-voet-acties { display: flex; gap: 8px; margin-left: auto; }
.ip4-voet-acties .btn { min-height: 36px; }
.ip4-klaar { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.ip4-klaar .ic { font-size: 22px; color: var(--green-strong); flex: none; }
.ip4-klaar b { color: var(--text); font-weight: 600; }
.ip4-res { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ip4-res li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.ip4-res li .ic { font-size: 16px; color: var(--text-3); flex: none; }
.ip4-res-l { flex: 1 1 160px; min-width: 0; color: var(--text); }
.ip4-res-t { display: flex; flex-wrap: wrap; gap: 5px; margin-left: auto; }
/* De handleiding op Projectkennis: een uitklapblok onder de lijst, drie genummerde stappen. */
.pk-handleiding { margin-top: 16px; }
.pk-handleiding-kop { display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--text); min-height: var(--touch, 44px); }
.pk-handleiding-kop::-webkit-details-marker { display: none; }
.pk-handleiding-kop > .ic { font-size: 18px; color: var(--pri-text); flex: none; }
.pk-handleiding-kop > span { flex: 1; min-width: 0; }
.pk-handleiding-pijl { color: var(--text-3); transition: transform .15s ease-out; }
.pk-handleiding[open] .pk-handleiding-pijl { transform: rotate(180deg); }
.pk-handleiding-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--border); padding-top: 14px; }
.pk-handleiding-lead, .pk-handleiding-later { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-2); max-width: 78ch; }
.pk-handleiding-later { display: flex; gap: 8px; align-items: flex-start; color: var(--text-3); }
.pk-handleiding-later .ic { flex: none; margin-top: 2px; }
.pk-stappen { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pk-stappen li { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.pk-stappen li > div { min-width: 0; }
.pk-stappen b { color: var(--text); font-weight: 600; }
.pk-stappen code { font-size: 12px; padding: 1px 5px; border-radius: 4px; background: var(--sunken); color: var(--text); }
.pk-stap-nr { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--pri-soft); color: var(--pri-text); font-size: 12px; font-weight: 600; margin-top: 1px; }
.pk-handleiding-link { color: var(--pri-text); font-weight: 500; text-decoration: underline; }
/* ============================================================ IP5 — Intake per klanttype
   De tenantintake volgt het pad van het type. Eén balk bovenaan (gedaan / nu / komt) en vier
   padstappen die elk één ding doen en in één knop eindigen. De mapping hergebruikt de chips,
   suggestiepil en knoppen van de IP2-werkbank (tw-*), als kaart per proces. */
.tin-pad-balk { max-width: 100%; }
.tin-pad-stap { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tin-pad-melding { margin: 0 0 12px; font-size: 13px; }
.tin-pad-uitleg { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); max-width: 90ch; }
.tin-pad-uitleg b { color: var(--text); font-weight: 600; }
.tin-pad-leeg { font-size: 13px; padding: 6px 0; }
.tin-pad-voet { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tin-pad-feiten { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 13px; }
.tin-pad-feiten dt { color: var(--text-3); font-weight: 500; }
.tin-pad-feiten dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.tin-pad-link { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.tin-pad-link > .ic { color: var(--pri-text); flex: none; }
.tin-pad-link-t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; font-size: 13px; }
.tin-pad-link-t .muted { font-size: 12px; overflow-wrap: anywhere; }
.tin-pad-linkbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: 10px; align-items: end; margin-top: 12px; }
.tin-pad-veld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tin-pad-veld .input { width: 100%; min-width: 0; }
.tin-pad-branches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tin-pad-branches .phase-pill { min-height: 32px; }
.tin-pad-lijst { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-top: 6px; }
.tin-pad-rij { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; text-align: left; width: 100%;
  background: transparent; border: none; font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
.tin-pad-rij + .tin-pad-rij { border-top: 1px solid var(--border); }
.tin-pad-rij:hover { background: var(--sunken); }
.tin-pad-rij:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--ring); }
.tin-pad-vink { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border-3); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; }
.tin-pad-vink.is-aan { background: var(--pri); border-color: var(--pri); }
.tin-pad-rij-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.tin-pad-rij-naam { font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.tin-pad-rij-sub { font-size: 12px; color: var(--text-3); }
.tin-pad-rij-tag { flex: none; }
.tin-pad-telling { margin-top: 12px; font-size: 13px; color: var(--text-2); }
.tin-pad-telling b { color: var(--text); font-weight: 600; }
.tin-pad-leegstand { margin: 12px auto; max-width: 560px; }
.tin-pad-map { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 8px 14px; align-items: start; }
.tin-pad-map-kop { display: flex; flex-direction: column; min-width: 0; }
.tin-pad-map-kop b { overflow-wrap: anywhere; }
.tin-pad-map-sug { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tin-pad-map-sug .tw-reden { margin-top: 0; }
.tin-pad-map.is-bestaand .tin-pad-map-kop b { color: var(--text-2); }

/* ============================================================ Klant opzetten (startscherm tenantintake)
   Eén scherm, één taak: alles wat je al weet in zes onderdelen klaarzetten en de omgeving
   aanmaken. Links een plakkende zijbalk met de checklist en de knop; rechts de zes panelen.
   Ontwerp: "Onboarding klant opzetten" (Claude Design, sep 2026). */
.tin-ob { display: grid; grid-template-columns: 284px minmax(0, 1fr); gap: 20px; align-items: start; }
.tin-ob-rail { position: sticky; top: calc(var(--topbar-h, 58px) + 8px); display: flex; flex-direction: column; gap: 4px;
  padding: 18px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh); }
.tin-ob-rail-h { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.tin-ob-rail-sub { font-size: 12.5px; color: var(--text-3); min-height: 18px; overflow-wrap: anywhere; }
.tin-ob-bar { margin: 12px 0 14px; }
.tin-ob-bar .bar-fill { background: var(--pri); transition: width .2s ease-out; }
.tin-ob-bar-t { font-size: 11.5px; color: var(--text-3); margin-top: 6px; }
.tin-ob-lijst { display: flex; flex-direction: column; gap: 2px; }
.tin-ob-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: var(--r); min-height: 44px;
  color: inherit; text-decoration: none; }
.tin-ob-item:hover { background: var(--sunken); }
.tin-ob-item.on { background: var(--pri-soft); }
.tin-ob-n { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1px solid var(--border-3); background: var(--surface);
  color: var(--text-3); font-size: 11.5px; display: inline-flex; align-items: center; justify-content: center; }
.tin-ob-item.on .tin-ob-n { background: var(--pri); border-color: var(--pri); color: #fff; font-weight: 600; }
.tin-ob-item.done .tin-ob-n { background: var(--green-soft); border-color: transparent; color: var(--green-strong); }
.tin-ob-item-b { display: flex; flex-direction: column; min-width: 0; }
.tin-ob-item-l { font-size: 13px; font-weight: 500; color: var(--text-2); }
.tin-ob-item.on .tin-ob-item-l, .tin-ob-item.done .tin-ob-item-l { color: var(--text); }
.tin-ob-item.on .tin-ob-item-l { font-weight: 600; }
.tin-ob-item-s { font-size: 11.5px; color: var(--text-3); overflow-wrap: anywhere; }
.tin-ob-maak { margin-top: 14px; width: 100%; justify-content: center; min-height: var(--touch); }
.tin-ob-maak[disabled] { opacity: .5; cursor: not-allowed; }
.tin-ob-hint { font-size: 11.5px; color: var(--text-3); margin-top: 7px; line-height: 1.45; }
.tin-ob-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.tin-ob-alt.tin-pads-wacht .btn { opacity: .55; }
.tin-ob-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tin-ob-main > .panel, .tin-ob-main > .iw-startform, .tin-ob-main > .iw-resume { margin: 0; }
.tin-ob-hint-regel { display: flex; align-items: flex-start; gap: 7px; margin-top: 11px; color: var(--text-3); font-size: 12.5px; line-height: 1.45; }
.tin-ob-hint-regel > .ic { flex: none; margin-top: 2px; }
.tin-ob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.tin-ob-vera { background: var(--sunken); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; margin-top: 16px; }
.tin-ob-vera-kop { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.tin-ob-vera-kop .iw-vera-avatar { width: 26px; height: 26px; }
.tin-ob-vera-kop .iw-vera-avatar .ic { font-size: 13px; }
.tin-ob-vera p { margin: 6px 0 0; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.tin-ob-vera .textarea { margin-top: 11px; }
.tin-ob-keuzes { display: flex; flex-direction: column; gap: 8px; }
.tin-ob-keuze { display: flex; gap: 11px; align-items: flex-start; width: 100%; min-height: 56px; text-align: left; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: inherit; font: inherit; cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease; }
.tin-ob-keuze:hover { border-color: var(--border-3); }
.tin-ob-keuze.is-aan { border-color: var(--pri); box-shadow: 0 0 0 3px var(--ring); }
.tin-ob-keuze[disabled] { opacity: .55; cursor: not-allowed; }
.tin-ob-keuze:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.tin-ob-radio { width: 16px; height: 16px; flex: none; margin-top: 2px; border-radius: 50%; border: 1px solid var(--border-3); background: var(--surface); box-sizing: border-box; }
.tin-ob-keuze.is-aan .tin-ob-radio { border: 5px solid var(--pri); }
.tin-ob-keuze-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tin-ob-keuze-t { font-size: 13.5px; font-weight: 600; }
.tin-ob-keuze-s { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.tin-ob-sub { padding: 2px 0 6px 27px; }
.tin-ob-rij { align-items: center; }
.tin-ob-rij > .ic { color: var(--pri-text); flex: none; }
.tin-ob-rij-n { font-size: 11.5px; white-space: nowrap; }
.tin-ob-avatar { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--slate-soft); color: var(--slate-text);
  font-size: 10.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.tin-ob-teambar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, .8fr) auto; gap: 8px; align-items: end; margin-top: 12px; }
.tin-ob-teambar .select { width: 100%; }
.tin-ob-waarsch { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; color: var(--amber-strong); font-size: 12.5px; line-height: 1.45; }
.tin-ob-waarsch > .ic { flex: none; margin-top: 2px; }
.tin-ob-punten { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.tin-ob-punt { display: flex; gap: 9px; }
.tin-ob-punt > .ic { color: var(--green-strong); flex: none; margin-top: 2px; }
.tin-ob-akkoord { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--touch); margin-top: 12px; padding: 12px 14px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--sunken); color: inherit; font: inherit; cursor: pointer; transition: border-color .12s ease; }
.tin-ob-akkoord.is-aan { border-color: var(--pri); }
.tin-ob-akkoord:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.tin-ob-vink { width: 17px; height: 17px; flex: none; border-radius: 4px; border: 1px solid var(--border-3); background: var(--surface); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; box-sizing: border-box; }
.tin-ob-akkoord.is-aan .tin-ob-vink { background: var(--pri); border-color: var(--pri); }
.tin-ob-akkoord-t { font-size: 13px; line-height: 1.45; }
.tin-ob-tw-stand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border: 1px dashed var(--border-3); border-radius: var(--r-lg); font-size: 13px; line-height: 1.45; }
.tin-ob-tw-stand > .ic { color: var(--pri-text); flex: none; }
.tin-ob-tw-stand > span { flex: 1 1 240px; min-width: 0; }
/* Tablet: de zijbalk boven de panelen, de checklist als één rij chips die scrolt. */
@media (max-width: 880px) {
  .tin-ob { grid-template-columns: 1fr; gap: 14px; }
  .tin-ob-rail { position: static; }
  .tin-ob-lijst { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 0 -4px; padding: 2px 4px; scrollbar-width: none; }
  .tin-ob-lijst::-webkit-scrollbar { display: none; }
  .tin-ob-item { flex: none; align-items: center; min-height: 40px; padding: 6px 12px 6px 6px; border: 1px solid var(--border); border-radius: var(--r-pill); }
  .tin-ob-item.on { border-color: transparent; }
  .tin-ob-item-s { display: none; }
  .tin-ob-maak { margin-top: 12px; }
}

/* ============================================================ mobiel (≤ 640px)
   De tabel wordt door mobielTabel.js een kaart per bestand; hier alleen wat de kaart en de
   invoer nodig hebben. Eén kolom, knoppen op volle breedte, acties rechts op de kaart. */
@media (max-width: 640px) {
  /* IP1: het zijpaneel wordt een lade van onderen, boven de app-onderbalk, met de bekende greep. */
  .bl-paneel { top: auto; left: 0; right: 0; bottom: 0; width: 100vw; max-height: 88svh;
    border-left: 0; border-top: 1px solid var(--border); border-radius: 14px 14px 0 0;
    box-shadow: 0 -4px 16px rgba(16, 24, 40, .10); animation: pmSheet .18s ease-out; }
  @media (prefers-reduced-motion: reduce) { .bl-paneel { animation: none; } }
  .bl-greep { display: flex; margin-top: 4px; }
  .bl-kop { padding: 4px 12px 10px 16px; }
  .bl-body { padding: 12px 16px; }
  .bl-uitleg { font-size: 14px; }
  .bl-rij-naam { font-size: 14px; }
  .bl-rij-sub, .bl-bezig-s { font-size: 12px; }
  .bl-rij-groep { padding-left: 28px; }
  .bl-voet { flex-direction: column; align-items: stretch; }
  .bl-voet-acties { margin-left: 0; }
  .bl-voet-acties .btn { flex: 1 1 0; justify-content: center; min-height: var(--touch); }
  .bl-branches .phase-pill { min-height: 36px; }
  /* De toolbar-knoppen op Processen staan op de telefoon al onder elkaar; deze krijgt gewoon de rij. */
  .pk-uitleg { font-size: 14px; padding: 12px 14px; }
  .pk-sub, .pk-dz-hint { font-size: 12px; }
  .pk-dropzone { padding: 18px 12px; }
  .pk-linkbar { grid-template-columns: 1fr; gap: 8px; }
  .pk-linkknop { width: 100%; justify-content: center; }
  .pk-panel .panel-head-right .btn { width: 100%; justify-content: center; }
  .pk-panel .panel-head-right { width: 100%; }
  .pk-opm .pk-opm-input { min-width: 0; }
  /* Op de kaart: downloaden links, verwijderen rechts — een destructieve knop hoort niet naast
     de primaire (rulebook §3), en de kaartbreedte geeft die ruimte gratis. */
  .pk-table th:nth-child(5), .pk-opm { width: auto; }
  /* In de chips-kaart is een cel inline-flex met width:auto; de actiecel moet de volle regel zijn. */
  .pk-table.dz-cards td.pk-acties { display: flex; width: 100%; max-width: 100%; }
  .pk-acties-wrap { display: flex; flex: 1 1 auto; width: 100%; justify-content: space-between; gap: 8px; }
  .pk-acties-wrap .icontile:only-child { margin-left: auto; }
  /* IP2: de werkbank wordt een kaart per proces (dz-cards-breed via mobielTabel.js). De cel met
     de tabellen en de cel met de knoppen zijn te breed voor "label links, waarde rechts": die
     krijgen het label erboven en de volle breedte; de drie knoppen worden aanraakbaar. */
  .tw-balk { flex-direction: column; align-items: stretch; }
  .tw-stand { font-size: 13.5px; }
  .tw-bulk { width: 100%; justify-content: center; min-height: var(--touch); }
  .tw-tabel th:nth-child(1), .tw-tabel th:nth-child(2), .tw-tabel th:nth-child(3) { width: auto; }
  .tw-tabel.dz-cards td.tw-tabellen, .tw-tabel.dz-cards td.tw-suggestie, .tw-tabel.dz-cards td.tw-statuscel { display: block; }
  .tw-tabel.dz-cards td.tw-tabellen::before, .tw-tabel.dz-cards td.tw-suggestie::before, .tw-tabel.dz-cards td.tw-statuscel::before { display: block; margin-bottom: 4px; }
  .tw-tabel.dz-cards td.tw-tabellen > .tw-chips, .tw-tabel.dz-cards td.tw-tabellen > .tw-delta { width: 100%; }
  .tw-chip { font-size: 12px; min-height: 28px; }
  .tw-reden, .tw-delta { font-size: 12.5px; }
  .tw-knoppen { display: flex; width: 100%; gap: 6px; }
  .tw-knop { flex: 1 1 0; justify-content: center; min-height: var(--touch); white-space: normal; }
  .tw-knop:last-child { flex: 1.6 1 0; } /* "Bestaand, gewijzigd" is het langste woord van de drie */
  /* De kaarttitel maakt elk kind inline (styles.css); het domein hoort op zijn eigen regel onder de naam. */
  .tw-tabel.dz-cards td.tw-proces > .tw-domein { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0; margin-top: 3px; }
  /* IP4: de strook stapelt (icoon en tekst boven, knop eronder op volle breedte), het rapport
     wordt één kolom kaarten, de knoppen in de voet nemen de volle breedte en zijn aanraakbaar. */
  .ip4-strook { flex-wrap: wrap; }
  .ip4-strook-tekst { flex-basis: calc(100% - 29px); }
  .ip4-strook-p { font-size: 13px; }
  .ip4-strook-knop { width: 100%; justify-content: center; min-height: var(--touch); }
  .ip4-body { padding: 12px 14px 14px; }
  .ip4-uitleg, .ip4-kaart-t, .ip4-lijst li, .ip4-klaar, .ip4-res li { font-size: 14px; }
  .ip4-kaarten { grid-template-columns: 1fr; }
  .ip4-tel { font-size: 12px; min-height: 24px; }
  .ip4-klap { min-height: var(--touch); font-size: 13.5px; }
  .ip4-bestand { flex-basis: 100%; }
  /* Resultaat: label op zijn eigen regel, de tellingen eronder ingesprongen onder het label. */
  .ip4-res li { align-items: flex-start; row-gap: 4px; }
  .ip4-res-l { flex: 1 1 auto; }
  .ip4-res-t { flex-basis: 100%; margin-left: 0; padding-left: 24px; }
  .ip4-voet { flex-direction: column; align-items: stretch; }
  .ip4-voet-acties { margin-left: 0; flex-direction: column-reverse; }
  .ip4-voet-acties .btn { width: 100%; justify-content: center; min-height: var(--touch); }
  .pk-handleiding-kop { font-size: 15px; }
  .pk-stappen li, .pk-handleiding-lead, .pk-handleiding-later { font-size: 14px; }
  /* IP5: de stappenbalk scrolt horizontaal (hscroll-tabs) in plaats van te wrappen tot vier regels;
     de knoppen in de voet komen onder elkaar op volle breedte; de mapping-kaart wordt één kolom. */
  .tin-pad-balk { flex-wrap: nowrap; overflow-x: auto; margin-left: -4px; padding: 2px 4px; }
  .tin-pad-stap { min-height: 32px; padding: 4px 10px; font-size: 13px; }
  .tin-pad-uitleg, .tin-pad-leeg, .tin-pad-telling, .tin-pad-feiten, .tin-pad-melding { font-size: 14px; }
  .tin-pad-feiten { grid-template-columns: 1fr; gap: 2px; }
  .tin-pad-feiten dt { margin-top: 6px; font-size: 12px; }
  .tin-pad-voet { flex-direction: column; }
  .tin-pad-voet .btn { width: 100%; justify-content: center; min-height: var(--touch); }
  .tin-pad-linkbar { grid-template-columns: 1fr; gap: 8px; }
  .tin-pad-linkbar .btn { width: 100%; justify-content: center; min-height: var(--touch); }
  .tin-pad-branches .phase-pill { min-height: 36px; }
  .tin-pad-rij-naam { font-size: 14px; }
  .tin-pad-map { grid-template-columns: 1fr; gap: 8px; }
  .tin-pad-map .tw-knoppen { display: flex; width: 100%; gap: 6px; }
  .tin-pad-map .tw-knop { flex: 1 1 0; justify-content: center; min-height: var(--touch); white-space: normal; }
  /* Klant opzetten: één kolom velden, teamrij en link-balk gestapeld met knoppen op volle
     breedte, leesbare maten voor de keuzekaarten en het akkoord; de lijstrijen wrappen. */
  .tin-ob-grid { grid-template-columns: 1fr; gap: 10px; }
  .tin-ob-teambar { grid-template-columns: 1fr; gap: 8px; }
  .tin-ob-teambar .btn, .tin-ob-tw-stand .btn { width: 100%; justify-content: center; min-height: var(--touch); margin-left: 0 !important; }
  .tin-ob-keuze-t, .tin-ob-akkoord-t, .tin-ob-item-l { font-size: 14px; }
  .tin-ob-keuze-s, .tin-ob-punten, .tin-ob-vera p, .tin-ob-hint-regel, .tin-ob-waarsch, .tin-ob-hint { font-size: 13px; }
  .tin-ob-sub { padding-left: 0; }
  .tin-ob-rij { flex-wrap: wrap; }
  .tin-ob-rij .tin-pad-link-t { flex-basis: calc(100% - 110px); }
  .tin-ob-rij-n { flex-basis: 100%; padding-left: 36px; }
  .tin-ob-akkoord { align-items: flex-start; }
  .tin-ob-akkoord .tin-ob-vink { margin-top: 2px; }
  .tin-ob-alt .btn { min-height: 40px; }
}