/* ===========================================================================
 * portefeuille.css — de vorm van de portefeuillepagina's (#1295, #1296)
 * ---------------------------------------------------------------------------
 * DOELPAD  public/portefeuillemodules/portefeuille.css
 *
 * DIT BESTAND DRAAGT GEEN ENKELE KLEURWAARDE
 *   De tokens en de letters komen uit kaart-viewer.css -- dat bestand staat
 *   ervóór in de <head> en draagt het palet 3a "Kalk", de @font-face-regels én
 *   de contrasttabel waarin elk vlak is doorgemeten. Een tweede palet zou
 *   betekenen dat die tabel voor de helft van de site niet meer geldt.
 *
 *   #1295 AC7 vraagt dat letterlijk: "de pagina gebruikt de bestaande tokens uit
 *   kaart-viewer.css; een nieuwe kleur staat in de contrasttabel met zijn
 *   gemeten verhouding." Er staat hier geen nieuwe kleur, dus die tabel houdt
 *   vijf vlakken en hoeft geen zesde.
 *
 * DE TEGELVORM VAN HET PANDPANEEL IS HERGEBRUIKT
 *   Een projectkaart is een tegel: --kv-tegel als vlak, --kv-tegel-lijn als
 *   haarlijn, klein label boven een grote waarde. Dat is dezelfde vorm die de
 *   kaart al gebruikt voor zijn kerngegevens, en de gebruiker komt hier vanaf
 *   die kaart.
 * --------------------------------------------------------------------------- */

/* DE BREEDTE VAN DE ACCOUNTPAGINA'S (6 september 2026)
   De eigenaar, kijkend naar de homepage: "deze breedte vind ik de mooiste, de
   portefeuille schermen en projecten wil ik ook in deze breedte." Die kolom is
   .pp-hero in style.css: 1320 px inclusief 24 px binnenmarge, dus 1272 px
   inhoud. Gemeten stond hier 940 px inhoud in een doos van 988.

   --kv-romp-b (940) blijft ongemoeid. Dat is de leesbreedte van de
   contentpagina's (kennisbank, nieuws, faq) en hij komt uit het design system
   (docs/design/design-system, bewaakt door controleer-designtokens); hem
   ophogen zou elke tekstpagina verbreden, en een regel van 1272 px leest
   slechter, niet beter. Deze pagina's tonen tabellen en tegels naast elkaar --
   daar helpt de breedte wel. */
:root { --pf-romp-b: 1272px; }

* { box-sizing: border-box; }

/* Byte-gelijk aan cockpit.css -- deze pagina's laden dat bestand niet, en de
   verborgen <h1> op /gesprekken (#1565 §2a) heeft hem nodig. Op pandcockpit.html
   (dat beide stylesheets laadt) is dit een onschadelijk dubbel: zelfde regel,
   cockpit.css laadt erna en wint zonder verschil. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

html, body {
  margin: 0;
  min-height: 100%;
  color: var(--kv-inkt);
  font-family: var(--kv-font);
  font-size: 15px;
  line-height: 1.5;
}
/* #1563: html draagt de kleur, body wordt transparant -- zelfde fix als #1546
   op de cockpit (cockpit.css r.36-60). html EN body op --kv-papier liet body
   zijn eigen, niet-transparante vlak schilderen NA een negatieve z-index-
   nakomeling (CSS2.1 App. E), waardoor #pf-achtergrond onzichtbaar bleef.
   Pixeltest: zonder deze splitsing rgb(242,242,240), met de splitsing en het
   decor (§ verderop) weg rgb(253,1,253). */
html { background: var(--kv-papier); }
body { background: transparent; }

/* --- Kopbalk: de vorm van sd-nav op /taxatie (#1596), volle breedte (#1596-
   vervolg, 4 sep 2026) ---------------------------------------------------
   Was een zwevende kaart (margin 18/24/12, eigen rand, radius, schaduw) --
   #1596 vraagt "strak tegen de bovenkant", naar het voorbeeld van sd-nav
   ([data-sd-nav] in splitify-design.css). .pf-balk BLIJFT bestaan (met
   #pf-account/#pf-uitloggen en de navigatie tussen de accountpagina's): de
   gedeelde nav (public/splitify-shared.js) kent geen accountstand en wordt
   door ~190 pagina's geladen, dus overstappen zou functionaliteit wegnemen
   en een gedeeld component op een schaal raken die dit werkitem niet dekt.

   Gemeten tegen sd-nav (Chrome, /taxatie.html):
     hoogte:      var(--header-height) = var(--kv-balk-h) = 54px  -- .pf-balk
                  droeg dat getal al via min-height, dus dat blijft gelijk.
     typografie:  .sd-nav__brand is 15px/600/uppercase, letter-spacing .24em
                  (--spatie-merk). .pf-merk .pf-woord droeg dat getal al
                  hardgecodeerd (regel hieronder) -- geen wijziging nodig.
     positie:     sd-nav's ouder ([data-sd-nav]) is sticky, top:0, geen
                  marge, achtergrond kv-paneel, border-bottom. Dat patroon
                  hieronder overgenomen: sticky in plaats van relative, geen
                  margin-top/bottom meer, border-bottom in plaats van een rand
                  rondom, geen radius/schaduw (dat leest als een zwevende
                  kaart, niet als chrome strak tegen de rand).

   VOLLE BREEDTE, GECENTREERDE INHOUD (#1596-vervolg)
     "de balk moet over hele breedte" -- de eerste versie centreerde het VLAK
     zelf op de 988px-plafond (max-width + margin:0 auto op .pf-balk), dus de
     achtergrond stopte bij 988px in het midden van het scherm in plaats van
     van rand tot rand te lopen, exact zoals [data-sd-nav] dat WEL doet (het
     vlak is volledig breed, alleen .sd-nav erbinnen centreert op
     --container-max). Zelfde split hier: .pf-balk draagt alleen sticky,
     hoogte en achtergrond; .pf-balk-binnen (nieuw, child) draagt de
     plafondformule en de flexrij. Omdat .pf-balk zelf geen margin:auto meer
     heeft, is de eerder hier gemeten margin-auto-valstrik (CSS Flexbox §8.3,
     auto-marges op de dwarse as negeren align-items:stretch) niet meer van
     toepassing: .pf-balk is een gewoon flex-item van body (kolomflex) zonder
     auto-marge en stretcht dus vanzelf vol -- gemeten in Chrome/768px:
     768px, niet de eerder gemeten 598,8px die de valstrik veroorzaakte. */
.pf-balk {
  position: sticky; top: 0; z-index: 20; flex: none;
  /* min-height, niet height (#1550): een vaste hoogte knelt bij 200% vergroten
     (SC 1.4.4) zodra de inhoud meer ruimte vraagt dan 54px. Bij de normale
     eenregelige inhoud is dat gelijk aan sd-nav's var(--header-height). */
  min-height: var(--kv-balk-h);
  background: var(--kv-paneel); border-bottom: var(--kv-lijn);
}
.pf-balk-binnen {
  display: flex; align-items: center; gap: 14px;
  min-height: var(--kv-balk-h);
  /* Dezelfde plafond-formule als .pf-app (AC1/AC2, #1596): de rand van de
     balk-inhoud valt zo samen met de rand van de romp eronder. */
  max-width: calc(var(--pf-romp-b) + 2 * var(--kv-marge-scherm));
  margin: 0 auto;
  padding: 0 var(--kv-marge-scherm);
}
/* HET WOORDMERK REKT ZICH EEN KEER UIT, EN BLIJFT DAN STAAN
 *
 * Dit ademde: van .10em naar .34em en terug, 7s per cyclus, oneindig.
 * Eigenaar, 10 september 2026: "splitify logo blijft bewegen nog op portefeuille
 * pagina, die moet 1 keer animeren zoals op home." Dus dezelfde vorm als
 * .app-header--licht .app-header__title in homemodules/home-hero.css: bij het
 * laden schuiven de letters uit elkaar tot --spatie-merk (.24em) en daar blijven
 * ze. Negen pagina's laden dit bestand, dus het geldt overal waar dit merk
 * staat.
 *
 * Twee dingen die niet vanzelf goed gaan, en die dus meeverhuizen:
 *
 * 1. DE STREEP. letter-spacing zet ook ruimte ACHTER de laatste letter; zonder
 *    compensatie loopt de groene lijn daar overheen. De negatieve margin-right
 *    loopt precies mee, dus de lijn is in elke fase exact zo breed als het woord.
 *
 * 2. DE BUREN. `width: max-content` bevriest de breedte NIET -- SPLITIFY heeft
 *    acht letters, dus zeven zichtbare tussenruimtes die allemaal meegroeien.
 *    Gemeten in Chrome op 5 september 2026: het merk ging van 75,27 naar
 *    100,47 px en de navigatie ernaast schoof exact die 25,20 px mee. De hele
 *    menubalk ademde dus mee.
 *
 *    De container ademt daarom een even grote padding IN terwijl het woord
 *    uitademt. Padding valt buiten de content-box, dus de streep (een flex-kind
 *    dat naar de content-box strekt) blijft het woord volgen, terwijl de
 *    buitenmaat constant blijft. Rekenwerk, met s = letter-spacing:
 *      content    = woord + 7s        (de achtste ruimte haalt de marge weg)
 *      eindmaat   = woord + 7 x .24em = woord + 1.68em
 *      padding(s) = 1.68em - 7s       ->  .02em: 1.54em    .24em: 0
 *    De rustmaat staat op de regels zelf, niet in de keyframes: zet
 *    prefers-reduced-motion de animatie uit, dan staat het merk meteen goed.
 *
 * 3. GEEN var(--spatie-merk) HIER, en dat is geen slordigheid. De negen
 *    pagina's die dit bestand laden krijgen hun tokens uit
 *    kaartmodules/kaart-viewer.css, en --spatie-merk staat daar niet in -- hij
 *    hoort bij de eenenveertig namen die het design system wel beschrijft maar
 *    die nooit naar die bundel zijn gepromoveerd (zie de ratchet in
 *    controleer-designtokens.mjs). Gemeten 10 september 2026: met var() gaf de
 *    browser `letter-spacing: normal` en stond SPLITIFY op 69px in plaats van
 *    op de gespatieerde 94. Vandaar de letterlijke .24em, net als in de versie
 *    hiervoor. De homepage mag var() wel gebruiken: die laadt splitify.css.
 *    font-size staat hier expliciet op 15px zodat em in beide animaties
 *    hetzelfde meet -- de balk zelf staat op 14px. */
/* SC 2.5.8 (AA): klikdoel minimaal 24x24 CSS-px. Gemeten (Chrome, isMobile,
   320/375/390x844) 104x22 -- de twee flex-kinderen (woord + streep) plus de
   5px gap kwamen 2px tekort. padding-block groeit de eigen box zonder de
   breedte- of letter-spacing-animatie hierboven te raken (die rekent alleen
   met em's op de horizontale as). */
.pf-merk {
  display: flex; flex-direction: column; gap: 5px;
  text-decoration: none; flex: none;
  font-size: 15px;
  width: max-content;
  padding-block: 2px;
  padding-right: 0;
  animation: pf-merk-ruimte 1.1s cubic-bezier(.22, .61, .36, 1) both;
}
.pf-merk .pf-woord {
  font-size: 1em; font-weight: 600; line-height: 1; color: var(--kv-inkt);
  white-space: nowrap;
  letter-spacing: .24em;
  margin-right: -.24em;
  animation: pf-merk-adem 1.1s cubic-bezier(.22, .61, .36, 1) both;
}
.pf-merk .pf-streep { height: 1.5px; background: var(--kv-accent); }

@keyframes pf-merk-adem {
  from { letter-spacing: .02em; margin-right: -.02em; }
  to   { letter-spacing: .24em; margin-right: -.24em; }
}
@keyframes pf-merk-ruimte {
  from { padding-right: 1.54em; }
  to   { padding-right: 0; }
}

/* De systeemvoorkeur wint: geen uitrekking, meteen de rustmaat. Die staat al op
 * de regels hierboven, dus animatie uitzetten volstaat. */
@media (prefers-reduced-motion: reduce) {
  .pf-merk,
  .pf-merk .pf-woord { animation: none; }
}
.pf-nav { display: flex; gap: 4px; margin-left: 8px; }
.pf-nav a {
  font-size: 13px; color: var(--kv-inkt-mat); text-decoration: none;
  padding: 6px 10px; border-radius: var(--kv-radius-klein);
}
.pf-nav a:hover { background: var(--kv-chip); }
.pf-nav a[aria-current="page"] { color: var(--kv-accent); font-weight: 600; }
.pf-balk-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pf-account { font-size: 12.5px; color: var(--kv-inkt-zacht); max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- De kop (titel + ondertitel, op /pand ook terugknop + chips), gedeeld
   over vier pagina's (#1570 §3.3) ------------------------------------------
   Was een donkergroene band (eigen achtergrond, verhuisd uit cockpit.css bij
   #1570). #1596-vervolg (4 sep 2026), de eigenaar: "de groene balk mag wel
   weg, zorg dat het als 1 geheel voelt" -- dit draait de kleurkeuze bewust
   terug (3 sep vroeg dezelfde eigenaar nog om "iets met dat mooie donkergroen
   bovenaan"; dat wordt hier niet als fout opgeschreven). De kop staat nu
   zonder eigen vlak op de papieren ondergrond van .pf-app, direct onder de
   balk -- dezelfde vorm als de titel op /taxatie (.tx-title in .container,
   geen eigen band eromheen). De klassenamen blijven ongewijzigd: cockpit.js,
   overzicht.js, gesprekken.js en project.js vullen ze allemaal; een
   naamswissel zou vier scripts raken voor een zuiver visuele wens. */
.ck-kopband {
  padding: 0;
  min-height: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ck-kopband--rustig { min-height: auto; }
/* SC 2.5.8 (AA): klikdoel minimaal 24x24 CSS-px. Gemeten (Chrome, isMobile,
   320/375/390x844) 117x20 -- tekst zonder eigen box haalde de hoogte niet.
   inline-block + 4px verticale padding maakt er ~13x1,2 + 8 = ~24px van. */
.ck-terug-knop {
  display: inline-block;
  padding: 4px 0;
  color: var(--kv-inkt-zacht);
  text-decoration: none;
  font-size: 13px;
  align-self: flex-start;
}
.ck-terug-knop:hover { color: var(--kv-accent-diep); }
/* --kv-accent-diep op --kv-papier haalt 8,03:1 (eis 3:1) -- gemeten in
   kaart-viewer.css r.1175, hergebruikt, geen nieuwe kleurwaarde. */
.ck-terug-knop:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: 2px; color: var(--kv-accent-diep); }
.ck-titel {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -.03em;
  margin: 0;
  min-height: 28px;
  color: var(--kv-inkt);
}
.ck-titel--mono { font-family: var(--kv-font-mono); font-size: 18px; }
.ck-ondertitel { color: var(--kv-inkt-zacht); font-size: 14px; margin: 0; min-height: 18px; }
.ck-chips-kop { display: flex; gap: 8px; flex-wrap: wrap; }
.ck-status-chip, .ck-bag-chip {
  display: inline-flex;
  align-items: center;
  background: var(--kv-chip);
  color: var(--kv-inkt-mat);
  border: 1px solid var(--kv-chip-rand);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
}
.ck-bag-chip { font-family: var(--kv-font-mono); overflow-wrap: anywhere; }

/* --- Romp ---------------------------------------------------------------- */
/* --- DE ACHTERGROND: HET GEDEELDE KAVELWEEFSEL (#1563) ----------------------
 * Het statische kaartdecor (32 PDOK-tegels, ~1,2 MB, tweede externe herkomst
 * naast unpkg) is vervangen door het weefsel dat de pandcockpit al gebruikt --
 * zelfde beeldtaal, één module, geen kopie (core/code-reuse.md). Weghalen was
 * hier een VOORWAARDE en geen opruiming ernaast: het decor stond op
 * `z-index: 0` en dekte daarmee elk canvas op `z-index: -1` af, ongeacht de
 * html/body-splitsing hierboven. Pixeltest: decor weg + splitsing =
 * rgb(253,1,253); decor blijft + splitsing = rgb(242,242,240) (onzichtbaar). */
#pf-achtergrond {
  position: fixed; inset: 0; z-index: -1;
  width: 100%; height: 100%; pointer-events: none;
}

/* --- DE ROMP: ÉÉN VORM VOOR VIER PAGINA'S (#1570) ---------------------------
 * #1565 gaf /portefeuille en /gesprekken elk een tweekolomsraster (inhoud +
 * rail van 320px). #1570 haalt de rail weg: de eigenaar wil de handelingen
 * (nieuw, weergave, archief) boven de tabel en de kolom weg, ook op
 * /gesprekken en de pandcockpit. Zonder rail is er nog maar één kolom nodig,
 * en dus ook maar één formule voor alle vier de accountpagina's
 * (/portefeuille, /gesprekken, /pand, /portefeuille/<id>):
 *
 *   inhoud : var(--pf-romp-b)                                   = 1272px
 *   plafond: calc(var(--pf-romp-b) + 2 * var(--kv-marge-scherm)) = 1320px
 *   marge  : auto (gecentreerd -- #1596 draait de #1570-keuze "links
 *            uitgelijnd" terug, op verzoek van de eigenaar, 4 sep 2026)
 *   afstand: gap 12px, en 12px boven .pf-app zodra de balk (nu sticky, geen
 *            eigen margin meer) niet meer zelf de ruimte erboven opent --
 *            hetzelfde getal als zijn oude margin-bottom.
 *
 * DE VALSTRIK BLIJFT IN DE FORMULE
 *   `* { box-sizing: border-box }` (hierboven) rekent de padding binnen
 *   max-width. Zonder `+ 2 * var(--kv-marge-scherm)` levert `940px` in de
 *   praktijk 892px op -- CSS krimpt de inhoud met exact het paddingtekort in
 *   plaats van de max-width te respecteren. Zelf nagemeten, dit kostte al
 *   twee keer 48px (#1565, en opnieuw bij deze wijziging). */
/* #1565-vervolg: "vaste lengte" bleek "tot onderaan het venster vullend" te
   betekenen -- bij weinig of geen inhoud hield de pagina op waar de inhoud
   ophield, en daaronder was het kavelweefsel te zien in plaats van de pagina.
   `body` wordt een kolomflex (net als base.css/style.css/splitify-design.css
   al doen met 100dvh -- dvh i.p.v. vh juist hier, want deze pagina's laden
   ná de balk pas hun inhoud, en vh telt op mobiel de adresbalk mee die dan
   nog in beeld is): de balk blijft zijn eigen (soms wrappende, 54/98px)
   hoogte houden, `.pf-app` krijgt de rest via `flex: 1 0 auto` -- geen vaste
   pixelaftrek nodig, dus geen aparte som per breakpoint. */
html, body { height: auto; min-height: 100%; }
body { display: flex; flex-direction: column; min-height: 100dvh; overflow: visible; }

.pf-app {
  display: flex; flex-direction: column;
  --pf-app-gat: 12px;
  gap: var(--pf-app-gat);
  /* 1 oktober 2026: 12px -> 6px boven. De eigenaar wil "maar een streepje
     achtergrond" tussen de kopbalk en de kaart; 12px las als een bewuste rand,
     6px als een naad. Onderaan dezelfde maat, zodat de kaart het scherm vult
     in plaats van erin te zweven. */
  margin: 6px auto;
  /* width:100% vóór max-width, zelfde valstrik als .pf-balk hierboven: een
     flex-item van `body` (kolomflex) met auto-marges op de dwarse as krimpt
     zonder deze regel naar zijn inhoud i.p.v. te centreren op de bedoelde
     988px-breedte -- CSS Flexbox §8.3 negeert stretch zodra de marge auto is. */
  width: 100%;
  max-width: calc(var(--pf-romp-b) + 2 * var(--kv-marge-scherm));
  padding: 0 var(--kv-marge-scherm) 24px;
  position: relative; z-index: 1;
  flex: 1 0 auto;
}

/* Het overzicht leent de tegels van het pandpaneel. Wat het niet leent is de
 * standaard linkopmaak: een onderstreepte blauwe regel in een tegel breekt het
 * beeld. De naam is de waarde van de tegel en hoort er ook zo uit te zien. */
/* #1565 §8: 116px vrijloop onder voor de plakkende actiebalk (56/98px
   gemeten). */
/* Was 116px: dat hing onder een raster dat toen nog 940px breed was en waar
   direct de voettekst onder kwam. In de 1272px-kolom is het een leeg vlak van
   een kwart scherm. */
#pf-werkoverzicht { padding: 0 0 24px; }
#pf-werkoverzicht .kv-tegel-waarde a { color: inherit; text-decoration: none; }
#pf-werkoverzicht .kv-tegel-waarde a:hover { color: var(--kv-accent); }
#pf-werkoverzicht .kv-tegel-waarde a:focus-visible {
  outline: 2px solid var(--kv-accent); outline-offset: 2px; border-radius: 2px;
}
/* #1565 AC2: vier kolommen op de 940-romp (was 2, gebouwd voor het
   kaartpaneel van 478px op de kaart) -- op 767.98px en smaller terug naar
   twee, zelfde grens als .ck-kern-waarden op de cockpit. */
.pf-kerncijfers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 767.98px) {
  .pf-kerncijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pf-werkblad {
  /* Groeit mee met .pf-app, dat zelf `flex: 1 0 auto` in een body-kolomflex van
     100dvh zit. Zonder deze regel vult de PAGINA wel tot onderaan maar het
     zichtbare paneel niet: dan stopt het witte vlak halverwege en zie je het
     weefsel eronder. Gemeld door de eigenaar, 4 sep 2026. */
  flex: 1 0 auto;
  min-width: 0;
  background: var(--kv-paneel); border: var(--kv-lijn);
  border-radius: var(--kv-radius); box-shadow: var(--kv-schaduw);
}
/* Het projectdetail heeft, anders dan het overzicht, geen kinderen die hun
   eigen binnenmaat dragen: de fase-rij, de uitlegrijen (#1585), de blokken en
   hun koppen staan rechtstreeks in het werkblad. Zonder binnenmaat op het
   werkblad zelf plakken de labels en de haarlijnen aan de rand -- gemeten
   5 september 2026 in de browser: main.pf-werkblad padding 0, elke sectie
   padding 0, .pf-uitleg-label op x = paneelrand. De cockpit lost dat op met
   .pf-werkblad--cockpit (22px 20px 40px, cockpit.css); dit is dezelfde maat
   voor dezelfde romp, alleen op de pagina waar het ontbrak. Het overzicht
   (#pf-overzicht) blijft zoals hij is: de KPI-tegels en de tabel dragen hun
   eigen maat en staan bewust tot aan de rand. */
#pf-project.pf-werkblad { padding: 22px 24px 40px; }

/* --- Plakkende elementen en focus (SC 2.4.11, #1565 §8, #1570 §14) ---------
   Zelf gemeten (getBoundingClientRect, 1440/320): .pf-actiebalk 56/98px,
   .pf-rij--kop 29,3/25px, .pf-chat (open) 159/173px. Overreserveren is voor
   deze SC onschadelijk, onderreserveren niet -- vandaar de marge boven op elk
   gemeten getal. Zonder rail is er nog maar één plaksituatie (de sticky
   .pf-actiebalk/.pf-rij--kop bovenaan), dus één reservering voor alle
   pagina's. Alleen #pf-gesprek-blad (de geopende conversatie) draagt zijn
   eigen, grotere ondergrens -- de plakkende invoerbalk (.pf-chat, 173/184px
   gemeten) staat daar altijd onder, ook op >=1024px sinds de rail (en zijn
   eigen .kv-detail-kop-plaksituatie op die breedte) is vervallen. */
.pf-app a, .pf-app button, .pf-app summary,
.pf-app input, .pf-app select, .pf-app textarea,
.pf-app [tabindex]:not([tabindex="-1"]) {
  scroll-margin-block: 56px 116px;
}
#pf-gesprek-blad a, #pf-gesprek-blad button, #pf-gesprek-blad summary,
#pf-gesprek-blad input, #pf-gesprek-blad select, #pf-gesprek-blad textarea,
#pf-gesprek-blad [tabindex]:not([tabindex="-1"]) {
  scroll-margin-block: 56px 184px;
}

/* De <h1> van het projectdetail staat sinds #1570 in de gedeelde kopband
   (.ck-titel); bij het hernomen wisselt project.js hem voor dit invoerveld. */
.pf-titel-invoer {
  font-family: inherit; font-size: 23px; font-weight: 600; letter-spacing: -.03em;
  width: 100%; padding: 2px 8px; border: var(--kv-lijn); border-radius: var(--kv-radius);
  background: var(--kv-wit); color: var(--kv-inkt);
}

/* De handelingenrij van het projectdetail (#1570 AC11): terug-links en
   -acties elk als eigen groep, .pf-tabel-kop's `justify-content:
   space-between` spreidt ze uiteen -- zelfde plek als de controlerij op de
   andere drie pagina's. */
.pf-project-kop { flex-wrap: wrap; row-gap: 8px; }
.pf-project-terug, .pf-project-acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Onomkeerbaar en dus los van de rij: zie #1488/#1570 §5. */
.pf-project-verwijder-rij { margin-top: 28px; padding-top: 28px; border-top: var(--kv-lijn); text-align: right; }

/* --- Knoppen ------------------------------------------------------------- */
.pf-knop {
  /* Geen monospace-kapitalen meer (17 sept 2026). De labelstijl van het
     designsysteem is voor LABELS; op een knop leest 11px uppercase mono als
     een terminal, en dat viel extra op toen de kolom naar 1272px ging. Nu
     de gewone schreefloze tekst, iets groter, met de hoofdletter uit de HTML
     in plaats van uit de CSS. */
  font-family: inherit; font-size: 13px; letter-spacing: 0; text-transform: none;
  color: var(--kv-accent); background: var(--kv-paneel); border: var(--kv-lijn);
  border-radius: var(--kv-radius); padding: 8px 12px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.pf-knop:hover { background: var(--kv-chip); }
.pf-knop[disabled] { opacity: .55; cursor: default; }
/* Een lopende actie (#1545 review-suggestion) zet aria-disabled, nooit
   disabled -- dat laatste is niet focusbaar (SC 2.4.3). Zelfde visuele
   demping als hierboven, op het andere attribuut. */
.pf-knop[aria-disabled="true"] { opacity: .55; cursor: default; }
.pf-knop--sterk { background: var(--kv-accent); color: var(--kv-paneel); border-color: var(--kv-accent); }
.pf-knop--sterk:hover { background: var(--kv-accent-diep); border-color: var(--kv-accent-diep); }
.pf-knop--stil { border-color: transparent; background: transparent; color: var(--kv-inkt-zacht); }
.pf-knop--stil:hover { background: var(--kv-chip); }
/* EEN ONOMKEERBARE ACTIE IS GEEN GELIJKE VAN EEN OMKEERBARE (#1488)
   'Project verwijderen' stond naast 'Naam wijzigen' in exact dezelfde knop:
   zelfde rand, zelfde gewicht, zelfde grootte. Alleen de tekstkleur week af,
   en dat zie je niet. Verwijderen is nu STILLER -- geen rand, geen vlak -- en
   wordt pas rood als je erheen gaat. De bevestiging noemt wat er meeverdwijnt;
   die staat al in verwijderProject(). */
.pf-knop--gevaar {
  color: var(--kv-inkt-zacht);
  background: none;
  border-color: transparent;
}
.pf-knop--gevaar:hover,
.pf-knop--gevaar:focus-visible {
  color: var(--kv-label-g);
  border-color: currentColor;
  background: none;
}

/* --- Fase ---------------------------------------------------------------- */
/* Acht waarden passen niet als chipsrij op een telefoon, dus het is een
   keuzelijst (#1296 AC2b). Wat er staat als er niets gekozen is, is leeg -- niet
   de eerste waarde, want dan zou elk nieuw project stilzwijgend "Onderzoeken"
   heten. */
.pf-fase { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-select, .pf-invoer {
  font-family: inherit; font-size: 13.5px; color: var(--kv-inkt);
  background: var(--kv-wit); border: var(--kv-lijn); border-radius: var(--kv-radius);
  padding: 7px 10px; min-width: 160px;
}
.pf-chip {
  display: inline-flex; align-items: center; padding: 3px 9px;
  font-family: var(--kv-font-mono); font-size: 11px; letter-spacing: .04em;
  background: var(--kv-chip); border: 1px solid var(--kv-chip-rand);
  border-radius: 999px; color: var(--kv-inkt-mat);
}

/* --- Blokken ------------------------------------------------------------- */
/* TWEE KOLOMMEN OP HET PROJECT (6 september 2026)
   Bij de brede kolom (1272 px inhoud) rekte alles uit: de projectpagina werd
   bijna twee schermen lang met blokken van 1272 px breed waarvan de inhoud een
   derde vult. Alleen de VIER LIJSTBLOKKEN gaan in twee kolommen; de velden en
   de objecttabel blijven over de volle breedte staan -- die eerste proef zette
   objecten in een kolom van 610 px en toen brak de tabel af ("'s-Graven...",
   "2561BH - heel pa..."). 1100 px is de grens: daaronder is een kolom smaller
   dan de ~520 px die zo'n lijst nodig heeft.
   De haarlijn tussen twee blokken (.pf-blok + .pf-blok) hoort binnen een
   kolom, dus het eerste blok van elke kolom krijgt er geen. */
.pf-kolommen {
  display: grid; gap: 0;
  /* Zelfde ritme als tussen twee blokken: haarlijn, 28 px eromheen. Zonder dit
     plakte "Taken" tegen de objecttabel. */
  margin-top: 28px; padding-top: 28px; border-top: var(--kv-lijn);
}
.pf-kolom { min-width: 0; }
@media (min-width: 1100px) {
  .pf-kolommen {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
  }
  /* Zonder deze regel erft het eerste blok van de rechterkolom de haarlijn van
     zijn voorganger in de DOM -- die staat nu in de andere kolom. */
  .pf-kolom > .pf-blok:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
}

/* Een tekstveld van 1272 px breed nodigt niet uit om te typen en leest slecht
   terug: de beschrijving en de notitie-invoer houden een leesmaat. */
.pf-uitleg-blok textarea,
.pf-uitleg-blok input[type="text"] { max-width: 720px; }

.pf-blok { margin: 28px 0 0; }
/* #1570 AC11: het projectdetail is sinds deze wijziging secties in ÉÉN
   .pf-werkblad (was: losse .pf-blok's op de volle .pf-romp) -- de haarlijn
   doet het werk dat eerder de losstaande kaartjes deden. Niet op het eerste
   blok: dat hangt al onder de fase-rij. */
.pf-blok + .pf-blok { border-top: var(--kv-lijn); padding-top: 28px; }
.pf-blok-kop {
  font-family: var(--kv-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--kv-inkt-licht); margin: 0 0 10px;
}
.pf-lijst { background: var(--kv-tegel); border: var(--kv-lijn); border-radius: var(--kv-radius); overflow: hidden; }
.pf-regel {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-top: 1px solid var(--kv-tegel-lijn);
  /* Wrap sinds #1301: de verdiepingsregel hoort ONDER het object te staan en
     niet ernaast. Voor de drie bestaande kinderen verandert er niets -- die
     pasten al naast elkaar. */
  flex-wrap: wrap;
}
.pf-regel:first-child { border-top: 0; }
.pf-regel-hoofd { flex: 1 1 auto; min-width: 0; }
.pf-regel-titel { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-regel-sub { font-size: 12.5px; color: var(--kv-inkt-zacht); margin-top: 2px; }

/* De regel die zegt wat Splitify over dit object zou kunnen vertellen (#1301).
   Hij staat onder het object en niet ernaast: het is een toelichting, geen
   knop. Volle breedte binnen de rij, dus grid-column over alles heen. */
.pf-regel-verdieping {
  /* Volle breedte binnen de rij: 100% basis dwingt hem op een eigen regel in de
     flexbox hierboven. */
  flex: 1 0 100%;
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--kv-inkt-licht);
}
.pf-regel-verdieping a { color: var(--kv-accent-diep); }
/* Dezelfde regel als LOSSE mededeling in een tegel (notities, #1520 AC6:
   "zoeken kan nog niet" staat niet in een .pf-regel maar rechtstreeks in
   .pf-lijst). Zonder eigen binnenmaat plakt hij tegen de tegelrand -- gemeten
   5 september 2026 in de browser. Zelfde zijmaat als .pf-regel (14px). */
.pf-lijst > .pf-regel-verdieping { margin: 0; padding: 10px 14px; border-top: 1px solid var(--kv-tegel-lijn); }
.pf-leeg { padding: 22px 14px; color: var(--kv-inkt-zacht); font-size: 14px; text-align: center; }

/* --- Taken --------------------------------------------------------------- */
.pf-taak-af .pf-regel-titel { text-decoration: line-through; color: var(--kv-inkt-licht); font-weight: 400; }
/* Over de datum is herkenbaar maar niet schreeuwend: het label in de accentkleur
   van de labelschaal (--kv-label-g), die in de contrasttabel van
   kaart-viewer.css al is doorgemeten. Geen rood vlak, geen uitroepteken. */
.pf-taak-laat .pf-regel-sub { color: var(--kv-label-g); font-weight: 600; }
.pf-vink {
  width: 18px; height: 18px; flex: none; cursor: pointer;
  accent-color: var(--kv-accent);
}
.pf-taak-nieuw { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--kv-tegel-lijn); flex-wrap: wrap; }
.pf-taak-nieuw .pf-invoer { flex: 1 1 240px; min-width: 0; }

/* --- Notities (#1520) -----------------------------------------------------
   Dezelfde .pf-regel-vorm als taken, maar de tekst mag NIET afgekapt worden
   zoals .pf-regel-titel dat doet (overflow/ellipsis/nowrap): een notitie IS
   de inhoud, geen titel erboven. */
.pf-notitie-regel { align-items: flex-start; }
.pf-notitie-tekst { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; word-break: break-word; }
.pf-notitie-meta { font-size: 12.5px; color: var(--kv-inkt-zacht); margin-top: 4px; }
.pf-notitie-acties { display: flex; gap: 4px; flex-shrink: 0; }
.pf-notitie-bewerk-vak { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.pf-notitie-nieuw {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  border-top: 1px solid var(--kv-tegel-lijn);
}
.pf-notitie-nieuw .pf-select { max-width: 320px; }

/* --- Meldingen ----------------------------------------------------------- */
.pf-melding {
  margin: 16px 0; padding: 12px 14px; border-radius: var(--kv-radius);
  background: var(--kv-paneel); border: var(--kv-lijn); font-size: 14px; color: var(--kv-inkt-mat);
}
.pf-melding--fout { border-color: var(--kv-label-g); color: var(--kv-label-g); }
.pf-verborgen { display: none !important; }

/* --- Uitgelogd ------------------------------------------------------------ */
.pf-uitgelogd { max-width: 460px; margin: 60px auto; text-align: center; }
.pf-uitgelogd h2 { font-size: 24px; font-weight: 700; margin: 0 0 10px; }
.pf-uitgelogd p { color: var(--kv-inkt-zacht); margin: 0 0 20px; }

@media (max-width: 560px) {
  .pf-regel { flex-wrap: wrap; }
  /* AC9 (#1295): op 390 breed paste de kopbalk niet -- merk + navigatie +
     e-mailadres + uitloggen kwamen samen op 528px uit en duwden de pagina het
     beeld uit. Gemeten in Chrome op 20 augustus 2026.
     Het e-mailadres verdwijnt als eerste: het is de langste en de minst
     bruikbare van de vier (je weet zelf wie je bent). Zelfde afweging als
     #kv-teller op de kaart, die onder 768px ook verdwijnt. */
  .pf-account { display: none; }
  /* AC1/AC2 (#1550): zonder wrap overliep .pf-balk-binnen hier nog steeds --
     de 390-488px min-content-breedte (gemeten, drie pagina's) past niet in
     de ~270-433px die op dit bereik beschikbaar is, ook niet met de kleinere
     padding hieronder. .pf-balk-rechts draagt op deze pagina's alleen de
     menuknop (kaart-nav.js verhuist #pf-account en #pf-uitloggen naar het
     menupaneel), dus twee rijen volstaan: merk + menuknop boven, navigatie
     eronder over de volle breedte. Gemeten (Chrome, 320px): merk 97px,
     menuknop 91px passen ruim samen op regel 1; navigatie tot 233px (drie
     links) past ruim op regel 2 binnen de 270px beschikbare breedte op de
     smalste telefoon.
     #1596-vervolg: deze regels golden .pf-balk zelf, maar dat element is
     geen flexcontainer meer sinds de volle-breedte-balk (de plafondformule +
     de flexrij zitten nu op .pf-balk-binnen) -- overgezet naar dat element,
     anders overloopt de nav op smal scherm (zelf gemeten: scrollWidth 487px
     i.p.v. 320px zonder deze verhuizing). */
  .pf-balk-binnen { flex-wrap: wrap; row-gap: 6px; padding: 10px 14px; gap: 10px; }
  .pf-balk-rechts { order: 2; }
  .pf-nav { order: 3; flex: 1 1 100%; margin-left: 0; }
  .pf-nav a { padding: 6px 8px; }
}

/* --- Overzicht (#1295) ---------------------------------------------------- */
.pf-weergave { display: flex; gap: 0; }
.pf-weergave .pf-knop { border-radius: 0; }
.pf-weergave .pf-knop:first-child { border-radius: var(--kv-radius) 0 0 var(--kv-radius); }
.pf-weergave .pf-knop:last-child { border-radius: 0 var(--kv-radius) var(--kv-radius) 0; border-left: 0; }
.pf-weergave .pf-actief { background: var(--kv-chip); color: var(--kv-inkt); }

.pf-leegstaat { text-align: center; padding: 50px 20px; }
.pf-leegstaat h2 { font-size: 20px; font-weight: 700; margin: 0 0 10px; }
.pf-leegstaat p { color: var(--kv-inkt-zacht); max-width: 460px; margin: 0 auto 20px; }

.pf-kaartvlak { border: var(--kv-lijn); border-radius: var(--kv-radius); overflow: hidden; }
#pf-map { width: 100%; height: 60vh; min-height: 340px; }
/* Eén speld per PROJECT, niet per pand (#1295 AC3). */
.pf-speld {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--kv-paneel); border: 1px solid var(--kv-accent); border-radius: 999px;
  padding: 4px 10px; box-shadow: var(--kv-schaduw);
  font-size: 12.5px; font-weight: 600; color: var(--kv-inkt); white-space: nowrap;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
.pf-speld-telling {
  font-family: var(--kv-font-mono); font-size: 10.5px; color: var(--kv-paneel);
  background: var(--kv-accent); border-radius: 999px; padding: 1px 6px;
}

/* Meer projecten op hetzelfde punt (#1321). Geen nieuwe kleur: de lijst leent
   de tokens van het paneel, zodat de contrasttabel vijf vlakken houdt (AC2). */
.pf-speld-groep { position: relative; }
.pf-speld-groep .pf-speld { font-family: inherit; }
.pf-speld-lijst {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(100% + 6px); margin: 0; padding: 4px;
  list-style: none; min-width: 160px; max-width: 240px;
  background: var(--kv-paneel); border: var(--kv-lijn);
  border-radius: var(--kv-radius); box-shadow: var(--kv-schaduw);
}
.pf-speld-lijst[hidden] { display: none; }
.pf-speld-lijst li + li { margin-top: 2px; }
.pf-speld-lijst a {
  display: block; padding: 6px 10px; border-radius: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--kv-inkt); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-speld-lijst a:hover, .pf-speld-lijst a:focus-visible { background: var(--kv-tegel); }


/* -- documenten (#1298) ------------------------------------------------------
   Het toestemmingsblok staat vóór het kiesveld en niet ernaast: het is geen
   voetnoot bij een knop maar de voorwaarde om er een te krijgen (AC6). */

.pf-doc-akkoord {
  padding: 16px 18px;
  background: var(--kv-tegel);
  border-left: 3px solid var(--kv-accent);
}
.pf-doc-akkoord h3 { margin: 0 0 6px; font-size: 15px; }
.pf-doc-akkoord p {
  margin: 0 0 12px; font-size: 13px; line-height: 1.5;
  color: var(--kv-inkt-zacht); max-width: 62ch;
}

.pf-doc-voet {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px;
  border-top: 1px solid var(--kv-tegel-lijn);
}
.pf-doc-kies { cursor: pointer; }
.pf-doc-ruimte { flex: 1 1 auto; font-size: 12.5px; color: var(--kv-inkt-licht); }

/* --- Het gesprek in het werkblad (27 aug 2026) -----------------------------
   De lijst staat in de rail, het gesprek hier. De inhoud draagt kv-klassen uit
   kaart-viewer.css: hetzelfde als het uitgelogde voorbeeld toont, want een
   voorbeeld dat er anders uitziet dan het echte ding is een loze belofte. */
#pf-gesprek-blad {
  padding: 4px 2px 8px;
  /* #1565 §8: vrijloop voor de plakkende invoerbalk (.pf-chat, 159/173px
     gemeten) zodat het laatste antwoord er niet onder verdwijnt. */
  padding-bottom: 184px;
}
/* #1570 §1: het blad zelf loopt sinds deze wijziging mee tot de volle 940px
   romp (was 820, gebouwd voor een kolom naast een rail van 320 die nu weg is).
   De doorlopende tekst erin liep bij 940 tot 95-110 tekens per regel bij
   15px -- ruim boven de typografische norm van 45-75. Geen WCAG-criterium
   (SC 1.4.8 is AAA), dus begrens de TEKST, niet het blad. 68ch is een
   eenheid, geen kleur -- raakt AC6 niet (controleer-designtokens R2 geldt
   alleen voor --kv-*-tokens). */
.kv-stap-tekst, .kv-antwoord p { max-width: 68ch; }

/* --- Ruimte en ritme in het gesprek (27 aug 2026) --------------------------
   Het gesprek stond bovenaan tegen de titel aan geplakt en liet daaronder een
   leeg vlak achter. Zelfde antwoord als bij het project: lijnen geven het vlak
   een indeling, en meer lucht tussen de beurten maakt het leesbaar in plaats
   van dicht. */
#pf-gesprek-blad .kv-detail-kop {
  padding-bottom: 13px;
  border-bottom: var(--kv-lijn);
  margin-bottom: 15px;
}
/* #1565 §1/§8: plakt bovenaan zodat je bij beurt 6 nog weet welk gesprek dit
   is -- alleen >=1024px, want op mobiel is verticale ruimte te schaars naast
   de al plakkende invoerbalk (173/184px). */
@media (min-width: 1024px) {
  #pf-gesprek-blad .kv-detail-kop {
    position: sticky; top: 0; z-index: 2;
    background: var(--kv-paneel);
    padding-top: 4px;
  }
}
#pf-gesprek-blad .kv-onderwerp { margin-bottom: var(--kv-marge-paneel); }
#pf-gesprek-blad .kv-stappen { display: flex; flex-direction: column; gap: 20px; }
/* Elke beurt krijgt een scheiding van de vorige -- op één lijn met het gesprek
   eronder, zodat het verloop een kolom is en geen stapel losse blokken. */
#pf-gesprek-blad .kv-stap + .kv-stap { padding-top: 20px; border-top: var(--kv-lijn); }

/* En onder de laatste beurt loopt de kolom uit in liniatuur, net als de
   objectenlijst van het project. */
#pf-gesprek-blad .kv-stappen::after {
  content: "";
  display: block;
  min-height: 88px;
  border-top: var(--kv-lijn);
  opacity: .55;
}

/* --- De projecttabel (27 aug 2026) -----------------------------------------
   Een overzicht van een handvol projecten is een tabel, geen tweede kolom.
   Regels onder elkaar over de volle breedte, aan te vinken, met dezelfde
   groene kantlijn als een gekozen gesprek (.kv-lijst-regel.kv-actief). */
.pf-tabel { display: flex; flex-direction: column; border-top: var(--kv-lijn); }

.pf-rij {
  display: flex; align-items: stretch;
  border-bottom: var(--kv-lijn);
  transition: background .15s ease, box-shadow .15s ease;
}
.pf-rij:hover { background: var(--kv-chip); }
.pf-rij--gekozen { background: var(--kv-tegel); box-shadow: inset 3px 0 0 var(--kv-accent); }

.pf-rij-vink {
  flex: none; display: flex; align-items: center;
  padding: 0 12px 0 14px; cursor: pointer;
}
/* SC 2.5.8 (AA): klikdoel minimaal 24x24 CSS-px. Gemeten (Chrome, isMobile,
   320/375/390x844): het vakje zelf -- niet de omringende .pf-rij-vink-label --
   stond op 15x15, zowel in de kies-alles-kop als in elke projectrij. */
.pf-rij-vink input { width: 24px; height: 24px; accent-color: var(--kv-accent); cursor: pointer; }

/* Tabellen zonder bulkactie (gesprekken, scenario's): geen .pf-rij-vink-kolom,
   dus kolom 1 zou zonder deze regel 26px dichter op de linkerrand staan dan op
   /portefeuille. Het alternatief -- een leeg vinkvakje voor de uitlijning --
   wendt een besturingselement voor dat niets doet (#1570 §11). */
.pf-tabel--zonder-vink .pf-rij-open { padding-left: 14px; }

/* De rij zelf opent het project; het vakje ernaast kiest hem voor een actie. */
.pf-rij-open {
  flex: 1 1 auto; min-width: 0;
  display: grid;
  /* KOLOM 2 EN 5 STAAN VAST, NIET OP AUTO (#1491)
     Met `auto` meet elke rij zijn eigen inhoud: de kopregel heeft daar een
     lege <span> (breedte 0) en een rij een fase-chip plus een pijl. Daardoor
     stonden de koppen tot 52px naast hun kolom -- gemeten 28 augustus 2026:
     koppen op 64/516/556/811/1176, rijen op 86/491/608/837/1164.
     Een vaste breedte laat beide hetzelfde raster gebruiken.
  EEN KOLOM MET EEN PLAFOND KRIJGT DAT PLAFOND, GEEN `fr` (#1563)
     Fase en Omvang hebben een gemeten maximum (103px/133px) en kregen eerder
     toch een vaste px (132, geschat als "breedste fasenaam + padding" -- in
     werkelijkheid 103) resp. een `fr` met 32px marge. Project en Volgende taak
     zijn vrije tekst zonder plafond en horen de rest te krijgen -- Taak had
     de kleinste `fr` terwijl hij de enige kolom is die structureel afkapt.
     Nagemeten op 1280px, sporenbudget 852px: 266,66 / 104 / 136 / 333,33 / 12
     -- precies de bedoelde verdeling; Taak wint 93px, de andere drie leveren
     samen 90px in zonder een rij te verliezen die ervoor wél paste. */
  /* 6 september 2026, bij de brede kolom: 4fr/5fr gaf de taakkolom het grootste
     deel van de extra ruimte, waardoor "geen open taken" op 825 px stond en de
     pijl op 1338 -- een gat van een halve tabel. De naam is wat je leest en
     aanwijst, dus die krijgt het meeste; de taak houdt genoeg voor een datum
     plus een korte zin. */
  grid-template-columns: minmax(0, 7fr) minmax(0, 104px) minmax(0, 136px) minmax(0, 4fr) 12px;
  align-items: center; gap: 14px;
  padding: 12px 14px 12px 0;
  font: inherit; color: inherit; text-align: left;
  background: none; border: 0; cursor: pointer;
}
.pf-rij-open:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: -2px; }
.pf-rij-naam {
  font-size: 13.5px; font-weight: 600; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-rij-fase {
  flex: none; padding: 2px 8px;
  font-family: var(--kv-font-mono); font-size: 10px; letter-spacing: .05em;
  color: var(--kv-inkt-mat);
  background: var(--kv-chip); border: 1px solid var(--kv-chip-rand);
  border-radius: var(--kv-radius-pil); white-space: nowrap;
  /* #1563: `auto`-achtig grid-item mag buiten zijn spoor groeien. Zonder
     max-width groeide een lange eigen fase tot 252px in een spoor van 104px
     en overlapte de buurkolom (rechterrand 866 tegen buur 732, gemeten). Met
     de cap erbij: 104px vak, rechterrand 717,7 < buur 731,7 -- kapt af met
     ellipsis, geen overlap. Onvoorwaardelijk (niet in een mediaquery): de
     320px-uitkomst van het mobiele raster hangt hieraan (§6 hieronder). */
  justify-self: start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Leeg is leeg: zonder deze regel houdt een project zonder fase een chip van
   132px over -- de kolombreedte -- en dat leest als "hier hoort iets en het is
   stuk" (#1491). */
.pf-rij-fase:empty { background: none; border: 0; padding: 0; }
.pf-rij-meta, .pf-rij-taak {
  font-family: var(--kv-font-mono); font-size: 10.5px; color: var(--kv-inkt-licht);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-rij-pijl { flex: none; opacity: .45; font-size: 13px; }
/* #1563 M1: --kv-label-e haalde 2,61:1 op paneel (eis 4,5, SC 1.4.3) en was
   kleur-alleen (SC 1.4.1). --kv-label-g haalt 5,45:1 hier en 5,80:1 op tegel.
   De tekstuele markering (▲ + het label) komt uit overzicht.js. */
.pf-rij--laat .pf-rij-taak.kv-let-op { color: var(--kv-label-g); font-weight: 600; }

/* De actiebalk verschijnt pas als er iets gekozen is -- een balk met grijze
   knoppen die niets doen is erger dan geen balk. */
.pf-actiebalk {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding: 11px 14px;
  background: var(--kv-tegel);
  border: var(--kv-lijn); border-radius: var(--kv-radius);
  /* #1565 §1/§8: plakt onder de rijen die je aanvinkt -- bij negen rijen valt
     hij anders onder de vouw. Eigen achtergrond (--kv-tegel) is al opaak. */
  position: sticky; bottom: 0; z-index: 2;
}
.pf-actiebalk[hidden] { display: none; }
.pf-actiebalk-telling {
  flex: 1 1 auto;
  font-family: var(--kv-font-mono); font-size: 10.5px; letter-spacing: .05em;
  color: var(--kv-inkt-mat);
}

/* #1570 review-blocker (SC 1.4.10): zonder flex-wrap vroegen de drie
   handelingen op /portefeuille 367-473px in een romp van 296px op 320 --
   scroll in twee richtingen. .pf-project-kop had dit al (verderop in dit
   bestand); dit is dezelfde soort rij en verdient dezelfde regel. */
.pf-tabel-kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 8px; }
.pf-tabel-kop .kv-sectie-kop { flex: 1 1 auto; margin: 0; }

/* --- Een nieuwe vraag stellen ---------------------------------------------- */
.pf-nieuw { display: flex; flex-direction: column; gap: 14px; max-width: 680px; }
.pf-nieuw-keuze { display: flex; flex-direction: column; gap: 8px; }
.pf-nieuw-optie, .pf-nieuw-pand {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; cursor: pointer;
  background: var(--kv-tegel); border: var(--kv-lijn); border-radius: var(--kv-radius);
  font-size: 13px;
  transition: border-color .15s ease;
}
.pf-nieuw-optie:hover, .pf-nieuw-pand:hover { border-color: var(--kv-accent); }
.pf-nieuw-optie input, .pf-nieuw-pand input { accent-color: var(--kv-accent); }
.pf-nieuw-panden-wrap[hidden] { display: none; }
.pf-nieuw-groep { margin-bottom: 12px; }
.pf-nieuw-groep .kv-sectie-kop { margin-bottom: 6px; }
.pf-nieuw-pand { margin-bottom: 5px; font-size: 12.5px; }
.pf-nieuw-vraag {
  width: 100%; padding: 11px 13px;
  font: inherit; font-size: 13.5px; color: var(--kv-inkt);
  background: var(--kv-paneel); border: var(--kv-lijn); border-radius: var(--kv-radius);
  resize: vertical;
}
.pf-nieuw-vraag:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: -1px; }
.pf-nieuw-voet { display: flex; align-items: center; gap: 12px; }
.pf-nieuw-melding {
  font-family: var(--kv-font-mono); font-size: 10.5px; color: var(--kv-inkt-licht);
}

/* --- De chat onder een geopend gesprek (#1101 fase B) ----------------------
   Hergebruikt de vormen van het nieuw-formulier (textarea, voet, melding) en
   de laadregel van de kaart; alleen de marge en de agentregel zijn eigen. */
/* Acties bij het pand van een gesprek: rapport + opslaan, zelfde kantlijn als
   het onderwerp erboven. #1563 M3: zonder flex-wrap scrollde /gesprekken op
   320px in twee richtingen (scrollWidth 372 tegen 320px, dader
   .pf-gesprek-rapportkeuze zonder krimpruimte). Zelfde middel als de
   buurregel .kv-voorstellen hieronder -- geverifieerd op 320/320. */
.pf-gesprek-acties { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 18px 0; }

/* Voorstellen van de tafel bij een beurt (#1485): knoppen in de draad zelf. */
.kv-voorstellen { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* #1565 §1: het invoerveld hoort altijd vindbaar te zijn -- was achter de
   laatste beurt en dus na drie volledige antwoorden al buiten beeld
   (gesprekken.js r. 546). Eigen achtergrond zodat scrollende inhoud er niet
   doorheen schijnt (§8: "een halfdoorzichtige plakstrook komt er niet"). */
.pf-chat {
  margin-top: 14px; padding: 12px 0 12px;
  border-top: var(--kv-lijn);
  position: sticky; bottom: 0; z-index: 2;
  background: var(--kv-paneel);
}
.pf-chat .pf-nieuw-vraag { margin-top: 8px; }
.pf-chat-teller {
  font-family: var(--kv-font-mono); font-size: 10.5px; color: var(--kv-inkt-licht);
}
.pf-chat-agent {
  font-family: var(--kv-font-mono); font-size: 9.5px; letter-spacing: .08em;
  color: var(--kv-inkt-licht);
}

/* --- Kolomkoppen en het voorstreepje (27 aug 2026) -------------------------
   Elke rij draagt nu een kantlijn, ook ongekozen: dat maakt het een tabel in
   plaats van losse regels. Gekozen wordt hij vol accent, zoals een geopend
   gesprek. Zonder die basislijn zag je pas een streepje ná het aanvinken, en
   dan lijkt het een fout in plaats van een keuze. */
.pf-rij { box-shadow: inset 3px 0 0 var(--kv-rand); }
.pf-rij--gekozen { box-shadow: inset 3px 0 0 var(--kv-accent); }

.pf-rij--kop {
  box-shadow: none;
  /* #1565 §1/§4: plakt boven aan de tabel (NN/g: bevries de kopregel in
     grotere tabellen) -- opaak, zodat scrollende rijen er niet doorheen
     schijnen (§8). */
  background: var(--kv-paneel);
  position: sticky; top: 0; z-index: 2;
  border-bottom: var(--kv-lijn);
  cursor: default;
}
.pf-rij--kop:hover { background: var(--kv-paneel); }
.pf-rij--kop .pf-rij-open {
  padding-top: 7px; padding-bottom: 7px;
  font-family: var(--kv-font-mono); font-size: 9.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--kv-inkt-licht);
  cursor: default;
}
/* De kop is een span, geen knop -- maar hij moet wel hetzelfde raster volgen. */
span.pf-rij-open { display: grid; }

/* De knop in de tabelkop is een actie naast de titel, geen volle balk. */
.pf-tabel-kop .pf-knop { flex: none; }

/* --- De projecttabel op 320px: van rij naar blok (#1563 §6) -----------------
   Onder 620px sporenbudget is vijf kolommen geen tabel meer -- ongewijzigd
   liet het desktopraster (vaste 104+136+12) Project/Omvang/Taak samen op
   6px vallen (M2, SC 1.4.10) en met een langer projectmonster ook scroll in
   twee richtingen (scrollWidth 333 tegen 320, dader #pf-projecttabel).
   Eén breekpunt: hetzelfde 760px waar .pf-app hierboven al stapelt. */
@media (max-width: 760px) {
  .pf-app { padding: 0 12px 12px; }

  /* De kolomKOPPEN verdwijnen, het KIES-ALLES-vakje blijft (SC 1.3.1). */
  .pf-rij--kop .pf-rij-open { display: none; }
  /* SC 2.5.8: zonder deze regel ontleent de kopregel zijn hoogte alleen aan
     het vinkje (15px) zodra de padding van .pf-rij-open (hierboven) wegvalt --
     gemeten doel 48 x 21px, de 24px-cirkel raakt de eerste datarij (763,5
     tegen 763). Met min-height: 48 x 24px, cirkel 765 tegen buur 766. */
  .pf-rij--kop .pf-rij-vink { min-height: 24px; }

  .pf-rij-open {
    /* fit-content(104px): krimpt naar de chip, groeit nooit voorbij het
       gemeten plafond van 103px -- anders eet een lange eigen fase de kolom
       Omvang op (gemeten zonder deze cap: Omvang 0px van de benodigde 120px).
       Nagemeten op 320x640: 320/320, rijhoogte 86, geen cel overlapt zijn
       buur. */
    grid-template-columns: fit-content(104px) minmax(0, 1fr) 12px;
    column-gap: 8px; row-gap: 2px;
  }
  /* Twee regels in plaats van één. Gemeten op 5 sept 2026 met een echte vraag
     van 81 tekens: op 320px paste er 40 in, op 375px 48 -- en op desktop zelfs
     maar 43, want daar delen de kolommen de breedte. In een gesprekkenlijst is
     de vraag de herkenning; twee vragen over hetzelfde pand zien er afgekapt
     identiek uit. De rij stapelt hier toch al verticaal, dus de tweede regel
     kost alleen hoogte en duwt niets opzij. line-clamp houdt het beletselteken. */
  .pf-rij-naam {
    grid-column: 1 / 3; grid-row: 1;
    white-space: normal;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .pf-rij-pijl { grid-column: 3;     grid-row: 1; }
  .pf-rij-fase { grid-column: 1;     grid-row: 2; }
  .pf-rij-meta { grid-column: 2 / 4; grid-row: 2; }  /* spant tot en met het pijlspoor */
  .pf-rij-taak { grid-column: 1 / 4; grid-row: 3; }

  /* Het skelet moet dezelfde rijhoogte dragen als de echte rij hierboven,
     anders springt de layout bij aankomst (CLS). */
  .pf-skelet-regel { height: 86px; }
}

/* --- Documenten hangen aan een adres (27 aug 2026) ------------------------- */
.pf-doc-object {
  flex: 0 1 260px; min-width: 0; padding: 7px 10px;
  font: inherit; font-size: 12.5px; color: var(--kv-inkt);
  background: var(--kv-paneel); border: var(--kv-lijn); border-radius: var(--kv-radius);
}
/* Uit tot er een adres gekozen is: de knop hoort niet te lokken naar een
   handeling die daarna wordt geweigerd. */
.pf-doc-kies--uit { opacity: .45; pointer-events: none; }

/* --- Een nieuwe vraag: eerst de reikwijdte (27 aug 2026) -------------------
   Was een stapel identieke radiovakjes met alle adressen van alle projecten
   eronder -- lang, en de keuze die ertoe doet (waar gaat het over?) verdween
   tussen de rest. Nu drie kaartjes naast elkaar; pas daarna vraagt hij door. */
.pf-reikgroep {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.pf-reik {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 14px; cursor: pointer;
  background: var(--kv-tegel);
  border: var(--kv-lijn); border-radius: var(--kv-radius);
  box-shadow: inset 3px 0 0 transparent;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pf-reik:hover { border-color: var(--kv-accent); }
.pf-reik--aan { background: var(--kv-paneel); box-shadow: inset 3px 0 0 var(--kv-accent); }
.pf-reik input { position: absolute; opacity: 0; pointer-events: none; }
.pf-reik-naam { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.pf-reik-bij { font-size: 11.5px; color: var(--kv-inkt-licht); line-height: 1.4; }

.pf-veldkop {
  display: block; margin-bottom: 6px;
  font-family: var(--kv-font-mono); font-size: 9.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--kv-inkt-licht);
}
.pf-keuze {
  width: 100%; padding: 9px 12px;
  font: inherit; font-size: 13px; color: var(--kv-inkt);
  background: var(--kv-paneel); border: var(--kv-lijn); border-radius: var(--kv-radius);
}
.pf-nieuw-scope[hidden], .pf-pandkeuze[hidden] { display: none; }
.pf-pandkeuze { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.pf-pandregel-keuze {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; cursor: pointer; font-size: 12.5px;
  background: var(--kv-tegel); border: var(--kv-lijn); border-radius: var(--kv-radius-klein);
}
.pf-pandregel-keuze:hover { border-color: var(--kv-accent); }
.pf-pandregel-keuze input { accent-color: var(--kv-accent); }

/* Wat er bij je vraag komt, zichtbaar en niet stilzwijgend. */
.pf-nieuw-context {
  margin: 0; padding: 9px 12px;
  font-family: var(--kv-font-mono); font-size: 11px; line-height: 1.5;
  color: var(--kv-inkt-mat);
  background: var(--kv-chip); border-left: 3px solid var(--kv-accent);
  border-radius: var(--kv-radius-klein);
}
.pf-nieuw-context[hidden] { display: none; }

/* De knop rechts naast de sectiekop, op de rand van de tabel eronder. */
.pf-tabel-kop { justify-content: space-between; margin-bottom: 9px; }

/* ---------------------------------------------------------------------------
   OBJECTEN IN EEN PROJECT: DEZELFDE TABEL ALS HET OVERZICHT
   Tot 28 augustus 2026 waren dit kaartjes in een omlijnd kader -- een kader in
   een kader, met per rij zijn eigen rand. Er was geen vinkje, dus je kon wel
   een object aanwijzen maar er niets mee doen. Nu is het de .pf-rij-tabel van
   het overzicht: doorlopende regels, een aanvinkkolom en een actiebalk die
   verschijnt zodra er iets gekozen is.
   Vier kolommen in plaats van de vijf van het overzicht -- een object heeft
   geen fase en geen eerstvolgende taak.
--------------------------------------------------------------------------- */
/* Het raster staat op de TABEL en niet op de rij: anders erft de kopregel
   (.pf-rij--kop, zonder --object) het vijfkoloms raster van het overzicht en
   staan de koppen naast hun kolom. Gemeten 28 augustus 2026: koppen op
   571/841/894/1049 tegen rijen op 571/880/1028/1256. */
.pf-tabel--object .pf-rij-open {
  /* De laatste kolom is VAST en niet auto: de kopregel heeft daar geen pijl
     staan, dus auto gaf hem breedte 0 en verschoof de fr-verdeling. Gemeten
     28 augustus 2026: koppen liepen 5 tot 12px voor op hun kolom. */
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.6fr) 14px;
}
.pf-tabel--object .pf-rij-open[disabled] { cursor: default; }
.pf-tabel--object .pf-rij-open[disabled] .pf-rij-pijl { visibility: hidden; }

.pf-rij-plaats, .pf-rij-bij {
  font-size: 12.5px; color: var(--kv-inkt-zacht);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* DE IDENTITEIT VAN EEN OBJECT KAPT NIET AF (#2383)
   Het adres is waaraan je een object herkent en waaraan je de acties ernaast
   verbindt. Met ellipsis op een vaste regel bleef er van "Burgemeester van
   Karnebeeklaan-..." op 768px "Burgemeester van K..." over en van
   "'s-Gravenhage" "'s-Grave..." (gemeten 6 oktober 2026). Afbreken kost een
   regel hoogte en duwt niets opzij; overflow-wrap vangt een straatnaam zonder
   spatie op. Geldt ook tegen de line-clamp van het smalle overzichtsraster
   (@media max-width 760px hierboven), die anders ook hier zou knippen. */
.pf-tabel--object .pf-rij-naam,
.pf-tabel--object .pf-rij-plaats,
.pf-tabel--object .pf-rij-bij {
  display: block; -webkit-line-clamp: none;
  white-space: normal; overflow-wrap: anywhere;
}

/* De drie acties (context, feiten, verwijderen) zijn één groep naast het
   adres. De x staat BUITEN de rijknop: anders verwijdert een klik op de rij
   hem. */
.pf-rij-acties { flex: none; display: flex; align-items: center; gap: 4px; }
.pf-rij-weg, .pf-rij-weg-kop { flex: none; width: 64px; text-align: center; }
.pf-rij-weg { align-self: center; margin-right: 8px; }
.pf-rij-weg-kop {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--kv-inkt-licht); margin-right: 8px;
}

.pf-obj-melding { margin: 8px 0 0; }

/* ---------------------------------------------------------------------------
   DE OBJECTRIJ OP EEN SMALLE TABEL: ADRES BOVEN, ACTIES ERONDER (#2383)
   Gemeten op productie, 1 oktober 2026, 390px: .pf-rij-open 24,09px breed,
   .pf-rij-naam/-plaats/-bij 0px. De rijknop mocht krimpen (min-width: 0) en
   de drie acties ernaast hielden hun eigen breedte; wat overbleef was een
   vinkje, een pijl en drie knoppen zonder adres. Nagemeten in deze branch met
   scripts/meet-objectlijst-mobiel.mjs voor de fix: naam 0px op 320/375/390,
   en op 768px nog 70px voor "Keizersgracht 123" (afgekapt).

   HET ACTIEBUDGET
     vinkje 50 + "Geen context" ~100 (een contextchip met +1 tot ~180) +
     "Feiten en gegevens bekijken" ~190 + x 72 = 410 tot 490px vóór het adres
     ook maar een pixel krijgt. Het vierkoloms adresraster wil daarnaast ~490px
     om de naam ~200px te geven. Met de vaste actiekolom van 32rem (480px,
     zie de brede stand) passen adres en acties onder ~1080px tabelbreedte
     niet meer op één regel: op 1000px kreeg de naam 180px en brak
     "'s-Gravenhage" in de kolom Plaats al af na "'s-".

   WAAROM EEN CONTAINER QUERY EN GEEN MEDIA QUERY
     Deze tabel staat niet alleen op /portefeuille/<id>: project.js draait ook
     in het kaartluik (#kv-luik, min(1180px, 100vw - 320px) breed, zie
     #kv-luik[data-pad] in start()). Daar is het venster breed en de tabel
     smal; een media query op de vensterbreedte ziet dat niet. De tabel meet
     zichzelf. Nagemeten met een tabel van 500px in een venster van 1440px.

   DRIE STANDEN, OP DE BREEDTE VAN DE TABEL
     >= 1080px  een regel: vinkje, adres in vier kolommen, acties
     600-1079px twee regels: het adres in vier kolommen onder de kolomkoppen,
                de acties eronder, uitgelijnd op het adres
     < 600px    twee regels, en het adres zelf gestapeld: naam, plaats,
                bijzonderheden onder elkaar
   Focusvolgorde verandert niet: vinkje, rijknop, context, feiten, verwijderen
   blijft de DOM-volgorde; alleen de plaatsing schuift.
--------------------------------------------------------------------------- */
.pf-tabel--object { container: pf-objecttabel / inline-size; }

/* Brede stand: de actiegroep krijgt een vaste breedte en de kolomkop 'Actie'
   dezelfde. Met inhoudsbreedte verschilde elke rij (een chip is breder dan
   "Geen context"), dus stond het adresraster per rij anders dan de koppen
   (gemeten 6 oktober 2026 op 1280px: Plaats op 313px in de ene rij, 380px in
   de andere). */
@container pf-objecttabel (min-width: 1080px) {
  /* 32rem = 480px bij de rootmaat van 15px van deze pagina. Gemeten 6 oktober
     2026 op 1280px, op een regel: "Feiten en gegevens bekijken" 205 + x 64 +
     tussenruimte en marge 16 = 285px; de rest (~195px) is voor de context.
     Dat past een catalogusnaam met "+1" op een regel ("Mogelijke aankoop +1"
     182px, "Bouwkundige opname +1" rond 195px). Met 27rem (405px) bleef er
     ~120px over en brak "Mogelijke aankoop" in een chip van drie regels. */
  .pf-tabel--object .pf-rij-acties,
  .pf-tabel--object .pf-rij-weg-kop { flex: 0 0 32rem; }
  /* Zonder min-width: 0 is de ondergrens van de groep zijn min-content, en
     groeit hij met een lang eigen label voorbij 32rem: de adreskolommen van
     die rij schoven dan 170px naar links (gemeten 6 oktober 2026, 1440px). */
  .pf-tabel--object .pf-rij-acties { min-width: 0; }
  .pf-tabel--object .pf-rij-acties > .pf-knop { flex: none; white-space: nowrap; }
  .pf-tabel--object .pf-rij-weg-kop { text-align: left; margin-right: 0; }
  .pf-tabel--object .pf-rij-acties .pf-rij-weg { margin-left: auto; }
  /* Een eigen contextlabel is vrije tekst: zonder grens eet hij de groep op.
     De contextknop krimpt dus als enige, op een regel; het label krijgt dan
     een beletselteken en "+n" blijft staan. Dat mag hier wel: de context is
     niet de identiteit van het object (het adres wel, zie hierboven), en de
     volledige tekst blijft de toegankelijke naam van de knop. */
  .pf-tabel--object .pf-rij-acties .pf-context-rij { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; }
  .pf-tabel--object .pf-rij-acties .pf-context-chip {
    display: block; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .pf-tabel--object .pf-rij-acties .pf-context-meer { flex: none; }
}

@container pf-objecttabel (max-width: 1079.98px) {
  .pf-tabel--object .pf-rij--object {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
  }
  .pf-tabel--object .pf-rij--object .pf-rij-vink { grid-column: 1; grid-row: 1; }
  .pf-tabel--object .pf-rij--object .pf-rij-open { grid-column: 2; grid-row: 1; padding-bottom: 4px; }
  /* Onder het adres, niet onder het vinkje: zo hoort de regel zichtbaar bij
     het object erboven en niet bij de volgende rij. */
  .pf-tabel--object .pf-rij-acties {
    grid-column: 2; grid-row: 2;
    flex-wrap: wrap; gap: 2px 4px;
    /* -8px: de stille knoppen dragen 8px binnenruimte, zo begint hun tekst
       recht onder het adres in plaats van 8px ingesprongen. */
    margin-left: -8px; padding: 0 8px 8px 0;
  }
  /* Smaller dan de gewone knop (8px 12px), zodat er meer acties op een regel
     passen. De hoogte blijft van #pf-project .pf-knop: 44px onder 600px
     vensterbreedte (gemeten op 390px: alle drie 44px hoog). */
  .pf-tabel--object .pf-rij-acties > .pf-knop { padding-left: 8px; padding-right: 8px; }
  /* Verwijderen staat los van de rest, rechts: onomkeerbaar naast omkeerbaar
     is precies wat #1488 uit elkaar haalde. */
  .pf-tabel--object .pf-rij-acties .pf-rij-weg { width: auto; min-width: 44px; margin: 0 0 0 auto; }
  /* De acties hebben hier geen kolom meer, dus ook geen kolomkop. De koppen
     van het adresraster blijven wel staan, ook waar @media (max-width: 760px)
     ze voor het vijfkoloms overzicht weghaalt: dit raster heeft er nog vier. */
  .pf-tabel--object .pf-rij-weg-kop { display: none; }
  .pf-tabel--object .pf-rij--kop .pf-rij-open { display: grid; }

  /* De vier kolommen expliciet: anders lekt het tweekoloms overzichtsraster
     van @media (max-width: 760px) hierboven (naam over kolom 1-2, pijl in
     kolom 3) in dit raster tussen 721 en 760px vensterbreedte. */
  .pf-tabel--object .pf-rij-naam   { grid-column: 1; grid-row: 1; }
  .pf-tabel--object .pf-rij-plaats { grid-column: 2; grid-row: 1; }
  .pf-tabel--object .pf-rij-bij    { grid-column: 3; grid-row: 1; }
  .pf-tabel--object .pf-rij-pijl   { grid-column: 4; grid-row: 1; }
}

/* Onder 600px is een tabel met vier kolommen geen tabel meer. Het adres wordt
   dan zelf twee of drie regels: naam boven, plaats en bijzonderheden eronder,
   de pijl rechts naast de naam. De kolomkoppen vallen weg, het
   kies-alles-vakje blijft (SC 1.3.1), net als in het overzicht. */
@container pf-objecttabel (max-width: 599.98px) {
  .pf-tabel--object .pf-rij-open {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 2px;
  }
  .pf-tabel--object .pf-rij-naam   { grid-column: 1; grid-row: 1; }
  .pf-tabel--object .pf-rij-pijl   { grid-column: 2; grid-row: 1; }
  .pf-tabel--object .pf-rij-plaats { grid-column: 1; grid-row: 2; }
  .pf-tabel--object .pf-rij-bij    { grid-column: 1; grid-row: 3; }
  .pf-tabel--object .pf-rij--kop .pf-rij-open { display: none; }
  .pf-tabel--object .pf-rij--kop .pf-rij-vink { min-height: 24px; }
}

@media (max-width: 720px) {
  .pf-actiebalk { flex-wrap: wrap; }
}

/* De keuzelijst met acties. Hij groeit mee met de balk maar houdt een
   ondergrens, want 'Document toevoegen' is de langste optie. */
.pf-actie-keuze { flex: 1 1 auto; min-width: 170px; max-width: 260px; }

/* ---------------------------------------------------------------------------
   VOORTGANG BIJ HET BOUWEN VAN EEN DOSSIER
   De balk volgt de server: renderen telt pagina's, opslaan telt documenten.
   De VERDELING over de balk (10/70/20) is een keuze, geen meting -- daarom
   staat de teller er ook in tekst bij, want die liegt niet.
--------------------------------------------------------------------------- */
.pf-voortgang {
  margin-top: 10px; padding: 12px 14px;
  background: var(--kv-tegel); border: var(--kv-lijn); border-radius: var(--kv-radius);
}
.pf-voortgang-kop {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--kv-inkt-zacht); margin-bottom: 8px;
}
.pf-voortgang-pct { font-variant-numeric: tabular-nums; flex: none; }
.pf-voortgang-baan {
  height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--kv-chip);
}
.pf-voortgang-vul {
  height: 100%; width: 0;
  background: var(--kv-accent);
  transition: width .25s ease;
}
@media (prefers-reduced-motion: reduce) { .pf-voortgang-vul { transition: none; } }

/* ---------------------------------------------------------------------------
   DOCUMENTEN ALS MAPPEN
   Een map per object, plus een map voor wat aan het hele project hangt. Een
   taxatiedossier is dertien stukken; in één platte lijst wordt een project met
   drie panden onleesbaar.
--------------------------------------------------------------------------- */
.pf-map { border-top: 1px solid var(--kv-tegel-lijn); }
.pf-map:first-child { border-top: 0; }
.pf-map-kop {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer;
  list-style: none; /* het standaard driehoekje weg; ::marker hieronder */
}
.pf-map-kop::-webkit-details-marker { display: none; }
.pf-map-kop::before {
  content: '▸'; flex: none; width: 12px;
  color: var(--kv-inkt-licht); transition: transform .15s ease;
}
.pf-map[open] > .pf-map-kop::before { transform: rotate(90deg); }
.pf-map-kop:hover { background: var(--kv-chip); }
.pf-map-naam {
  flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-map-tel { flex: none; font-size: 12px; color: var(--kv-inkt-licht); }
.pf-map-zip { flex: none; }

/* De regels binnen een map springen in, zodat de map als map leest.

   VIER KOLOMMEN, EXPLICIET (#1488)
     De basis `.pf-regel` (hierboven) is een flexbox met drie stukken. Een
     documentregel heeft er vier -- icoon, naam, openen, weg -- en zonder een
     eigen expliciet raster viel de vierde naar een tweede regel en kreeg het
     icoon de 1fr. Gemeten: regel 104px hoog tegen 45px voor een objectregel,
     met een icoonkolom van 194px. Het raster staat daarom hier voluit. */
.pf-doc-regel {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto auto auto;
  align-items: center;
  /* 6px boven en onder: de knop 'Openen' is 32px hoog, dus 32+12 = 44px en dat
     komt uit op de 45px van een objectregel. Met de standaard 12px werd het
     56px en lazen de twee lijsten als twee verschillende dingen (#1488). */
  padding: 6px 14px 6px 38px;
}
.pf-doc-ico { color: var(--kv-inkt-licht); font-size: 13px; line-height: 1; }
.pf-doc-naam {
  font-size: 13.5px; font-weight: 600; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-doc-meta {
  font-size: 12px; color: var(--kv-inkt-licht);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* Verwijderen is stiller dan openen: één primaire weg per regel (#1488). */
.pf-doc-weg {
  background: none; border: 0; cursor: pointer; padding: 4px 6px;
  color: var(--kv-inkt-licht); font-size: 14px; line-height: 1; border-radius: 4px;
}
.pf-doc-weg:hover { color: var(--kv-inkt); background: var(--kv-chip); }
.pf-doc-weg:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: 1px; }

/* De dossier-download boven de mappen. Bij meer dan één object staat er een
   bereikkeuze naast: alles met een map per object, of één pand (#1443 AC1). */
.pf-doc-kop {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 0 0 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--kv-tegel-lijn);
}
.pf-doc-kies-label {
  font-family: var(--kv-font-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--kv-inkt-licht);
}
.pf-doc-kop .pf-select { flex: 1 1 auto; min-width: 150px; max-width: 280px; }

/* Een dossier moet ook op een telefoon als volledige tekst leesbaar zijn.
   Bestandsnamen zijn de herkenning van de stukken; de acties delen daarom
   op mobiel niet dezelfde regel met naam en metadata (#2353). */
.pf-dossier-snel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pf-dossier-snel .pf-knop { min-height: 44px; box-sizing: border-box; }
#pf-notities, #pf-documenten, #pf-taken { scroll-margin-top: 120px; }

@media (max-width: 600px) {
  #pf-taken .pf-regel-titel {
    white-space: normal; overflow: visible; text-overflow: clip;
    overflow-wrap: anywhere; line-height: 1.5;
  }
  #pf-project .pf-invoer, #pf-project .pf-select,
  #pf-project textarea, #pf-project .pf-doc-object { font-size: 16px; }
  #pf-project .pf-knop { min-height: 44px; box-sizing: border-box; }
  .pf-doc-regel {
    grid-template-columns: 18px minmax(0, 1fr) 44px;
    column-gap: 8px; row-gap: 6px; padding: 14px 10px;
  }
  .pf-doc-ico { grid-column: 1; grid-row: 1; align-self: start; margin-top: 4px; }
  .pf-doc-naam {
    grid-column: 2 / -1; grid-row: 1;
    font-size: 16px; line-height: 1.45; white-space: normal;
    overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
  }
  .pf-doc-meta {
    grid-column: 2 / -1; grid-row: 2;
    white-space: normal; overflow-wrap: anywhere; line-height: 1.45;
  }
  .pf-doc-regel [data-open] { grid-column: 2; grid-row: 3; justify-self: start; }
  .pf-doc-regel [data-doc-weg] { grid-column: 3; grid-row: 3; min-width: 44px; min-height: 44px; }
}

/* Het rapport meenemen bij het aanmaken van een dossier vanuit een gesprek
   (#1482). Het vinkje staat naast de knop en niet eronder: het hoort bij die
   ene handeling, niet bij het gesprek als geheel. */
.pf-gesprek-rapportkeuze {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--kv-inkt-zacht); cursor: pointer;
}
.pf-gesprek-rapportkeuze input { accent-color: var(--kv-accent); cursor: pointer; }
.pf-gesprek-rapportmelding {
  font-size: 12px; color: var(--kv-inkt-licht);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   WACHTSTAND: DE VORM VAN WAT KOMT
   Tot 31 augustus 2026 stond hier een omkaderd meldingsvak met het woord
   "Laden…". Dat zegt niets over wat er komt, en het scherm sprong van één
   regel tekst naar een volle tabel.

   De bouwsteen (.kv-skelet, @keyframes kv-puls) komt uit kaart-viewer.css --
   die laadt op alle drie deze pagina's al, en het luik gebruikt hem sinds
   #1435 voor precies dit. Geen tweede stel klassen (core/code-reuse.md); hier
   staan alleen de MATEN, want de vorm verschilt per scherm.

   De maten volgen wat er werkelijk komt: een cijfertegel is 78px hoog, een
   projectregel 45, een sectiekop 14. Zo is de sprong bij aankomst klein.
--------------------------------------------------------------------------- */
/* EEN LOPENDE BALK BOVEN HET SKELET
   Het skelet toont de VORM en de shimmer de beweging, maar allebei in
   papierkleuren -- en het hele Kalk-palet ligt binnen twintig punten. Op een
   groot scherm las dat nog steeds als "een leeg vlak" in plaats van "er wordt
   iets opgehaald".
   Deze balk is het signaal, en hij mag wel kleur dragen: --kv-accent is het
   enige in dit palet dat echt contrasteert met papier. Hij loopt heen en weer
   en niet van 0 naar 100: we WETEN niet hoe ver we zijn, en een balk die dat
   suggereert liegt. */
.pf-skelet { margin: 16px 0; position: relative; padding-top: 14px; }
.pf-skelet::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  border-radius: 2px; overflow: hidden;
  background: var(--kv-rand);
}
/* TRANSFORM EN NIET left/right: `width` naast een animatie op left EN right
   levert een balk die stilstaat -- gemeten 31 augustus 2026, left bleef 0px.
   Verschuiven doet ook geen layout-werk, dus de animatie blijft vloeiend. */
.pf-skelet::after {
  content: "";
  position: absolute; top: 0; left: 0; height: 2px; width: 30%;
  border-radius: 2px;
  background: var(--kv-accent);
  animation: pf-loopt 1.5s ease-in-out infinite;
}
/* 333% van 30% breedte is precies de volle breedte van de balk erachter. */
@keyframes pf-loopt {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(333%); }
}
@media (prefers-reduced-motion: reduce) {
  .pf-skelet::after { animation: none; width: 100%; opacity: .35; }
}

/* KLEUR: TUSSEN HET PAPIER EN DE TEGEL IN
   Het hele Kalk-palet ligt binnen twintig punten, dus elk contrast hier is een
   keuze van een paar punten. Twee pogingen, allebei gemeten op 31 augustus:

     --kv-chip  (#EDE8DC)  vijf punten van het papier (#E8E4DA) -- het vlak
                           was niet te zien
     --kv-tegel (#FBF9F3)  de kleur die aankomt, maar dan is de lichtstreep
                           wit-op-bijna-wit en zie je de beweging niet

   --kv-paneel (#F5F2EA) ligt ertussen: dertien punten boven het papier, dus
   het vlak leest, en zes onder de tegel, dus een lichte streep kan er nog
   overheen. De rand is --kv-rand en niet --kv-tegel-lijn: een skelet mag een
   fractie steviger staan dan de tegel die erna komt, anders vervaagt de vorm
   in de ondergrond. */
.pf-skelet .kv-skelet {
  background: var(--kv-paneel);
  border: 1px solid var(--kv-rand);
}

/* De streep sterker dan de standaard .55: op dit palet is het verschil tussen
   het vlak en zuiver wit klein, dus een halfdoorzichtige streep verdwijnt. */
.pf-skelet .kv-skelet::after {
  background: linear-gradient(90deg, transparent, var(--kv-wit), transparent);
  opacity: .85;
}
/* De tekst blijft bestaan voor wie hem niet ziet: een schermlezer hoort
   "Laden…", een ziende gebruiker ziet de vorm. */
.pf-skelet-verborgen {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.pf-skelet-cijfers {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; margin-bottom: 18px;
}
.pf-skelet-cijfer { height: 78px; }

.pf-skelet-tabel { display: flex; flex-direction: column; gap: 1px; }
.pf-skelet-kop { height: 14px; width: 120px; margin-bottom: 8px; }
.pf-skelet-regel { height: 45px; }
.pf-skelet-titel { height: 30px; width: 260px; margin-bottom: 20px; }

@media (max-width: 900px) {
  .pf-skelet-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   EEN GEARCHIVEERD PROJECT IS LEESBAAR, NIET BEWERKBAAR (#1519 AC5)
   Het slot zit in de database (ops.weiger_op_archief), dus een poging faalt
   sowieso. Maar een knop aanbieden die daarna een fout geeft is een val: hier
   gaan ze uit, en de band zegt waarom en hoe je eruit komt.
   `pf-archiveer` blijft juist wél aan -- dat is de weg terug.
--------------------------------------------------------------------------- */
.pf-archiefband {
  margin: 0 0 14px; padding: 9px 12px;
  background: var(--kv-chip); border-left: 3px solid var(--kv-inkt-licht);
  border-radius: var(--kv-radius-klein);
  font-size: 12.5px; color: var(--kv-inkt-zacht);
}
.pf-archief .pf-knop:not(#pf-archiveer):not(#pf-verwijder),
.pf-archief .pf-select,
.pf-archief .pf-invoer,
.pf-archief [data-weg],
.pf-archief .pf-doc-weg,
.pf-archief .pf-vink {
  pointer-events: none; opacity: .4;
}
.pf-archief .pf-titel-invoer { pointer-events: none; }

/* Een gearchiveerde regel in het overzicht: zichtbaar anders, niet weggemoffeld.
   De kantlijn is grijs in plaats van groen -- dezelfde plek, andere betekenis. */
.pf-rij--archief { box-shadow: inset 3px 0 0 var(--kv-inkt-licht); }
.pf-rij--archief .pf-rij-naam { color: var(--kv-inkt-zacht); }

/* Het naamveld voor een nieuw project, in de tabelkop waar de knop stond.
   Geen dialoog eroverheen: je blijft zien wat je al hebt terwijl je een naam
   bedenkt, en dat is precies wanneer je wilt weten of hij al bestaat. */
.pf-nieuw-vak { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; }
.pf-nieuw-vak .pf-invoer { flex: 1 1 auto; min-width: 120px; max-width: 320px; }

/* -- Delen (#1521) ---------------------------------------------------------
   Eén regel per persoon, dezelfde hoogte en kantlijn als een documentregel:
   het zijn drie lijsten onder elkaar op één scherm, en ze horen als één ding
   te lezen. De rol staat rechts en niet als badge -- een badge trekt aandacht
   naar de uitzondering terwijl je meestal de NAAM zoekt. */
.pf-lid-regel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 38px;
}
.pf-lid-wie {
  font-size: 13.5px; font-weight: 600; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-lid-rol { font-size: 12px; color: var(--kv-inkt-licht); }
.pf-lid-nieuw { display: flex; align-items: center; gap: 8px; padding: 10px 14px 10px 38px; }
.pf-lid-nieuw .pf-invoer { flex: 1 1 auto; min-width: 140px; max-width: 320px; }

/* De uitleg boven de lijst: dit is het enige scherm waar iemand leest wat een
   gedeelde gebruiker wél en niet mag, dus hij staat er voluit en niet in een
   tooltip. */
.pf-uitleg {
  margin: 0; padding: 10px 14px 10px 38px;
  font-size: 12.5px; line-height: 1.5; color: var(--kv-inkt-zacht);
}

/* Een label dat alleen de schermlezer nodig heeft: het invoerveld draagt zijn
   plaatshouder, maar een placeholder is geen label (WCAG 3.3.2). */
.pf-verborgen-label {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* -- Context per object (#1580) --------------------------------------------
   Vijf gekleurde groepen, geen letterlijke kleurwaarde: --kv-label-a t/m -e
   uit kaart-viewer.css. Een eigen label krijgt de neutrale --kv-chip, want
   "Anders" is geen groep met een eigen kleur (AC6). */
.pf-context-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.3;
  background: var(--kv-chip); color: var(--kv-inkt-mat);
  border: 1px solid var(--kv-chip-rand);
  /* 24px klikdoel-ondergrens (WCAG 2.5.8 AA) ook op een kleine chip. */
  min-height: 24px;
}
.pf-context-chip--deal         { background: var(--kv-label-a); color: var(--kv-wit); border-color: transparent; }
.pf-context-chip--bezit        { background: var(--kv-label-b); color: var(--kv-wit); border-color: transparent; }
.pf-context-chip--opdracht     { background: var(--kv-label-c); color: var(--kv-inkt); border-color: transparent; }
.pf-context-chip--ontwikkeling { background: var(--kv-label-d); color: var(--kv-inkt); border-color: transparent; }
.pf-context-chip--volgen       { background: var(--kv-label-e); color: var(--kv-wit); border-color: transparent; }

.pf-context-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pf-context-meer {
  display: inline-flex; align-items: center; padding: 3px 8px;
  border-radius: 999px; font-size: 12px; color: var(--kv-inkt-zacht);
  background: transparent; border: 1px dashed var(--kv-chip-rand);
  min-height: 24px;
}

/* Het paneel "Alle mogelijkheden…": één kolom, geen scroll in twee richtingen
   op 320 CSS-px (AC10/1.4.10). */
.pf-context-paneel {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 420px; width: 100%;
}
.pf-context-snelkeuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-context-snelkeuze {
  min-height: 44px; padding: 8px 14px;
  border-radius: var(--kv-radius-klein); border: 1px solid var(--kv-chip-rand);
  background: var(--kv-vlak); font-size: 13.5px; cursor: pointer;
}
.pf-context-snelkeuze[aria-pressed="true"] {
  background: var(--kv-inkt); color: var(--kv-wit); border-color: var(--kv-inkt);
}
.pf-context-groep { display: flex; flex-direction: column; gap: 6px; }
.pf-context-groep-kop { font-size: 12px; font-weight: 700; color: var(--kv-inkt-zacht); }
.pf-context-groep-opties { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-context-optie {
  min-height: 32px; padding: 5px 12px;
  border-radius: 999px; border: 1px solid var(--kv-chip-rand);
  background: var(--kv-vlak); font-size: 12.5px; cursor: pointer;
}
.pf-context-optie[aria-pressed="true"] {
  background: var(--kv-inkt); color: var(--kv-wit); border-color: var(--kv-inkt);
}

/* --- GEDEELDE FOOTER (public/splitify-shared.js, data-sd-footer, #1596) ----
   splitify-shared.js injecteert de .sd-footer-markup zelf; de stijl ervoor
   staat in splitify-design.css. Dat bestand kan hier NIET naast portefeuille.css
   laden: het draagt eigen html/body- en *-regels die de html/body-
   achtergrondsplitsing (#1563, AC5 hierboven -- html draagt de kleur, body is
   transparant) zouden overschrijven. Wat hier staat is dezelfde selectorset
   (.sd-footer, .sd-footer__*) met dezelfde getallen als
   splitify-design.css r.1050-1108, maar met de --kv-*-tokens van deze pagina's
   in plaats van --text-*- en --space-*-tokens. Twee keer dezelfde vorm, twee tokenbronnen
   -- zelfde afweging als toevoegen-knop.css, dat om dezelfde reden een eigen
   stylesheet is (poort 3 van qa/portefeuille-pagina-contract.test.mjs). */
[data-sd-footer] {
  background: var(--kv-paneel);
  border-top: var(--kv-lijn);
  /* 1 oktober 2026: 64px -> 6px. De eigenaar wil tussen de kopbalk en de voet
     "maar een streepje achtergrond zien"; 64px liet een brede baan weefsel
     staan tussen de inhoud en de afsluiting. 6px is dezelfde maat als de naad
     boven de kaart (.pf-app), zodat de pagina overal eenzelfde streepje toont
     in plaats van drie verschillende. */
  margin-top: 6px;
}
.sd-footer {
  max-width: var(--pf-romp-b);
  margin-inline: auto;
  padding: 48px var(--kv-marge-scherm);
}
.sd-footer__grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}
@media (max-width: 800px) {
  .sd-footer__grid { grid-template-columns: 1fr; }
}
.sd-footer__brand {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--kv-inkt);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.sd-footer__about {
  font-size: .84375rem;
  color: var(--kv-inkt-mat);
  line-height: 1.55;
  max-width: 320px;
}
.sd-footer__col-title {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--kv-inkt-zacht);
  margin-bottom: 12px;
}
.sd-footer__links { list-style: none; padding: 0; margin: 0; }
.sd-footer__links li { margin-bottom: 8px; }
/* SC 2.5.8 (AA): klikdoel minimaal 24x24 CSS-px. Zelfde bevinding en zelfde
   maat als splitify-design.css .sd-footer__links a -- deze kopie draagt de
   footer op de kaart-viewer/portefeuille-paginafamilie (portefeuille.html,
   gesprekken.html, kaart.html e.a., zie de kop hierboven), die
   splitify-design.css niet laadt en dus de fix daar niet meekreeg. */
.sd-footer__links a {
  display: inline-block;
  padding: 5px 4px;
  font-size: .84375rem;
  color: var(--kv-inkt-mat);
  text-decoration: none;
}
.sd-footer__links a:hover { color: var(--kv-accent-diep); }
.sd-footer__bottom {
  padding-top: 24px;
  border-top: var(--kv-lijn);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .6875rem;
  color: var(--kv-inkt-zacht);
}
.pf-context-eigen-vak { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pf-context-eigen-vak .pf-invoer { flex: 1 1 160px; min-width: 0; }

/* De modale laag zelf. Geen letterlijke kleurwaarde: de scrim leunt op de
   inkt-token met een dekking, zelfde idioom als kv-mini--rood elders. */
.pf-context-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: color-mix(in srgb, var(--kv-inkt) 35%, transparent);
}
.pf-context-dialoog {
  background: var(--kv-papier); border-radius: var(--kv-radius);
  padding: 18px; max-height: 90vh; overflow: auto;
}

/* --- Object toevoegen (#1591) ---------------------------------------------
   Adres of postcode+huisnummer invoeren zonder naar de kaart te gaan. Zelfde
   zoeksuggestievorm als #kv-zoek-suggesties (kaart.html), een eigen klasse
   omdat deze pagina die stylesheet niet laadt. */
.pf-obj-kop-rij { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.pf-obj-kop-rij .pf-blok-kop { margin: 0; }
.pf-obj-toevoegen-vak { position: relative; margin: 0 0 14px; max-width: 420px; }
.pf-obj-toevoegen-vak .pf-invoer { width: 100%; }
.pf-obj-toevoegen-lijst {
  position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin-top: 4px;
  background: var(--kv-wit); border: var(--kv-lijn); border-radius: var(--kv-radius);
  box-shadow: var(--kv-schaduw-diep); max-height: 260px; overflow-y: auto;
}
.pf-obj-toevoegen-optie { padding: 8px 12px; cursor: pointer; font-size: 13.5px; }
.pf-obj-toevoegen-optie:hover,
.pf-obj-toevoegen-optie--actief { background: var(--kv-tegel); }
/* ---------------------------------------------------------------------------
   De titel is klikbaar (#1585) -- een <button> IN de <h1>, geen eigen kleur of
   rand: hij hoort te LEZEN als de titel en pas bij hover/focus te verraden dat
   hij interactief is. Zelfde inkt als .ck-titel, geen nieuwe kleurwaarde.
--------------------------------------------------------------------------- */
.pf-naam-knop {
  font: inherit; color: inherit; background: none; border: 0; padding: 2px 4px;
  margin: 0 0 0 -4px; cursor: pointer; border-radius: var(--kv-radius-klein);
  text-align: left;
}
.pf-naam-knop:hover, .pf-naam-knop:focus-visible {
  background: var(--kv-chip);
}
.pf-naam-knop:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: 2px; }

/* --- Beschrijving, type en jouw rol (#1585) -------------------------------- */
.pf-uitleg-blok:empty { display: none; }
.pf-uitleg-blok { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 0; }
.pf-uitleg-rij { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-uitleg-rij--breed { align-items: flex-start; }
.pf-uitleg-label {
  font-family: var(--kv-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--kv-inkt-licht); min-width: 90px;
}
.pf-uitleg-tekst { flex: 1 1 320px; min-width: 0; resize: vertical; font-family: inherit; }

/* --- De archiefreden-kiezer (#1586 AC1) ------------------------------------
   Verschijnt onder de acties-rij, niet ernaast: drie knoppen plus annuleren
   passen niet naast "Naam wijzigen/Delen/Archiveren" zonder over te lopen.
   flex: 1 0 100% dwingt een eigen regel af binnen de flex-wrap van
   .pf-project-kop -- zelfde truc als .pf-regel-verdieping. */
.pf-archief-kiezer {
  flex: 1 0 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 4px; padding-top: 10px; border-top: var(--kv-lijn);
}
.pf-archief-kiezer-kop { font-size: 12.5px; color: var(--kv-inkt-zacht); }

/* --- Een korte viering bij 'verkocht' (#1586) ------------------------------
   Geen bibliotheek: valende stukjes uit de bestaande labelkleuren
   (kaart-viewer.css), geen nieuwe kleurwaarde. position:fixed zodat het
   niets in de layout duwt -- het is decoratie, geen inhoud (aria-hidden). */
.pf-confetti {
  position: fixed; inset: 0 0 auto 0; height: 0; overflow: visible;
  pointer-events: none; z-index: 500;
}
.pf-confetti-stuk {
  position: absolute; top: -16px; width: 8px; height: 14px;
  border-radius: 1px;
  animation: pf-confetti-val 1.5s ease-in forwards;
}
.pf-confetti-stuk--a { background: var(--kv-label-a); }
.pf-confetti-stuk--b { background: var(--kv-label-c); }
.pf-confetti-stuk--c { background: var(--kv-label-d); }
.pf-confetti-stuk--d { background: var(--kv-accent); }
@keyframes pf-confetti-val {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(220px) rotate(220deg); opacity: 0; }
}
/* #1586 AC3: uit bij prefers-reduced-motion -- geen animatie is de veiligste
   vorm van "uit". viertVerkocht() (project.js) laat de laag zelfs niet ontstaan
   in dat geval; deze regel is de vangrail voor het geval dat ooit anders wordt. */
@media (prefers-reduced-motion: reduce) {
  .pf-confetti { display: none; }
}

/* ---------------------------------------------------------------------------
   HET CHATPANEEL (#1592)
   Een zwevend, NIET-modaal gespreksvenster op acht pagina's. De vorm hoort hier
   en niet in een eigen blad: alle negen portefeuillepagina's laden dit bestand
   al (gemeten 5 september 2026), dus een eigen blad zou acht <link>-regels, een
   extra verzoek per pagina en een negende cachebuster kosten voor nul winst.

   NUL LETTERLIJKE KLEURWAARDEN (AC13). Alles komt uit de --kv-*-tokens van
   kaart-viewer.css, dat diezelfde negen pagina's óók allemaal laden. Poort 3 van
   qa/portefeuille-pagina-contract.test.mjs meet dat automatisch op dit bestand.

   Z-INDEX 900 IS GEMETEN, NIET GEKOZEN: #kv-nav staat op 39, .pf-confetti op
   500 en .pf-context-overlay op 1000. 900 zet het paneel boven alle
   pagina-chrome en boven de kaart, maar ONDER de modale contextkiezer (#1580) --
   die heeft een focusval en moet dus bovenop kunnen.
   --------------------------------------------------------------------------- */

.pf-chat-opener {
  position: fixed; right: 16px; bottom: 16px; z-index: 900;
  display: flex; align-items: center; gap: 8px;
  /* SC 2.5.8 (AA) eist 24x24; 44x44 is wat comfortabel werkt op een telefoon. */
  min-height: 44px; min-width: 44px; padding: 0 16px;
  background: var(--kv-accent); color: var(--kv-paneel);
  border: 0; border-radius: var(--kv-radius-klein);
  box-shadow: var(--kv-schaduw-diep);
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.pf-chat-opener:focus-visible { outline: 2px solid var(--kv-inkt); outline-offset: 3px; }
.pf-chat-opener-icoon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  /* Accent-diep, geen papier op 22% over het accent: dat gaf het vraagteken
     3,07:1 (paneel op een gemengd groen, gemeten #1346 met
     scripts/kijk-kernpaginas.mjs). Op accent-diep haalt het ruim 4,5:1. */
  background: var(--kv-accent-diep); font-size: 12px;
}

.pf-chat-paneel {
  position: fixed; z-index: 900;
  display: flex; flex-direction: column;
  /* EIGEN ONDOORZICHTIG VLAK (AC11). Het paneel zweeft boven wisselende
     ondergronden -- de kaart, een luchtfoto, een tabel -- dus elke gemeten
     contrastverhouding moet op DIT vlak rusten en niet op wat eronder ligt.
     Een half-doorzichtig paneel maakt elk contrastgetal onmeetbaar.

     GEMETEN 5 september 2026, Chrome op /pand, 1280x900, paneel open
     (SC 1.4.3 AA, eis 4,5:1 voor deze groottes -- geen enkele haalt de
     grote-tekst-uitzondering):
       verstuurknop  4,54   paneel-onder  4,63   opener-tekst  4,54
       lege-regel    5,75   paneel-titel  6,77   sluitknop     6,77
       archieflink   9,11
     Krapste 4,54:1. Volledige ronde: `node scripts/meet-contrast.mjs --eis=0`
     tegen een nepsessie-dev-server gaf 0 bevindingen over 190 van 190 pagina's
     met het paneel open. */
  background: var(--kv-paneel); color: var(--kv-inkt);
  border: var(--kv-lijn); border-radius: var(--kv-radius);
  box-shadow: var(--kv-schaduw-diep);
  overflow: hidden;
  animation: pf-chat-in 160ms ease-out;
}
.pf-chat-paneel[hidden] { display: none; }

@media (min-width: 900px) {
  .pf-chat-paneel {
    right: 16px; top: 16px; bottom: 16px;
    width: min(420px, calc(100vw - 32px));
  }
}
@media (max-width: 899px) {
  /* BOTTOM SHEET, GEEN VOL SCHERM. Een vol scherm zou de pagina eronder
     volledig bedekken; het paneel is niet modaal en zet geen `inert`, dus de
     gebruiker kan er met Tab achterlangs -- en dan is het gefocuste element
     volledig verborgen, wat SC 2.4.11 letterlijk verbiedt. Een sheet van
     maximaal 70dvh laat altijd een strook document zichtbaar en maakt de
     uitwijkregel in gesprek-paneel.js#bewaakFocus uitvoerbaar. */
  .pf-chat-paneel {
    left: 8px; right: 8px; bottom: 8px;
    max-height: min(70dvh, calc(100dvh - 16px));
  }
}

@keyframes pf-chat-in {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
/* AC12: geen beweging als de gebruiker daarom vraagt. Zelfde vorm als
   .pf-skelet::after en .pf-confetti hierboven. */
@media (prefers-reduced-motion: reduce) {
  .pf-chat-paneel { animation: none; }
}

.pf-chat-kop {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  padding: 12px 14px; background: var(--kv-kopband); color: var(--kv-paneel);
  flex: none;
}
.pf-chat-titel { font-size: 14px; font-weight: 600; }
.pf-chat-onder { font-size: 11.5px; color: var(--kv-kopband-mat); margin-top: 3px; }
.pf-chat-sluit {
  flex: none; min-width: 32px; min-height: 32px;
  background: transparent; border: 0; color: var(--kv-paneel);
  font-size: 20px; line-height: 1; cursor: pointer; border-radius: var(--kv-radius-klein);
}
.pf-chat-sluit:focus-visible { outline: 2px solid var(--kv-paneel); outline-offset: 2px; }

.pf-chat-draad {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px;
}
.pf-chat-voet { flex: none; padding: 10px 14px 12px; border-top: var(--kv-lijn); }
/* De voetregel draagt sinds ronde 3 twee dingen: 'Nieuw gesprek' en de link
   naar het archief. flex-wrap omdat ze op 304px niet naast elkaar passen --
   zelfde eis en zelfde reden als .pf-tabel-kop in poort 8 (SC 1.4.10). */
.pf-chat-archief {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 0 0; font-size: 12px;
}

.pf-chat-toegang { display: flex; flex-direction: column; gap: 8px; }

/* AC10 -- 320 CSS-px zonder scroll in twee richtingen (SC 1.4.10, AA).
   Op 320px geeft `left: 8px; right: 8px` een binnenbreedte van 304px. Wat daar
   breekt zijn de twee dingen die niet afbreken: een BAG-pandidentificatie van
   zestien cijfers en een lange bron-URL. `overflow-x: hidden` op het paneel zou
   dat verbergen in plaats van oplossen -- de meting is scrollWidth <=
   clientWidth, en die haal je alleen met echte breekregels.

   GEMETEN 5 september 2026, Chrome op /pand, viewport 320x640, paneel open met
   een antwoord van 518 tekens inclusief 0518100000276104 en een 96 tekens lange
   URL (meting M2 van #1592):
     document  scrollWidth 320 <= clientWidth 320
     paneel    scrollWidth 302 <= clientWidth 302   (buitenbreedte 304px)
     draad     scrollWidth 302 <= clientWidth 302
   Nul horizontale overloop. De opener meet daar 96 x 44 px -- ruim boven de
   24 x 24 van SC 2.5.8 (AA). */
.pf-chat-paneel *, .pf-chat-paneel *::before, .pf-chat-paneel *::after { max-width: 100%; }
.pf-chat-paneel .kv-stap-tekst,
.pf-chat-paneel .kv-notitie,
.pf-chat-paneel .kv-leeg-regel { overflow-wrap: anywhere; }
.pf-chat-draad > *, .pf-chat-voet > * { min-width: 0; }
.pf-chat-paneel .pf-nieuw-voet { flex-wrap: wrap; }
.pf-chat-paneel .pf-nieuw-vraag { width: 100%; box-sizing: border-box; }
.pf-chat-paneel .kv-stap-bronnen, .pf-chat-paneel .kv-voorstellen { flex-wrap: wrap; }
/* .kv-onderwerp (kaart-viewer.css:676) is gemaakt voor een container ZONDER
   eigen padding: hij draagt `margin: 10px 18px 0` plus `width: calc(100% - 36px)`.
   In een paneel dat zelf 14px inspringt telt die marge er bovenop -- gemeten
   5 september 2026 op 320px: paneel scrollWidth 306 tegen clientWidth 302, dus
   4px horizontale overloop en daarmee een tweede scrollrichting (SC 1.4.10).
   Hier dus de marge terug naar de paneelinspringing en een box-sizing die de
   rand meerekent. */
.pf-chat-onderwerp { flex: none; }
.pf-chat-onderwerp .kv-onderwerp {
  margin: 10px 14px 0; width: calc(100% - 28px); box-sizing: border-box;
}

/* --- Inbox (#1810) --------------------------------------------------------
   Eén persoonlijke ontvangstlijst. Geen nieuw palet, geen dark mode, geen
   kaart: alleen bestaande Kalk-tokens (--kv-papier, --kv-paneel, --kv-tegel,
   --kv-inkt, --kv-inkt-zacht, --kv-tegel-lijn, --kv-radius, --kv-accent-diep).

   DE LIJST IS EEN ECHTE <ul>, EN DAT IS DE KERN VAN DIT BLOK
     Zes van de zeven bestaande .pf-lijst-plekken zijn een <div>. Voor een
     schermlezer is er dan geen itemgrens en geen aantal: de enige scheiding is
     de haarlijn --kv-tegel-lijn (#E4DFD3) op --kv-tegel (#FBF9F3), en die meet
     1,26:1 -- ruim onder de 3:1 van SC 1.4.11. Voor een lijst met een
     wisselend aantal regels is dat te weinig, dus hier draagt de MARKUP de
     structuur (SC 1.3.1) en is de haarlijn alleen nog versiering. */
.pf-inbox-lijst { list-style: none; margin: 0; padding: 0; }
.pf-inbox-regel { border-top: 1px solid var(--kv-tegel-lijn); }
.pf-inbox-regel:first-child { border-top: 0; }

/* De rij zelf is een native <details>: openen, sluiten, Enter/Space en de
   aankondiging komen van de browser. Geen aria-expanded met de hand, geen
   klikbare rij met geneste knoppen. */
.pf-inbox-details > summary {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; cursor: pointer;
  /* SC 2.5.8: 24 CSS-px is de ondergrens; 44 is wat comfortabel werkt op een
     telefoon, en de hele regel is het doel. */
  min-height: 44px; box-sizing: border-box;
}
.pf-inbox-details > summary::-webkit-details-marker { display: none; }
.pf-inbox-details > summary:focus-visible {
  outline: 2px solid var(--kv-accent); outline-offset: -2px; border-radius: var(--kv-radius-klein);
}
.pf-inbox-kop { flex: 1 1 auto; min-width: 0; }

/* LANGE BESTANDSNAMEN BLIJVEN VOLLEDIG BEREIKBAAR
   .pf-regel-titel (regel 479) is `white-space: nowrap` met ellipsis. Het Design
   van #1810 eist het omgekeerde, en een `title=`-attribuut is geen oplossing:
   dat is niet bereikbaar met het toetsenbord en niet op een aanraakscherm.
   Daarom hier normaal aflopende tekst die overal mag breken -- ook midden in
   een woord, want een bestandsnaam heeft geen spaties. */
.pf-inbox-titel {
  font-weight: 600;
  white-space: normal; overflow: visible; text-overflow: clip;
  overflow-wrap: anywhere; word-break: normal;
}
.pf-inbox-meta { font-size: 12.5px; color: var(--kv-inkt-zacht); margin-top: 3px; }
/* Status ALTIJD in woorden; kleur is nooit de enige onderscheiding. */
.pf-inbox-status { font-size: 12.5px; color: var(--kv-inkt-mat); margin-top: 3px; }
.pf-inbox-bron {
  flex: none; align-self: flex-start;
  font-family: var(--kv-font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--kv-inkt-zacht); background: var(--kv-chip);
  border: 1px solid var(--kv-chip-rand); border-radius: 999px; padding: 3px 9px;
}

/* Het geopende deel blijft in de leesvolgorde: geen zijpaneel, geen overlay. */
.pf-inbox-blad { padding: 0 14px 14px; }
.pf-inbox-bron-tekst {
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 14px; line-height: 1.5; margin: 0 0 10px;
}
.pf-inbox-veld { font-size: 12.5px; color: var(--kv-inkt-zacht); margin: 0 0 4px; }

/* CLS: de bijlagenplek heeft een vaste ondergrens, zodat het openen van een rij
   de inhoud eronder niet wegduwt zodra het detail binnen is. Geen skeleton en
   geen shimmer -- een vaste hoogte met een regel tekst erin doet hetzelfde
   zonder beweging (prefers-reduced-motion). */
.pf-inbox-bijlagen { list-style: none; margin: 8px 0 0; padding: 0; min-height: 44px; }
.pf-inbox-bijlage {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 0; min-height: 32px;
}
.pf-inbox-bijlage-naam { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.pf-inbox-acties { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* De voet: "Meer laden" plus een rustige statusregel ernaast. */
.pf-inbox-voet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 0; }
.pf-inbox-teller { font-size: 12.5px; color: var(--kv-inkt-zacht); margin: 0; }
.pf-inbox-teller:focus-visible { outline: 2px solid var(--kv-accent); outline-offset: 3px; }

/* Laden: een vaste plaats met één regel in woorden. */
.pf-inbox-laden { min-height: 64px; padding: 16px 0; }
.pf-inbox-laadregel { font-size: 14px; color: var(--kv-inkt-zacht); margin: 0; }

/* Limiet bereikt: dezelfde .pf-melding-basis, met een eigen randkleur die
   NAAST de tekst staat en niet in plaats daarvan. */
.pf-inbox-limiet { border-color: var(--kv-accent-diep); }

/* De verwijderdialoog. Native <dialog>, dus focusbegrenzing en Escape komen van
   de browser; hier alleen de maat en de tokens. */
.pf-inbox-dialoog {
  max-width: 420px; width: calc(100vw - 32px); box-sizing: border-box;
  border: var(--kv-lijn); border-radius: var(--kv-radius);
  background: var(--kv-paneel); color: var(--kv-inkt); padding: 20px;
}
/* Dezelfde sluier als #kv-mogelijk-dialoog in kaart-viewer.css: het bestaande
   token --kv-schim-kanalen. Geen tweede palet en geen kale kleurwaarde. */
.pf-inbox-dialoog::backdrop { background: rgba(var(--kv-schim-kanalen), .42); }
.pf-inbox-dialoog h2 { font-size: 18px; margin: 0 0 10px; }
.pf-inbox-dialoog p { font-size: 14px; color: var(--kv-inkt-mat); margin: 0 0 8px; }
.pf-inbox-dialoog-bij { color: var(--kv-inkt-zacht); }
.pf-inbox-dialoog-knoppen { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }

/* Mobiel: één kolom, datum en bron onder de titel, acties mogen ombreken.
   Gemeten doel: 320 CSS-px zonder horizontale scroll (SC 1.4.10). */
@media (max-width: 560px) {
  .pf-inbox-details > summary { gap: 6px; }
  .pf-inbox-bron { order: 2; }
  .pf-inbox-kop { flex: 1 1 100%; order: 1; }
  .pf-inbox-acties .pf-knop { min-height: 44px; }
}

/* Geen verplichte animatie. De <details>-opening is de browserstandaard en die
   respecteert deze voorkeur al; dit blok is er voor het geval een latere
   wijziging er een overgang bij zet. */
@media (prefers-reduced-motion: reduce) {
  .pf-inbox-details, .pf-inbox-blad { transition: none !important; animation: none !important; }
}

/* === INBOX-INVOER (#1811) ==========================================

/* --- 17 september 2026: de brede kolom vult zich, hij rekt niet uit ----------
 * De kolom ging op 6 september van 940 naar 1272px op eigen verzoek. Wat toen
 * niet meebewoog is de INHOUD: vier tellers en een tabel met één regel werden
 * over die hele breedte uitgesmeerd, en dan leest een gevulde pagina als een
 * lege. Gemeten voor deze wijziging: één tegel 307x69px met een waarde van
 * 17px erin, en 116px dode ruimte eronder.
 * De pagina blijft dus 1272px -- een project met veel objecten gebruikt die
 * ruimte echt -- maar de tellerrij krijgt een eigen plafond en compactere
 * tegels. De tabel niet: die WIL breed zijn zodra er rijen in staan.
 */
#pf-werkoverzicht .kv-tegels,
#pf-werkoverzicht [class*="tegel"]:not(.kv-tegel):not([class*="waarde"]):not([class*="label"]) {
  max-width: 940px;
}
#pf-werkoverzicht .kv-tegel { padding: 10px 12px 11px; }
#pf-werkoverzicht .kv-tegel-label { font-size: 12px; }
#pf-werkoverzicht .kv-tegel-waarde { font-size: 15px; line-height: 1.25; }

/* ===========================================================================
 * DE KOPBAND HOORT BIJ HET WERKBLAD (eigenaar, 1 oktober 2026)
 * ---------------------------------------------------------------------------
 * "Hier wordt nu tekst op de zwevende achtergrond geplaatst, ook bij
 * portefeuille en dossier -- dat is vreemd ontwerp."
 *
 * Klopt. De terugweg, de titel, de ondertitel en de chips stonden op het
 * kadastrale weefsel, en daaronder begon pas het witte vlak. Gemeten: de
 * kopband was doorzichtig, het werkblad --kv-paneel, maar ze staan al exact
 * even breed op dezelfde linkerrand met NUL ruimte ertussen. Ze waren dus al
 * één kaart; alleen de bovenste helft had geen grond.
 *
 * Daarom geen nieuwe opbouw en geen wijziging in zes HTML-bestanden: de
 * kopband krijgt dezelfde grond, een ronde bovenrand, en het werkblad eronder
 * verliest zijn bovenrand. Samen één vlak van de titel tot de voet.
 *
 * clip-path knipt de schaduw aan de ONDERKANT weg. Zonder dat valt de schaduw
 * van de kopband op het werkblad en zie je precies de naad die we weghalen.
 * ======================================================================== */
.ck-kopband {
  background: var(--kv-paneel);
  border: var(--kv-lijn);
  border-radius: var(--kv-radius);
  box-shadow: var(--kv-schaduw);
  padding: 22px 24px 16px;
}
/* NIET de directe buur, maar een latere. Op /portefeuille staan tussen de
   kopband en het werkblad drie verborgen blokken (uitgelogd, skelet, melding);
   met `+` pakte de regel daar niet en bleef de kopband een losse kaart met een
   rechte onderkant. Gemeten: werkblad op 12 px afstand, drie broers ertussen
   met display:none.
   :has() zorgt dat de kopband alleen zijn onderrand verliest als er ECHT een
   werkblad volgt -- op een pagina zonder werkblad blijft hij een hele kaart in
   plaats van een afgeknotte. */
.ck-kopband:has(~ .pf-werkblad) {
  border-bottom: 0;
  border-radius: var(--kv-radius) var(--kv-radius) 0 0;
  /* Zonder deze knip valt de schaduw van de kopband op het werkblad, en dat is
     precies de naad die we weghalen. */
  clip-path: inset(-24px -24px 0 -24px);
}
.ck-kopband ~ .pf-werkblad {
  border-top: 0;
  border-radius: 0 0 var(--kv-radius) var(--kv-radius);
}
/* ALLEEN als .pf-app zelf de ouder is. Die is een kolomflex met een gat van
   12px TUSSEN ELK PAAR, en dat gat laat een streep weefsel staan midden in wat
   één kaart hoort te zijn (gemeten op /portefeuille). Op /pand en /project zit
   het paar in <main> -- daar is GEEN gap, en een blinde -12px trok het werkblad
   12px OVER de kopband heen (gemeten: naad -12). Vandaar de afbakening op de
   directe ouder in plaats van een vaste correctie overal. */
.pf-app > .ck-kopband ~ .pf-werkblad {
  margin-top: calc(-1 * var(--pf-app-gat, 12px));
}
@media (max-width: 860px) {
  .ck-kopband { padding: 16px 14px 12px; }
}