/* Aktsyn | wat de app eigen heeft, bovenop de stylesheet van demo v13 (app/css/v13.css, eerst geladen).
   UI-REGELS.md: v13 is de norm. Hier alleen: fonts (zelf gehost), de basis van de app (aanmelden, knoppen in plaats van
   div's), de ontwerpregels van Nils die boven de demo gaan, de laders (Ontwerp/Laders), app-eigen schermdelen die v13
   niet heeft, en CSP-vervangers voor inline style= uit de demo. Een regel voor iets dat in v13 bestaat, hoort hier niet. */
/* IBM Plex, zelf gehost (app/haal-fonts.sh): de app laadt niets van derden */
/* IBM Plex, zelf gehost (app/haal-fonts.sh): de app laadt niets van derden */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../vendor/fonts/IBMPlexSans-Regular-Latin1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../vendor/fonts/IBMPlexSans-Medium-Latin1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../vendor/fonts/IBMPlexSans-SemiBold-Latin1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:500;font-display:swap;src:url('../vendor/fonts/IBMPlexSerif-Medium-Latin1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:600;font-display:swap;src:url('../vendor/fonts/IBMPlexSerif-SemiBold-Latin1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../vendor/fonts/IBMPlexMono-Regular-Latin1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../vendor/fonts/IBMPlexMono-Medium-Latin1.woff2') format('woff2')}

/* ===== Basis van de app ===== */
*{margin:0;padding:0}
[hidden]{display:none!important}
#app{min-height:100vh}
body{overflow:hidden}
.aanmeld{min-height:100vh;display:grid;place-items:center;padding:24px;overflow:auto}
.aanmeld-kaart{width:100%;max-width:380px;background:#fff;border-radius:14px;padding:36px 32px;box-shadow:var(--sh-hi)}
.woordmerk{font-family:'IBM Plex Serif',Georgia,serif;font-weight:600;font-size:26px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.woordmerk small{display:block;font-family:var(--sans);font-weight:400;font-size:12px;color:var(--zacht);letter-spacing:0}
.aanmeld p{margin:18px 0 24px;color:var(--zacht)}
.knop{border:none;border-radius:var(--r-btn);padding:10px 18px;cursor:pointer;background:none}
.knop-hoofd{background:var(--petrol);color:#fff;font-weight:500;width:100%}
.knop-hoofd:hover{background:var(--petrol-d)}
.knop-tekst{color:var(--petrol);padding:6px 8px}
.knop-tekst:hover{text-decoration:underline}
.knop:disabled{opacity:.5;cursor:default}
/* De schil (v13: .app, .side, .main, header.top, .view). De kantoornaam kan lang zijn: op één regel. */
.brand small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.usr span.r{text-align:left}
/* De app gebruikt <button> waar v13 een <div> met data-act heeft: volle breedte en links uitgelijnd */
.menu .mi,.palette .pi,button.akrij{width:100%;text-align:left}
.fout-tekst{color:var(--err);font-size:13px}
.modal .fout-tekst,.drawer .fout-tekst{margin-top:12px}
.verplicht{color:var(--err)}
.m0{margin-top:0}.mb0{margin-bottom:0}.mb8{margin-bottom:8px}
.mt12{margin-top:12px}
.accent{color:var(--petrol-d)}
.ok-tekst{color:var(--ok)}
.centreer{text-align:center}
.spread{justify-content:space-between}
.row.wrap{flex-wrap:wrap}
.groot{font-size:19px;font-weight:500}
.inp.smal{max-width:140px}
.inp.breed{width:100%}
.btn.breed{width:100%;justify-content:center}
.empty svg.g{width:40px;height:40px;color:var(--ijs);margin-bottom:8px}
input[type=checkbox],input[type=radio]{accent-color:var(--petrol)}
/* Diagnose (UI-REGELS.md, hoofdstuk 8): de regel onderaan alleen met aktsynDiagnose(true) */
.voet{padding:10px 32px;font-size:12px;color:var(--zacht);border-top:1px solid var(--haar);font-family:var(--mono)}

/* ===== Ontwerpregels Nils (CLAUDE.md, 8 okt), gaan boven de demo =====
   Gekozen of gemarkeerd = kader en lichte invulling in de accentkleur, zoals de bibliotheken onder Documenten in v13
   (.lib button.on). v13 heeft hier een ring van 2 px zonder invulling. */
.tile.on{background:var(--ijsl);box-shadow:inset 0 0 0 1.5px var(--petrol), var(--sh)}
.pk.on{background:var(--ijsl);box-shadow:inset 0 0 0 1.5px var(--petrol), var(--sh)}
.chain .cs.on{background:var(--ijsl);box-shadow:inset 0 0 0 1.5px var(--petrol)}
.tag.kader{background:var(--ijsl);color:var(--petrol-d);box-shadow:inset 0 0 0 1.5px var(--petrol)}
.inp.gewijzigd{background:var(--ijsl);box-shadow:inset 0 0 0 1.5px var(--petrol)}
.tbl tr.gekozen td{background:var(--ijsl)}

/* ===== App-eigen schermdelen (niet in v13) ===== */
/* V3 calculatie: knop met vinkje rechtsboven de tegel; zonder prijsbon; tekstblokken */
.tile b{padding-right:28px}
.tile.groot{padding:18px 20px}
.tile.groot b{font-size:16px}
.tile.groot p{font-size:13.5px}
.tiles.drie{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile .opties{margin-top:10px;padding-top:10px;border-top:1px solid var(--haar);display:grid;gap:7px}
.bon .bonknop{padding:0 20px 16px}
.bon .model .row{gap:14px}
.slider b{font-weight:500}
.slider input[type=range]{accent-color:var(--petrol);width:100%}
.cx.kop{padding-top:0}
.cx b{font-weight:500}
.scale .zones .z0{background:var(--ijsl)}
.scale .zones .z1{background:var(--ijs)}
.scale .zones .z2{background:var(--petrol)}
.calc.zonderbon{grid-template-columns:minmax(0,1fr)}
.calc.zonderbon #bon{display:none}
.tafel .tt .eind{justify-content:flex-end;gap:10px}
.tafel .sect{margin-top:34px}
.tafel .row.boven{align-items:flex-start}
.tafel .reuze{font-size:56px;line-height:1}
.tafelopen .toast{bottom:96px}
.tuw .c b.xl{font-size:44px}
.tuw.twee{grid-template-columns:1fr 1fr;margin:0;align-content:start}
.tuw .c.heel{grid-column:1 / -1}
.tvd.een{grid-template-columns:1fr;margin:0}
.dots11{flex-wrap:wrap}
.tafelslot{display:grid;grid-template-columns:1fr 1.3fr;gap:20px;margin-top:30px}
.kolommen{columns:2;font-size:14px;margin-top:10px}
.kolommen div{margin-bottom:6px}
.lijnboven{padding-top:14px;border-top:1px solid var(--haar);gap:14px}
.kv.een{grid-template-columns:1fr 1fr}
.tekstrij{padding:10px 0;border-bottom:1px solid var(--haar)}
.tekstrij:last-child{border-bottom:0}
.tekstrij .row{gap:8px;margin-bottom:6px}
.tekstrij textarea{font:13px/1.5 var(--sans)}
/* V4: het voorstel als voorbeeld op papier, in de huisstijl van het kantoor (zoals het document in Word) */
.docraam{background:var(--veld);border-radius:12px;padding:22px}
.doc{box-shadow:var(--sh);border-radius:4px;padding:40px 46px;font-size:13.5px;max-width:760px;margin:0 auto}
.doc .lh{gap:20px;padding-bottom:16px;border-bottom:2px solid var(--petrol)}
.doc .doclogo{height:42px;width:auto;display:block;margin-bottom:6px}
.doc .docnaam{font-size:17px;font-weight:600;color:var(--petrol)}
.doc .aanadres{margin-bottom:18px}
.doc h2{font-size:21px;font-weight:600;color:var(--petrol);margin-bottom:2px}
.doc h4{font-size:14.5px;font-weight:600;color:var(--petrol);margin:20px 0 8px}
.doc p{margin:0 0 10px}
.doc ul{margin:0 0 6px;padding-left:18px}
.doc table{font-size:12.5px;margin-bottom:6px}
.doc th,.doc td{padding:6px 8px}
.doc th{font-weight:600;font-family:var(--sans);font-size:12.5px;text-transform:none;letter-spacing:0;color:var(--ink)}
.doc .ab{background:var(--ijsl)}
.doc th.ab{color:var(--petrol-d)}
.doc .groet{margin-top:18px}
.mailtekst{font:13px/1.55 var(--sans);min-height:260px}
.somlijst{display:grid;gap:0}
.somlijst>div{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px solid var(--haar);font-size:12.5px}
.somlijst>div:last-child{border-bottom:0}
.somlijst>div span:first-child{color:var(--zacht);flex:none}
.somlijst>div span:last-child{text-align:right}
/* V5: goedkeuring en reactie */
.panel>.col{gap:8px;align-items:flex-start}
.tabs .c.teller{background:var(--petrol);color:#fff;border-radius:9px;padding:0 6px;font-weight:600}
.gkkaart h3{font-size:19px}
.rechten{width:100%;border-collapse:collapse;margin-top:6px}
.rechten th,.rechten td{padding:7px 8px;border-bottom:1px solid var(--haar);text-align:left;font-size:13px}
.rechten td.c,.rechten th.c{text-align:center}
.tblscroll{overflow-x:auto}
.tblscroll .inp{min-width:120px}
.gevolgen .okrij{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--haar)}
.gevolgen .okrij:last-child{border-bottom:0}
.gevolgen .okrij .ok{width:20px;height:20px;border-radius:50%;background:var(--ok-l);color:var(--ok);display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.gevolgen .okrij b{display:block;font-weight:500;font-size:13.5px}
.gevolgen .okrij span{font-size:12.5px;color:var(--zacht)}
/* V2: prijsmodel, de waarde in de geldende versie onder een cel */
.was{display:block;font-size:11px;color:var(--zacht);font-family:var(--mono);margin-top:2px}
.inp.getal{text-align:right;max-width:130px;margin-left:auto}
/* V1c: klanten inlezen (stappen, tekst, voorbeeld) */
.ilstappen{display:flex;gap:6px;margin:0 0 14px}
.ilstappen span{font-size:12.5px;padding:4px 10px;border-radius:7px;background:var(--veld);color:var(--zacht)}
.ilstappen span.on{background:var(--petrol);color:#fff}
.ilstappen span.klaar{background:var(--ijsl);color:var(--petrol-d)}
.iltekst{min-height:220px;font-size:12.5px;resize:vertical;white-space:pre}
.iltabel{max-height:46vh;overflow:auto;margin-bottom:10px}
.ilteller{display:flex;gap:18px;align-items:center;margin-bottom:10px;font-size:13.5px;flex-wrap:wrap}
/* V2b: personenkiezer uit Entra (alleen Gebruikers) */
.pkiezer .search{width:100%}
.pk-lijst{display:flex;flex-direction:column;margin-top:6px;max-height:260px;overflow-y:auto}
.pk-rij{display:flex;gap:10px;align-items:center;text-align:left;padding:8px 10px;border-radius:var(--r-btn)}
.pk-rij:hover{background:var(--ijsvlak)}
.pk-rij.bekend{opacity:.55;cursor:default}
.pk-rij b{display:block;font-weight:500}
.pk-status{margin-top:4px;min-height:16px}
/* V2c: autorisatiebeheer, keuzelijst links en toegang rechts (model van de Power App Toegangsbeheer) */
.aklijst{max-height:560px;overflow:auto;margin-top:10px}
.akzoek{padding:12px 16px 10px}
.akzoek .search{min-width:0}
.akrij{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:9px 16px;border-top:1px solid var(--haar)}
.akrij.klik{cursor:pointer}
.akrij.klik:hover{background:var(--veld)}
.akrij.on{background:var(--ijsl);box-shadow:inset 0 0 0 1.5px var(--petrol)}
.akrij.on .nm b{color:var(--petrol-d)}
.akrij .nm{flex:1 1 170px;min-width:0}
.akrij .nm b{display:block;font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.akrij .nm span{display:block;font-size:12.5px;color:var(--zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.akrij.al{color:var(--zacht)}
.akrij.al .nm b{text-decoration:line-through;color:var(--zacht)}
.akrij input[type=checkbox]{flex:none}
.akvoet{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--haar)}
/* W1: workflowsjablonen en de builder (keten zonder afbreken, stappen met velden) */
.chain.bld{overflow-x:auto;padding:2px}
.fld .row{flex-wrap:wrap}
.fld .row>.seg{flex:none;max-width:100%}
.chain .cs .l2 .nieuw{color:var(--petrol-d);font-weight:500}
.wfcard h3{flex:1}
.ci .t{display:flex;flex-direction:column;gap:6px}
.ci .nrk{margin-top:7px}
.ci .ib{margin-top:4px}
.kvrij{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start}
.kvi .inp{min-height:32px;padding:5px 9px}
.inp.dagen{width:78px;text-align:right}
.rules div svg{flex:none}
.sjraam{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:18px;align-items:start}
.vierogen{display:flex;gap:10px;align-items:center;font-size:13px;padding:8px 12px;border-radius:10px;margin-bottom:12px;background:var(--veld)}
.vierogen.goed{background:var(--ok-l);color:var(--ok)}
.vierogen.fout{background:var(--err-l);color:var(--err)}
.controle{display:grid;gap:6px;margin:0 0 14px}
.controle div{display:flex;gap:8px;align-items:flex-start;font-size:13px}
.controle .fout{color:var(--err)}
.controle .waar{color:var(--zacht)}
.controle svg{flex:none;margin-top:1px}
.opslag{font-size:12px;color:var(--zacht)}
@media (max-width:1360px){ .chain .cs{padding:9px 10px} .chain .ca{width:12px} }
@media (max-width:1100px){ .sjraam{grid-template-columns:1fr} .sjraam .fld{grid-template-columns:1fr;gap:4px} }
/* W3: bezetting (.pzet in een venster mag afbreken) */
.pzet{flex-wrap:wrap}
.pzet .inp.sm{width:auto;min-width:200px;padding:5px 8px;font-size:13px}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ===== App-eigen en CSP-vervangers die eerder in het overgangsblok stonden ===== */
/* v13 zet de breedte van brede pagina's inline (style="max-width:1360px" bij de calculatie) */
.page.breed{max-width:1360px}
/* v13 kkop: <div style="flex:1;min-width:0"> om naam en meta */
.kkop .t{flex:1;min-width:0}
.kkop-naam{font-size:20px;font-weight:500}
a.klrow.klik{color:inherit;cursor:pointer}
a.klrow.klik:hover b{color:var(--petrol-d)}
/* Inlezen (V1c): een fout in het venster */
.melding{border-radius:12px;padding:16px 18px;background:var(--err-l);color:var(--ink);display:flex;gap:16px;align-items:flex-start}
.melding strong{display:block;color:var(--err);margin-bottom:2px}
.melding .knop-tekst{margin-left:auto;white-space:nowrap}

/* ===== Smal venster (zoals v13 inklapt; de app ook op een tablet en telefoon) ===== */
@media (max-width:860px){
  body{overflow:auto}
  /* minmax(0,1fr): de menubalk scrolt zelf en maakt de pagina niet breder (W4, met Vandaag in het menu) */
  .app{grid-template-columns:minmax(0,1fr);height:auto}
  .side,.navscroll{min-width:0;max-width:100%}
  .grid.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .side{flex-direction:row;flex-wrap:wrap;align-items:center}
  .navscroll{display:flex;gap:4px;overflow-x:auto}
  .navscroll .ngroup{display:flex;gap:4px;margin:0}
  .navscroll .nk{display:none}
  .sidefoot,.goto kbd{display:none}
  header.top{padding:0 16px}
  .today{display:none}
  .pfknop>span:not(.pfi){display:none}
  .usr>span:not(.av),.usr>svg{display:none}
  .navscroll .nitem{white-space:nowrap}
  header.top{gap:8px}
  .page{padding:18px 16px 40px}
  .drawer{width:100vw;max-width:100vw}
  .drawer .fld,.modal .fld,.fld{grid-template-columns:1fr;gap:4px}
  .drawer .db{padding:14px 14px 24px}
  .drawer .df{padding:12px 14px;gap:12px}
  .s6,.calc,.pk3,.tpk,.tafelslot,.tvd,.akgrid,.akgrid2,.grid.g2,.grid.g3,.grid.g21{grid-template-columns:1fr}
  .stepper{grid-template-columns:1fr}
  .tiles,.tiles.drie,.tuw,.kv{grid-template-columns:1fr 1fr}
  .bon{position:static}
  .slider{grid-template-columns:minmax(0,1fr) 40px 120px 24px}
  .tafel .tt,.tafel .tb,.tafel .tf{padding-left:16px;padding-right:16px}
  .tafel .tt{grid-template-columns:1fr auto}
  .tafel .tsteps{grid-column:1 / -1;order:3;overflow-x:auto;justify-content:flex-start}
  .tafel h1{font-size:28px}
  .doc{padding:22px}
  .tblwrap{overflow-x:auto}
  .tbl td .inp{min-width:90px}
  .kkop{gap:12px}
  .klrow{grid-template-columns:38px minmax(0,1fr)}
  .klrow>div:nth-child(3),.klrow>div:nth-child(4){display:none}
  .prods{grid-template-columns:1fr 1fr}
}

/* ===== W1L: laders (Ontwerp/Laders/LADERS.md) =====
   Accentkleur van het kantoor (--petrol en afgeleiden uit huisstijl.js), messing alleen voor het zegel (A en C),
   het startscherm op blauwgrafiet. html.rustig (gezet door voorstart.js bij prefers-reduced-motion): geen beweging,
   wel de teksten en de eindstand. */
:root{--grafiet:#1E2B33;--grafiet-fg:#FAF9F6;--grafiet-z:#9FB2BA;--ft-pdf:#B5624F;--ft-docx:#3D6B9C;--ft-xlsx:#3E8A6A}
.tekstactie{font:500 13.5px/1.4 var(--sans);color:var(--petrol);background:none;border:0;padding:0;cursor:pointer;white-space:nowrap}
.tekstactie:hover{color:var(--petrol-d);text-decoration:underline}

/* A en B: startscherm, staat al in index.html vóór de modules */
.start{position:fixed;inset:0;z-index:90;background:var(--grafiet);color:var(--grafiet-fg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;padding:24px;transition:opacity .3s}
.start.weg{opacity:0;pointer-events:none}
.start-merk{display:flex;flex-direction:column;align-items:center;gap:14px}
.merk-a{width:78px;height:78px;overflow:visible}
.merk-a .l,.merk-a .r,.merk-a .z,.merk-a .ring{transform-box:view-box}
.merk-a .l{transform-origin:20px 34px;transform:rotate(14deg);fill:var(--grafiet-fg)}
.merk-a .r{transform-origin:44px 34px;transform:rotate(-14deg);fill:var(--ijs)}
.merk-a .z{transform-origin:32px 41px;fill:var(--messing)}
.merk-a .ring{transform-origin:32px 41px;fill:none;stroke:var(--messing);stroke-width:1.2;opacity:0}
.start-woord{font:600 30px/1 'IBM Plex Serif',Georgia,serif;letter-spacing:.01em}
.start-kantoor{font:12.5px/1 var(--mono);color:var(--grafiet-z);min-height:13px;opacity:0;transition:opacity .6s}
.start-kantoor.aan{opacity:1}
html:not(.a-eind) .merk-a .l{animation:aLIn .75s cubic-bezier(.2,.8,.2,1) both}
html:not(.a-eind) .merk-a .r{animation:aRIn .75s .12s cubic-bezier(.2,.8,.2,1) both}
html:not(.a-eind) .merk-a .z{animation:aZIn .32s .68s cubic-bezier(.6,0,.9,.6) both,adem 2.6s 2.2s ease-in-out infinite}
html:not(.a-eind) .merk-a .ring{animation:aRing .8s 1s ease-out both}
html:not(.a-eind) .start-woord{animation:aOp .6s 1.05s ease-out both}
html.a-eind .merk-a .z{animation:adem 2.6s 1s ease-in-out infinite}
@keyframes aLIn{from{transform:translateY(12px) rotate(0deg);opacity:0}to{transform:translateY(0) rotate(14deg);opacity:1}}
@keyframes aRIn{from{transform:translateY(12px) rotate(0deg);opacity:0}to{transform:translateY(0) rotate(-14deg);opacity:1}}
@keyframes aZIn{from{transform:scale(2.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes aRing{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.8);opacity:0}}
@keyframes adem{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes aOp{from{transform:translateY(6px);opacity:0}to{transform:translateY(0);opacity:1}}
.start-regels{list-style:none;width:min(460px,90%);min-height:120px;display:flex;flex-direction:column;gap:8px}
.start-regels li{display:flex;align-items:center;gap:10px;font:13px/1.4 var(--mono);color:var(--grafiet-fg);transition:opacity .4s,color .4s}
.start-regels li.oud{color:var(--grafiet-z);opacity:.75}
.start-regels li.fout{color:#F2B8AE;opacity:1;align-items:flex-start;flex-wrap:wrap}
.start-regels li.fout .ldr-tx{white-space:normal}
.start-regels li.fout b{font-weight:500;color:#fff}
.start-regels .tekstactie,.start-actie .tekstactie{color:var(--ijs)}
.st{width:14px;height:14px;flex:none;display:grid;place-items:center}
.bezig .st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ijs);animation:puls 1s ease-in-out infinite}
.st svg{width:14px;height:14px;fill:none;stroke:var(--ijs);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.start-regels .ldr-tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes puls{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1.15);opacity:1}}
.start-actie{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;max-width:380px;color:var(--grafiet-z)}
.start-actie .knop-hoofd{width:auto;padding:10px 22px}

/* D: bovenrand, denkregel en skelet */
.ldr{position:relative}
.ldr-rand{position:sticky;top:0;height:2px;margin-bottom:-2px;overflow:hidden;opacity:0;transition:opacity .2s;z-index:5}
.ldr-rand::before{content:"";position:absolute;top:0;height:100%;width:35%;background:var(--petrol);animation:rand 1.2s ease-in-out infinite}
@keyframes rand{from{left:-35%}to{left:100%}}
/* De lijn pas als het echt duurt (vanaf 1,5 s, met de denkregel); bij korte wachttijden alleen het skelet (Nils 11 okt) */
.ldr[data-fase="denk"] .ldr-rand,.ldr[data-fase="lang"] .ldr-rand{opacity:1}
.ldr-regel{min-height:20px;margin:0 0 10px;color:var(--petrol);font-size:12.5px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;opacity:0;transition:opacity .3s}
.ldr[data-fase="denk"] .ldr-regel,.ldr[data-fase="lang"] .ldr-regel,.ldr[data-fase="fout"] .ldr-regel{opacity:1}
.ldr[data-fase="lang"] .ldr-regel{color:var(--ink)}
.ldr-regel.fout{color:var(--err)}
.ldr-regel.fout b{font-weight:600}
.ldr-regel.fout .uitleg{color:var(--zacht)}
.ldr-sk{opacity:0;transition:opacity .2s}
.ldr[data-fase="skelet"] .ldr-sk,.ldr[data-fase="denk"] .ldr-sk,.ldr[data-fase="lang"] .ldr-sk{opacity:1}
.sk{display:block;border-radius:5px;background:linear-gradient(90deg,var(--veld) 0%,var(--veld-h) 45%,var(--veld) 90%);background-size:220% 100%;animation:glans 2.2s ease-in-out infinite}
@keyframes glans{from{background-position:110% 0}to{background-position:-110% 0}}
.sk.t{height:9px}.sk.big{height:20px}
.sk.chip{width:54px;height:16px;border-radius:4px;flex:none;margin-left:auto}
.sk.zoek{width:280px;height:34px;border-radius:9px}.sk.knop{width:96px;height:34px;border-radius:9px}
.sk.tab{width:92px;height:30px;border-radius:8px}.sk.stap{flex:1;height:34px;border-radius:9px}
.w10{width:10%}.w12{width:12%}.w14{width:14%}.w16{width:16%}.w20{width:20%}.w24{width:24%}.w28{width:28%}.w30{width:30%}.w36{width:36%}.w38{width:38%}.w40{width:40%}.w45{width:45%}.w48{width:48%}.w50{width:50%}.w52{width:52%}.w56{width:56%}.w60{width:60%}.w64{width:64%}.w70{width:70%}.w80{width:80%}
.skbalk{display:flex;gap:10px;align-items:center;margin-bottom:14px}
.skpanel{padding:0 16px}
.skrij{display:flex;align-items:center;gap:18px;height:45px;border-top:1px solid var(--haar)}
.skrij:first-child{border-top:0}
.skrij .sk.t{flex:none}
.sktegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
.sktegel{padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-height:86px}
.sktegel.hoog{min-height:150px}
.sktwee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.skpaneel .skrij{height:38px}
@media (max-width:900px){.sktegels{grid-template-columns:1fr}.sktwee{grid-template-columns:1fr}.sk.zoek{width:60%}}


/* E: de stapel */
.e-veld{display:flex;flex-direction:column;align-items:center;gap:16px;padding:26px 0 18px}
.stapel{position:relative;width:64px;height:76px}
.vel{position:absolute;inset:0;--r:0deg}
.vel svg{width:64px;height:76px;overflow:visible}
.vel .blad{fill:#fff;stroke:var(--ink);stroke-width:1.7;stroke-linejoin:round}
.vel .vouw{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linejoin:round}
.vel .lbl{fill:var(--petrol)}
.vel .lbl.pdf{fill:var(--ft-pdf)}.vel .lbl.docx{fill:var(--ft-docx)}.vel .lbl.xlsx{fill:var(--ft-xlsx)}
.vel .lbltx{font:500 6.5px var(--mono);fill:#fff;text-anchor:middle}
.vel.basis{opacity:.45}
.vel.basis.b1{transform:translate(-5px,4px) rotate(-5deg)}
.vel.basis.b2{transform:translate(4px,6px) rotate(4deg)}
.vel.val{opacity:0;animation:val 2.4s cubic-bezier(.3,.7,.3,1) infinite}
.vel.v1{--r:-2deg}.vel.v2{--r:3deg;animation-delay:.8s}.vel.v3{--r:-1deg;animation-delay:1.6s}
@keyframes val{0%{transform:translateY(-48px) rotate(-10deg);opacity:0}18%{transform:translateY(0) rotate(var(--r));opacity:1}72%{transform:translateY(0) rotate(var(--r));opacity:1}100%{transform:translateY(10px) rotate(var(--r)) scale(.96);opacity:0}}
.e-teller{font:13px/1.4 var(--mono);color:var(--ink);text-align:center;font-variant-numeric:tabular-nums}
.mini{display:inline-flex;gap:2px;align-items:flex-end;height:11px;margin-right:2px}
.mini i{width:6px;height:9px;border-radius:1.5px;background:#fff;opacity:0;animation:mval 1.2s ease-out infinite}
.mini i:nth-child(2){animation-delay:.25s}.mini i:nth-child(3){animation-delay:.5s}
@keyframes mval{0%{transform:translateY(-6px);opacity:0}30%{transform:none;opacity:1}75%{opacity:1}100%{opacity:0}}
.btn:disabled .mini i{background:#fff}

/* C: de draad (Definitief) */
.draad{padding:6px 34px 0}
.baan{position:relative;height:18px}
.spoor,.draad .vol{position:absolute;top:8px;height:2px;border-radius:2px;left:0}
.spoor{right:0;background:var(--haar)}
.draad .vol{background:var(--petrol);transition:width .9s cubic-bezier(.4,0,.2,1)}
.stp{position:absolute;top:3px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--haar-s);transform:translateX(-50%)}
.stp.gedaan{box-shadow:inset 0 0 0 2px var(--petrol)}
.stp.zegel{background:var(--messing);box-shadow:none}
.stp.zegel::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1.2px solid var(--messing);animation:aRing .8s ease-out both}
.bol{position:absolute;top:2px;width:14px;height:14px;border-radius:50%;background:var(--petrol);transform:translateX(-50%)}
.bol.wacht{animation:puls 1s ease-in-out infinite}
.namen{position:relative;height:36px;margin-top:6px}
.namen span{position:absolute;transform:translateX(-50%);text-align:center;font-size:11.5px;line-height:1.3;color:var(--zacht);white-space:nowrap}
.namen span i{display:block;font-style:normal;font-family:var(--mono);font-size:11px}
.namen span.hier{color:var(--ink)}
.draad .p0{left:0}.draad .p50{left:50%}.draad .p100{left:100%}.draad .p33{left:33%}.draad .p67{left:67%}.draad .p25{left:25%}.draad .p75{left:75%}
.draad .vol.p0{left:0;width:0}.draad .vol.p50{left:0;width:50%}.draad .vol.p100{left:0;width:100%}.draad .vol.p33{left:0;width:33%}.draad .vol.p67{left:0;width:67%}.draad .vol.p25{left:0;width:25%}.draad .vol.p75{left:0;width:75%}
.draad-status{margin-top:8px;font-size:12.5px;color:var(--ink)}
/* D3: de draad bij Definitief maken in Intake (boven de tabel), in het zijpaneel van een document en in de stap */
.docdraad{background:#fff;box-shadow:var(--sh);border-radius:var(--r-card);padding:14px 4px 12px;margin:0 0 12px}
.blok .docdraad{box-shadow:none;padding:6px 0 0;margin:0}
.stapdraad .docdraad{box-shadow:none;padding:8px 0 4px;margin:0 0 6px}
.docdraad.fout .draad-status{color:var(--err)}
.docdraad .draad-status{text-align:center}

/* Rustig bewegen (prefers-reduced-motion, via html.rustig): geen animatie, wel de teksten en de eindstand */
.rustig *,.rustig *::before,.rustig *::after{animation:none!important;transition:none!important}
.rustig .ldr-rand::before{left:0;width:100%;opacity:.5}
.rustig .vel.val{opacity:0}
.rustig .vel.v1{opacity:1;transform:rotate(-2deg)}
.rustig .mini i{opacity:1}

/* ===== W2: planning (v13: .plinfo, .plbel; zie v13.css) ===== */
.nowrap{white-space:nowrap}

/* ===== CSP-vervangers: inline style= uit de demo als klas (style-src 'self') ===== */
/* drawer() en modal() in v13: <div style="flex:1;min-width:0"> om eyebrow en titel */
.drawer .dh>.t,.modal .mh>.t{flex:1;min-width:0}
/* Zijpaneel tussen 560 en 700 px als de inhoud dat vraagt (UI-REGELS.md, hoofdstuk 3) */
.drawer.midden{width:630px}
/* layer() met een doorzichtige scrim (Instellingen, meldingen, rolmenu in v13: style="background:transparent") */
.scrim.leeg{background:transparent;animation:none}
/* openPalette() in v13: style="background:rgba(30,43,51,.2)" */
.scrim.licht{background:rgba(30,43,51,.2)}
/* toast() in v13: na 2,6 s style.opacity 0 met een overgang */
.toast .bn.weg{transition:opacity .3s;opacity:0}
/* tagStatus() in v13: Akkoord met <span class="seal" style="width:11px;height:11px;box-shadow:none"> */
.seal.klein{width:11px;height:11px;box-shadow:none}
/* ACT.lookup in v13: de lijst onder de chip, style="max-height:260px;overflow-y:auto" */
.pop .popl{max-height:260px;overflow-y:auto}
.pop{position:fixed}
.lookup.ro{cursor:default;background:transparent;box-shadow:inset 0 0 0 1px var(--haar)}
.lookup:focus-visible{outline:0;box-shadow:0 0 0 2px var(--petrol)}
/* Persoon in een lijst: kleine avatar met de naam (v13: av(id,'sm') + naam in de tabellen) */
.persoon{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
/* PF1c: de pakket-tag bovenin is weg (PF-STAPPEN 6); de profielknop staat ervoor in de plaats */
/* Gebruikersmenu: release, commit en omgeving als kleine regel onderaan (UI-REGELS.md, hoofdstuk 8) */
.menu .mvoet{font:11px/1.4 var(--mono);color:var(--zacht);padding:10px 10px 4px;margin-top:6px;border-top:1px solid var(--haar)}
.menu .mi>span{min-width:0}
/* Klanten (v13: filters in dezelfde toolbar als tabs en zoeken; style="font-weight:400" bij (privé)) */
.filtrij{display:contents}
.bronzin{margin:-4px 0 12px}
.w4{font-weight:400}
.grid.boven{align-items:start}
/* Verkoop (v13 vkCalculaties: style="margin:-4px 0 12px" boven de tabel; .sub in de sans bij een mono-kolom) */
.row.intro{margin:-4px 0 12px;gap:16px}
.sub.sans,.tbl .num .sub{font-family:var(--sans)}
/* ACT.nieuwecalc in v13: zoekveld zonder schaduw op --veld, lijst van 380 px, rijen als .cl-item */
.search.vlak{box-shadow:none;background:var(--veld)}
.nclijst{max-height:380px;overflow-y:auto;margin-top:10px}
button.cl-item{width:100%;text-align:left;padding:10px 8px;border-radius:8px;border-bottom:0;cursor:pointer}
button.cl-item:hover{background:var(--ijsvlak)}
/* Een vinkje met uitleg in een veld (label om de native checkbox, vinkje in de accentkleur) */
.chkrij{display:flex;gap:9px;align-items:flex-start;cursor:pointer;padding-top:2px}
.chkrij input{margin-top:3px;flex:none}
.cl-item.gekozen{background:var(--ijsl);box-shadow:inset 0 0 0 1.5px var(--petrol);border-radius:var(--r-card);padding:10px 12px;border-bottom:0}
.inpwrap .ic.small{font-size:11.5px}
/* Planning (v13 gpLijstHTML: style="margin:-4px 0 12px" op de uitleg onder de toolbar) */
p.intro{margin:-4px 0 12px}
.tbl.wv .acties{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.persoon .sub{white-space:normal}
/* Autorisatiebeheer (niet in v13): twee kolommen in de stijl van v13, links 360 px, rechts vult de breedte */
.akgrid2{display:grid;grid-template-columns:360px minmax(0,1fr);gap:18px;align-items:start}
.akgrid2>.col{gap:16px;min-width:0}
.akgrid2>.col>.panel{width:100%}
.ph h3 .h3sub{display:block;font:400 12.5px var(--sans);color:var(--zacht);margin-top:3px;letter-spacing:0}
.akvoet .lnk:disabled,.pad .lnk:disabled{color:var(--haar-s);cursor:default}
@media (max-width:1100px){.akgrid2{grid-template-columns:1fr}}
/* Prijsmodel (v13 cellIn: style="width:130px" op de cel, style="background:var(--ijsvlak);color:var(--petrol-d)" na een wijziging) */
.tbl td.celw{width:140px}
.cell-in.gewijzigd{background:var(--ijsvlak);color:var(--petrol-d)}
.tbl .was{text-align:right}
.row.schijf{gap:6px;flex-wrap:nowrap}
.row.schijf .cell-in{width:80px}
.kv.drie{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g3.klein{gap:10px}
.panel.pad.kpak{padding:12px 14px}
.inp.sm{min-height:30px}
.mf .ilvoet{flex:1}
/* Klantkaart (v13 route klant/ en 89g-v11.js): style= uit de demo als klas */
.kkop .hrow{gap:12px;flex-wrap:wrap}
.prods.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.prods.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
.row.alle{margin-top:-10px}
.grid.kov{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start}
.grid.kov>.col.kolom{gap:18px;min-width:0}
.meerregel{padding:10px 0 0}
a.relrij{color:inherit}
.relrij.stil{cursor:default}
.relrij.stil:hover .t b{color:inherit}
.prod .pvolg{cursor:pointer}
@media (max-width:1100px){.prods.k3,.prods.k4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.kov{grid-template-columns:1fr}}
@media (max-width:640px){.prods.k3,.prods.k4{grid-template-columns:1fr}.kkop{flex-wrap:wrap}.kkop .acts{width:100%}}
/* Zijpanelen (v13 drawer-inhoud: style="min-width:0", style="max-width:220px", gap in de regels) */
.wprij{gap:12px;flex-wrap:wrap}
.wtl .wsm{min-width:0}
.inp.datum{max-width:220px}
.budget .small{white-space:nowrap}
/* Instellingen onder het tandwiel (v13 instelHTML: style="padding:14px 0 0" op .mk); de rechten per rol zijn app-eigen */
.instel .mkkop{padding:14px 0 6px}
.instel .recht{display:flex;flex-direction:column;gap:4px;padding:8px 0;border-top:1px solid var(--haar);font-size:12.5px}
.instel .recht:first-of-type{border-top:0}
.instel .recht .row{gap:12px;flex-wrap:wrap}
.instel .rij{gap:10px}
.instel{max-height:calc(100vh - 80px);overflow-y:auto}
/* Laders in de vorm van de nieuwe opbouw (klantkaart, Autorisatiebeheer) */
.skkop{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.skkopt{flex:1;display:flex;flex-direction:column;gap:10px}
.sk.kico{width:52px;height:52px;border-radius:10px;flex:none}
.sktegels.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.sktwee.kov{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.sktwee.lijstdetail{grid-template-columns:360px minmax(0,1fr)}
@media (max-width:900px){.sktegels.vier,.sktwee.kov,.sktwee.lijstdetail{grid-template-columns:1fr}}

/* ---------- W4: Mijn taken, stap, Vandaag, de bel (CSP-vervangers voor inline style= in demo v13) ---------- */
/* 45-workflows-ui.js 100: <label class="search" style="min-width:220px"> */
.toolbar .search.zoekbreed{min-width:220px}
/* 45-workflows-ui.js 107 en 271: links en tellers in .sect zonder kapitaal (style="text-transform:none;letter-spacing:0;font-family:var(--sans)") */
.sect .sectlnk,.sect .small{text-transform:none;letter-spacing:0;font-family:var(--sans)}
.sect .mono{letter-spacing:0}
/* 89g-v11.js 445: <div class="small" style="padding:10px 16px"> onder Binnenkort voor u gepland */
.gpm .gpmeer{padding:10px 16px}
/* 45-workflows-ui.js 285: reviewpunt toevoegen, style="gap:10px" */
.rpnieuw{gap:10px}
.rpnieuw .inp{flex:1}
.rpleeg{padding:8px 0}
.mb0{margin-bottom:0}
/* logboek onder de stepper in het stap-zijpaneel (v13 logKort) */
.loglijst{display:flex;flex-direction:column;gap:4px}
.loglijst .mono{margin-right:6px}
/* een vinkje dat niet mag (vier ogen, een collega) leest als regel, niet als knop */
.chk.rg{cursor:default}
/* 40-klanten.js 33: <div class="page wide" style="max-width:1320px"> voor Vandaag */
.page.wide.vandaag{max-width:1320px}
/* de bel: ongelezen vet, gelezen zacht (de opbouw is .notif van v13, 89c-v711.js) */
.notif .ni.gelezen b{font-weight:500;color:var(--zacht)}
.notif .nlijst{max-height:60vh;overflow-y:auto}
.notif .nvoet{display:flex;padding:10px 16px;border-top:1px solid var(--haar)}
/* 40-klanten.js 101 en 105: style="align-items:start" en style="cursor:pointer" op Vandaag van de beheerder */
.grid.vtop{align-items:start}
.attn .it.cl{cursor:pointer}
/* Lader van Vandaag: vijf tegels zoals .grid.g5 */
.sktegels.vijf{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:24px}
@media (max-width:900px){.sktegels.vijf{grid-template-columns:1fr 1fr}}
/* Wie in het stap-zijpaneel: een lange naam kapt af in de kolom (v13 heeft korte namen) */
.kv>div{min-width:0}
.kv b .persoon{display:flex;min-width:0}
.kv b .persoon>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* W5 Workflows: CSP-vervangers voor de inline style= van v13 (45-workflows-ui.js 351, 361, 395, 419, 450) */
.page.wide.wfpage{max-width:1400px}
.wfcard .wfkop{flex:1;min-width:0}
.wfcard .row{align-items:flex-start}
.kaart.vk .kf.wkl{color:var(--petrol-d)}
/* Workflowpaneel: de knop Stap openen onder de checklist (W5) */
.wtl .ckl .lnk.mt8{margin-top:8px}
/* Deadline verzetten: de snelkeuzes onder de datum (v13 DP_SNEL, 89f-v9.js 63) */
.dpsnel{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
/* Smal scherm (register): het bord schuift binnen zichzelf, de kolommen houden een leesbare breedte */
@media (max-width:860px){.bord.wfb{overflow-x:auto}.bord.wfb .kol{flex:0 0 220px;min-width:220px}}
/* D1 Documenten: CSP-vervangers voor de inline style= van v13 (70-docs-fact-inzicht.js 25, 44, 70, 118; 89e-v713.js 69; 96-modules.js 327, 571) */
.page.breed.docpage{max-width:1320px}
.tag.ink.docklant{padding:5px 10px}
.search.doczoek{flex:1;max-width:460px}
.panel.pad.kiesklant{max-width:760px}
.kiesklant h3{font-size:19px}
.kiesklant>p.zacht{margin:6px 0 14px}
.search.veldzoek{box-shadow:none;background:var(--veld)}
.kiesklant .kieskop{margin:6px 0}
.kiesklant .cl-item{cursor:pointer}
.tbl.intk .row.kmrij{gap:6px;flex-wrap:wrap}
.kv.kv2{grid-template-columns:1fr 1fr}
.docuitleg{margin:0 0 12px}
/* Het voorbeeld is echt (SharePoint in een frame) in plaats van de grijze regels van de demo: hoger, zonder binnenrand */
.preview.docvb{max-height:none;height:440px;padding:0;margin-top:0}
.preview.docvb .docframe{width:100%;height:100%;border:0;display:block}
.preview.docvb .docvb-laad{padding:26px 28px}
/* Werkmap (v13 modWerkmapTab en .mod-wm) */
.grid.wmgrid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start}
.wmgrid .kolom{gap:18px}
.wmgrid .sam{margin-bottom:8px}
.wmpad{overflow-wrap:anywhere}
.wmuitleg{margin-top:0}
.inp.wminp{font-size:12px}
.mod-wm{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:12px;align-items:center;background:var(--veld);border-radius:8px;padding:10px 12px;margin:0 0 16px}
.mod-wm .mod-pad{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px}
@media (max-width:860px){.lib{grid-template-columns:1fr 1fr}.grid.wmgrid{grid-template-columns:1fr}}
.instel .wminp{margin-top:8px;width:100%}
.instel .row.wmtok{gap:6px;flex-wrap:wrap;margin-top:6px}
/* D2 Documenten bij de stap: CSP-vervangers voor de inline style= van v13 (45-workflows-ui.js 253 en 254, 89c-v711.js 145) */
.sect .sectlnk.mr14{margin-right:14px}
.cl-item.klik{cursor:pointer}
/* Slepen op het blok Documenten: gemarkeerd zoals een gekozen vak (ontwerpregel Nils) */
.blok.stapdocs.sleep{box-shadow:inset 0 0 0 1.5px var(--petrol);background:var(--ijsl)}
.dnlijst{margin-top:6px}
.hoort.zacht{color:var(--zacht)}
/* D2 builder: de afvinkregel definitief met soort, type en boekjaar op een eigen regel */
.row.defrij{flex-wrap:wrap;gap:6px;margin-top:6px}
.row.defrij select.inp{flex:1 1 160px;min-width:0}
/* K1 klantportaal: CSP-vervangers voor de inline style= van v13 (85-portaal.js: .row style="gap:10px" in .pcontact,
   .col style="gap:18px" en .grid style="align-items:start" in de route portaal); de kantoorschil verborgen bij Bekijk als */
.pcontact .pcrow{gap:10px}
.pgrid{align-items:start}
.pgrid .pcol{gap:18px}
#app > .app[hidden]{display:none}
.pcontact .pl{display:flex;align-items:flex-start;gap:6px;min-width:0;max-width:100%;white-space:normal}
.pcontact .pl span{min-width:0;overflow-wrap:anywhere;word-break:break-all}
/* K1: de zin voor klanten onder de aanmeldknop (startscherm en aanmeldkaart) */
.start-klant{margin:14px 0 0;font-size:12px;opacity:.72}
/* K3a Opvragen in de stap (v13 alHTML, 89d-v712.js 255: de uitleg naast de kop met inline style=) en de verzoeken bij de klant */
.sect .sectuitleg{text-transform:none;letter-spacing:0;font-family:var(--sans)}
.ci.al .acties{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin-left:auto;white-space:nowrap}
.ci.al .t .mono.small{font-weight:400;margin-left:4px}
.hoort .lnk.muted{margin-left:10px}
.mb14{margin-bottom:14px}
/* Ter attentie van: een vinkje per contactpersoon onder elkaar */
.vinklijst{display:flex;flex-direction:column;gap:6px}
.vinklijst .chk input{accent-color:var(--petrol)}
/* K3a portaal: het bericht van het kantoor of de toelichting bij Opnieuw gevraagd onder een verzoek; het tekstvak bij Heb ik
   niet (v13 85-portaal.js 83: style="min-height:70px") */
.prow .t .pber,.pber{display:block;margin-top:4px;padding:6px 10px;border-radius:8px;background:var(--veld);color:var(--ink);font-size:12.5px}
.inp.pntoe{min-height:70px}
/* K3b kantoor: de losse taak met de vraag (v13 openLos, 48-v76.js 160: textarea style="min-height:100px"; de tekst in de
   tijdlijn style="margin-top:2px") en de geschiedenis van een verzoek in Bij de klant */
.inp.ltantw{min-height:100px}
.tl .ti .tlt{margin-top:2px;color:var(--ink)}
.ci.al .t [data-draad]{display:inline-flex;align-items:center;gap:4px;margin-top:4px}
.ci.al .vrdraad{margin-top:6px;padding:4px 10px;border-radius:8px;background:var(--veld)}
/* K3b portaal: CSP-vervangers voor de inline style= van v13 (85-portaal.js 11, 18, 198: min-height 90, 120 en 110 px; 73:
   align-items:start; 74: gap 18px) en de envelop in de topbalk (portaalTop: button.bell met .n) */
.inp.pvtekst{min-height:90px}
.inp.pvalg{min-height:120px}
.inp.prtxt{min-height:110px}
.inp.pvr{min-height:60px}
.portaalp .pblok2 .pcard{cursor:pointer}
.prow.vr .t .pantw{margin-top:8px}
.prow.vr .t .lnk.mt8{display:inline-block}
.kbrow{cursor:pointer}
.mail .mbody{white-space:pre-line}
/* K3b builder: de korte vragen per stap onder elkaar */
.vrlijst{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.vrlijst .row{width:100%;flex-wrap:nowrap;gap:6px}
.vrlijst .row .inp{flex:1;min-width:0}
/* Wat wij van u nodig hebben: de aanleverlijst is de uploadlijst (besluit Nils 14 okt). Per regel een compact vak (de pdrop
   van v13, op één regel); de hele regel is het sleepdoel: kader en lichte invulling in de accentkleur (ontwerpregel Nils) */
/* Feedback Nils 14 okt: een regel per verzoek, het vak naast de tekst en Anders als menu */
.prow.pmetvak{grid-template-columns:30px minmax(0,1fr) auto auto}
.prow.pmetvak .pacts{flex-direction:row}
.pmeer{display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:4px 0;cursor:pointer;font:inherit}
.pdrop.prij{flex-direction:row;justify-content:flex-start;align-items:center;gap:8px;padding:7px 12px;margin-top:0;font-size:12.5px;cursor:pointer;text-align:left;white-space:nowrap;overflow:hidden;max-width:240px}
.pdrop.prij .muis,.pdrop.prij .aanraak{overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){body.portaal .prow.pmetvak{grid-template-columns:30px minmax(0,1fr) auto;row-gap:8px}body.portaal .prow.pmetvak .pdrop.prij{grid-column:2;grid-row:2;max-width:none}body.portaal .prow.pmetvak>.t{grid-column:2/4}body.portaal .prow.pmetvak>.pacts{grid-column:3;grid-row:2;align-self:center}}
.pdrop.prij:hover{border-color:var(--petrol)}
.pdrop.prij.bezig{border-style:solid;background:var(--veld);cursor:default}
.pdrop.prij .e-teller{font-size:12px;text-align:left;min-width:0;overflow:hidden;text-overflow:ellipsis}
.prow.sleep{box-shadow:inset 0 0 0 1.5px var(--petrol);background:var(--ijsl);border-radius:10px}
.prow.sleep .pdrop.prij{border-color:var(--petrol)}
.pdrop.prij .mini i{background:var(--petrol)}
.prow .t .pdrop.prij b{display:inline;font-size:12.5px}
.prow .t .pdrop.prij>span{display:inline;color:var(--zacht)}
/* Op een aanraakscherm (telefoon) kan niemand slepen: daar de tekst om te tikken */
.pdrop.prij>.aanraak{display:none}
@media (pointer:coarse){.pdrop.prij>.muis{display:none}.pdrop.prij>.aanraak{display:inline}}
/* K3c: een lijst opbouwen onder Opvragen in de stap (een regel per stuk) */
.vlijst{display:flex;flex-direction:column;gap:6px;padding:4px 0 6px}
.vlijst .vregel{gap:8px;flex-wrap:nowrap}
.vlijst .vregel .mono{width:18px;text-align:right;flex:none}
.vlijst .vregel .inp{flex:1;min-width:0}
.vlijst .vltaak{gap:8px;flex-wrap:nowrap}
.vlijst .vltaak .inp{flex:1;min-width:0}

/* K4: Voor uw akkoord (v13 pakk): de regel van het stuk (v13 inline gap:10px), het tekenvak (muis, pen of vinger; kader in
   de accentkleur als er getekend is), Aanpassing vragen (v13 inline min-height:110px) */
.pstuk .pstukr{gap:10px;align-items:center}
.pstuk .pstukr .t{flex:1;min-width:0}
.tekenvak{display:block;width:100%;height:160px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--haar);touch-action:none;cursor:crosshair}
.tekenvak.vol{box-shadow:inset 0 0 0 1.5px var(--petrol)}
.inp.pptekst{min-height:110px}
/* K4: Ter akkoord bij de klant in de stap: de handtekening van de klant, het venster Aanbieden */
.akhand{display:block;max-width:240px;max-height:90px;margin-top:6px;padding:4px 8px;background:#fff;border-radius:8px;box-shadow:inset 0 0 0 1px var(--haar)}
.inp.aktoel{min-height:84px}
.akbedrag{gap:8px;flex-wrap:wrap}
.akbedrag .inp{flex:1;min-width:120px}
.akbedrag .inp.akeuro{flex:0 0 120px}
.inp.hrdag{width:76px}

/* U1: Mijn uren en Inrichting (Uren), de maten uit v13 65-uren.js en 80-beheer.js 146 zonder inline style (CSP) */
.page.wide.uren{max-width:1400px}
.page.wide.inr{max-width:1320px}
.panel.u-ovv{overflow:visible}
.col.u-g16{gap:16px}
.wk col.u-c62{width:62px}
.wk col.u-c54{width:54px}
.wk col.u-c66{width:66px}
.wk col.u-c68{width:68px}
.wk .tclk{color:var(--petrol);font-family:var(--mono)}
.wk .u-dl{font-size:11px}
.wk .u-dl0{height:21px}
.wk .u-tlab{color:var(--ink)}
.u-mt4{margin-top:4px}
.addrow .u-plus{color:var(--petrol);display:flex}
.dkeus .u-lbl{margin-right:4px}
.dkeus.u-laatst{padding-bottom:14px}
.u-f1{flex:1}
.u-voetnoot{margin:10px 0 0}
.empty.u-p16{padding:16px}
.u-intro{margin:0 0 14px}
.u-urdag{width:90px}
.inp.u-urom{min-height:32px;padding:5px 10px}
.inp.u-urom.leeg{box-shadow:inset 0 0 0 1.5px var(--err)}
.u-uruur{width:44px;text-align:right}
.inp.u-w120{width:120px}
.inp.u-w180{width:180px}
.inp.u-w140{width:140px}
.inp.u-w100{width:100px}
.cl-item.u-nb{border-bottom:0}
.grid.g2.u-inr{align-items:start;gap:16px}
.inp.u-catnaam{max-width:240px;min-height:30px;padding:4px 10px}
.row.u-g8{gap:8px}
.row.u-g9{gap:9px}
.u-pt6{padding-top:6px}
.tbl th.u-w84{width:84px}
.row.u-urenrij{gap:16px;flex-wrap:wrap}
.u-min0{min-width:0}
/* U1 (Nils 15 okt): de datum van vandaag onder de dag, zoals de andere dagen, niet ernaast; de petrol pil blijft */
.wk th.vd .dn{display:table;margin:3px auto 0}
.cell-in.u-dag{width:64px;min-width:64px}
/* U2: Urenoverzicht (v13 65-uren.js 470 tot 560) zonder inline style (CSP) */
.mtx .u-nokap{text-transform:none;letter-spacing:0}
.st-i.u-grijs{background:var(--veld);color:var(--zacht)}
.wcel.cl{cursor:pointer;border-radius:6px}
.wcel.cl:hover{background:var(--veld)}
.tbl th.u-w150{width:150px}
.tbl th.u-w32{width:32px}
.tbl tr.u-klantkop td{background:#FCFBF8}
.u-kopsub{font-weight:400;margin-left:8px}
.tbl td.u-inspring{padding-left:28px}
.row.u-real{gap:8px;justify-content:flex-end}
.u-pct{width:44px;text-align:right}
.tbl.u-binnen{margin:0 20px 10px;width:calc(100% - 40px)}
/* U3: Facturatie en Factuur (demo v14 92-v14-facturen.js 352 en 567) zonder inline style (CSP) */
.page.wide.fx-pagina{max-width:1360px}
.row.u-fxkop{gap:14px;align-items:baseline;flex-wrap:wrap}
.tbl th.u-w34{width:34px}
.fx-edit col.u-fxbron{width:112px}
.fx-edit col.u-fxaantal{width:118px}
.fx-edit col.u-fxprijs{width:112px}
.fx-edit col.u-fxbtw{width:150px}
.fx-edit col.u-fxbedrag{width:112px}
.fx-edit col.u-fxx{width:40px}
.cell-in.u-vol{width:100%}
.cell-in.u-w80{width:80px}
.cell-in.u-w92{width:92px}
.cell-in.u-fxlos{flex:1;min-width:240px}
.grid.g2.u-fxonder{align-items:start;gap:16px}
.inp.u-w240{width:320px}
.fx-edit .cell-in.u-vol,.fx-edit .fx-reden{text-align:left}
.fx-add .cell-in{background:var(--veld);border:0;border-radius:6px;padding:6px 8px;font:inherit;font-size:13px;outline:0}
.fx-add .cell-in.u-fxlos{text-align:left}
.fx-add .cell-in:focus{background:#fff;box-shadow:0 0 0 2px var(--petrol)}
.fx-add select.cell-in{width:auto}
/* U3b: code, btw-code, vier ogen en de regel toevoegen met een artikelcode (demo v14 92-v14-facturen.js 564, 672, 716) */
.fx-edit col.u-fxcode{width:60px}
.fx-add .inp.u-fxcodekies{max-width:330px}
.tag.p svg,.tag.ok svg{width:11px;height:11px;margin-right:2px;vertical-align:-1px}
.fx-edit select.cell-in.u-vol{padding-right:2px}
.fx-afrij .zacht{white-space:normal}
.inp.num.u-fxbedrag{width:110px;text-align:right}
.inp.u-fxfunctie{flex:1;min-width:220px}
ul.u-fxlijst{margin:6px 0 0;padding-left:18px;line-height:1.7}
.row.u-fxveld{gap:10px;align-items:center;flex-wrap:wrap}
/* U3b: klantkaart, Prijs en facturatie (demo v14 97-v14-klant.js 17; v14 zet de kolommen inline) */
.grid.u-kfact{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start}
.col.u-kcol{display:flex;flex-direction:column;gap:18px}
.u-m0{margin:0}
.u-mb8{margin:0 0 8px}
.u-fpdiensten{display:flex;flex-direction:column;gap:6px;padding-top:4px}
@media (max-width:860px){.grid.u-kfact{grid-template-columns:minmax(0,1fr)}}
/* U3c: Facturatie, Op voortgang (demo v14 70-docs-fact-inzicht.js 208 tot 213; v14 zet de marges en de meter inline) */
.fx-vguitleg{margin:-4px 0 12px}
.row.fx-vgrij{gap:8px}
.meter.fx-vgmeter{width:70px}
.inp.u-pasoort{width:130px}
/* U4a: de factuur als document (v14 fxDoc, 92-v14-facturen.js 512) naast de panelen; inline stijl van v14 als klassen (CSP) */
.u-fxrechts{gap:16px;min-width:0}
.u-fxacties{gap:10px;align-items:flex-start}
textarea.fx-mailin{min-height:190px;line-height:1.55}
.fx-doc .lh{border-bottom:1px solid var(--haar)}
.fx-doc .fx-dockop{gap:12px;align-items:center}
.fx-doc .fx-docnaam{font-size:17px}
.fx-doc .doclogo{height:34px;margin-bottom:0}
.fx-doc h2.fx-doctitel{font:500 22px/1.2 var(--serif);color:var(--ink);margin:18px 0 6px}
.fx-doc .r{text-align:right}
.fx-doc .fx-btwt{margin:8px 0 0}
.fx-doc .fx-betaaltekst{margin:14px 0 0}
/* U4a: het tabblad Facturen; Boeken en Boek alles zichtbaar maar uit tot de koppeling (besluit Nils 15 okt) */
.fx-boek[disabled]{opacity:.55;cursor:not-allowed}
.fx-tabs{margin-bottom:14px}
textarea.fx-mailinr{min-height:120px;line-height:1.5}
.u-w280{max-width:280px}
.lnk.fx-boek[disabled]{color:var(--zacht)}
/* U5: Inzicht (demo v15 88-v78.js 82 tot 120, 89b-v710.js 249, 70-docs-fact-inzicht.js 273 tot 296, 91-v14-team.js 82 tot 160);
   de inline stijl van de demo als klassen (CSP); de heatmap zelf staat in v14-inzicht.css */
.page.inz-pagina{max-width:1280px}
.page.inz-pagina.team{max-width:1320px}
.grid.g2.inz-g2{align-items:start;gap:18px}
.mt18{margin-top:18px}
.u-g10{gap:10px}
.inz-leg{gap:14px;flex-wrap:wrap}
.inz-kop{gap:12px}
.inz-sub{margin-top:22px}
.bar .tr.stk i.inz-af,i.lg.inz-af,.tm-bar i.vw{background:var(--ijs)}
.bar .tr.stk i.inz-op,i.lg.inz-op{background:var(--petrol)}
i.lg.inz-err{background:var(--err)}
i.lg.inz-lt{background:var(--veld-h)}
.tm-gl.inz-s4{grid-column:span 4}
.tm-gl.inz-s6{grid-column:span 6}
.inz-tmkop{gap:12px;flex-wrap:wrap}
.inz-tmuitleg{margin:0 0 14px}
.kv.inz-kv.vijf{grid-template-columns:repeat(5,minmax(0,1fr))}
.inz-detail{display:grid;grid-template-columns:1fr;gap:16px}
.mk.inz-mk{padding:14px 0 6px}
.inz-van{padding-top:8px}
.inz-uitleg{margin:10px 0 0}
.row.inz-norm{display:grid;gap:6px}
.inz-norm label{display:grid;grid-template-columns:120px 84px auto;align-items:center;gap:8px}
.inz-norm .inp{width:84px}
.inz-voet{margin:12px 0 0}
/* U6: Inzicht > Geld (demo v15 89b-v710.js 165 tot 237; 70-docs-fact-inzicht.js 300) */
i.lg.inz-doel{background:var(--ink);height:2px}
.inz-ink{color:var(--ink)}
.inz-sep{margin:0 0 10px}
.inz-budget{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin-top:6px}
.inz-budget label{display:grid;gap:4px;color:var(--zacht)}
.inpwrap.u-w200{width:200px}

/* PF1c: profielen per BV, zoals demo v15 (src/98-v15-profielen.js 207 tot 217, inline stijl daar). De kleur van een profiel
   komt uit de database en gaat via CSSOM in --pfk (kleurStippen in hulp.js); zonder kleur de accentkleur van het kantoor. */
.pfknop{display:flex;align-items:center;gap:7px;height:34px;padding:0 10px;margin-right:6px;border:1px solid var(--haar-s);border-radius:var(--r-btn);background:#fff;color:var(--ink);font:500 13px var(--sans);cursor:pointer;white-space:nowrap}
.pfknop:hover{background:var(--veld)}
.pfknop:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
.pfknop svg{opacity:.6}
.pfdot,.pfi{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none;background:var(--pfk,var(--petrol))}
.pfi{width:9px;height:9px}
.pfdot.lg{width:14px;height:14px;margin-right:10px;vertical-align:middle}
.usr .pfr{display:flex;align-items:center;gap:5px}
.usr .pfr .sepbar{margin:0 1px}
.pfmenu .mi{align-items:center}
.pfmenu .pfdot{margin:0 4px 0 2px}
.row.pfnaam{gap:9px;flex-wrap:nowrap}
.pfacts{display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:320px;text-align:right}
.pfuitleg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding:4px 20px 20px}
.pfuitleg>div{display:flex;flex-direction:column;gap:4px}
.pfnr{width:22px;height:22px;border-radius:50%;border:1px solid var(--petrol);color:var(--petrol);display:inline-flex;align-items:center;justify-content:center;font:500 12px var(--mono)}
.pfopt{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.pfopt>span{display:flex;flex-direction:column;gap:2px}
.pfopt input{accent-color:var(--petrol);margin-top:3px}
/* PF4b: Beheer > Profielen, Onafhankelijkheid: de producten van andere profielen per profiel (v15 98:288) */
.onafhlijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:8px}
.onafhgroep{display:flex;flex-direction:column;gap:4px}
.pfwaarschuw{color:var(--err)}
.pfwaarschuw:empty{display:none}
#pfnViaUitleg,#bvViaUitleg{margin:2px 0 10px}
.pfmx td{padding-top:6px;padding-bottom:6px;vertical-align:top}
.pfmxs,.pfrol{min-height:30px;padding:2px 6px;font-size:12.5px;color:var(--zacht)}
.pfmxs.aan,.pfrol.aan{color:var(--ink);font-weight:500}
.pfleden .pfrol{max-width:260px}
@media (max-width:1100px){.pfuitleg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.pfacts{align-items:flex-start;text-align:left}}
.pfpage .tbl td.small>svg,.pfdetail .banner svg{vertical-align:-2px}
.pfpage .tbl td.small>svg{display:inline-block;margin-right:3px}

/* PF2a: Klant bij op de klantkaart en het profiel van een contactpersoon (demo v15 98:211, .pfkl en .pfchip). Gekozen is kader en
   lichte invulling in de accentkleur (ontwerpregel Nils 8 okt), geen donkere rand zoals v15. */
.pfkl{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
.pfchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--haar);border-radius:99px;padding:1px 9px;font:inherit;font-size:12px;background:#fff;color:var(--ink)}
button.pfchip{cursor:pointer}
button.pfchip:hover{background:var(--veld)}
.pfchip.on{border-color:transparent;box-shadow:inset 0 0 0 1.5px var(--petrol);background:var(--ijsl)}
.pfcp{margin-top:4px}
/* PF4b: het signaal over onafhankelijkheid op de klantkaart (demo v15 98:335, .pfonafh, dezelfde kleur als v15: een signaal, geen fout) */
.pfonafh{display:flex;flex-wrap:nowrap;gap:6px;align-items:baseline;margin-top:6px;color:#8A5A12}
.pfonafh svg{flex:none;align-self:center}
/* PF3b: Mijn uren, het profiel als label voor de regel (alleen bij meer dan één eigen profiel; stip in de kleur van het profiel) */
.u-pf{display:inline-flex;align-items:center;gap:4px}

/* PF3c: Beheer > Profielen > Branding (demo v15 98:274, .pfbh en .pflogo: inline stijl daar). De kleur van het profiel via
   CSSOM in --pfk (kleurStippen); het briefhoofd met een lijn in die kleur. Documenten van een profiel met een eigen kleur
   (.doc-pf, factuurdoc.js en voorstel.js): de accentkleur binnen het document wordt die van het profiel; de app zelf houdt
   de kleur van het kantoor. */
.pfbr{gap:18px;align-items:start}
.pfbh{display:flex;gap:12px;align-items:center;border-bottom:2px solid var(--pfk,var(--petrol));padding-bottom:12px}
.pflogo{width:34px;height:34px;border-radius:8px;background:var(--pfk,var(--petrol));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;flex:none}
.pfbhlogo{height:34px;width:auto;max-width:160px;display:block;flex:none}
.pfbhnaam{font-size:17px}
.u-verborgen{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
#brLogoKies{gap:10px;align-items:center}
.doc.doc-pf{--petrol:var(--pfk);--petrol-d:var(--pfk)}
.fx-doc.doc-pf h2.fx-doctitel{color:var(--pfk)}
.doc-pf .fx-lg-bg{fill:var(--pfk)}
.doc-pf .fx-tot .g{border-top-color:var(--pfk)}
.doc .docvoet{margin-top:22px;padding-top:10px;border-top:1px solid var(--haar)}

/* S1: Hulp vragen (venster, ontwerp ../Support/Aktsyn-Supportdesk.html .mee en .klaar; BEHEER-STAPPEN 7.4) */
.sup-tekst{width:100%;min-height:96px;resize:vertical}
.sup-mee{background:var(--veld);border-radius:var(--r-card);padding:10px 12px;display:flex;flex-direction:column;gap:5px;font-size:13px}
.sup-mee .kick{margin-bottom:2px}
.sup-mee .r{display:flex;gap:8px;align-items:center}
.sup-mee .r svg{color:var(--ok);flex:none}
.sup-mee .r.niet,.sup-mee .r.niet svg{color:var(--zacht)}
.sup-klaar{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.sup-klaar .ok{display:flex;gap:8px;align-items:center;color:var(--ok);font-weight:600}
.toast .bn .hd .tekstactie{margin-left:12px}

/* Wachten op een knop (lagen.js wachten, Nils 22 okt): een pulserende stip in de knop, en een regel als het langer duurt */
.btn.wacht,.btn.wacht:disabled{display:inline-flex;align-items:center;gap:8px;cursor:progress;background:var(--petrol);opacity:.88}
.wacht-stip{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;animation:puls 1s ease-in-out infinite}
.wacht-regel{display:flex;gap:8px;align-items:center;margin-top:12px;font-size:12.5px;color:var(--petrol);opacity:0;transition:opacity .3s}
.wacht-regel.zicht{opacity:1}
@media (prefers-reduced-motion:reduce){.wacht-stip{animation:none}}