/*
 * De stijl van bewys.
 *
 * DIT IS HET STIJLBLAD VAN HET PROTOTYPE, niet een nieuwe poging.
 *
 * Er is eerst een eigen versie gebouwd op de beschrijving in FRAME-portal.md, en die beschrijving
 * legde de regels vast maar niet de vorm: kaarten zonder kopbalk, geen tussenkoppen, geen zoekveld,
 * geen donkere stand. Het week zichtbaar af. Het prototype is over meerdere rondes ontworpen en
 * beoordeeld, dus dat is de bron en niet mijn herleiding ervan.
 *
 * WAT ER WEL IS VERANDERD, en dat is één ding:
 *
 * Petrol (#0A7E78) is eruit en het blauw van het logo (#204CE5) zit erin, met de neutralen naar
 * dezelfde tint gedraaid (van groen 165-175 naar blauw ~222) zodat het grijs bij de familie hoort.
 * Reden: het logo staat live op bewys.nl, in de outreach-mail en in het tabblad. Iemand die van de
 * site doorklikt naar de app moet niet het gevoel hebben dat hij bij een ander bedrijf terechtkomt.
 *
 * DE REGELS UIT HET PROTOTYPE, die in het commentaar hieronder verspreid staan en die ook gelden
 * voor schermen die er nog niet zijn:
 *
 * 1. Eén kleur heeft één betekenis. Blauw is bediening en merk, nooit een status. Rood is aandacht.
 *    Groen bestaat niet; op de gedeelde pagina draagt de stempel de merkkleur als het klopt
 * 2. Rood wast alleen over wat echt verlopen is. Bijna verlopen blijft neutraal met alleen een
 *    gekleurde looptijd
 * 3. Elke regel spreekt één familie in drie sterktes: titel sterk, actieregel midden, houder zacht
 * 4. Elk raakvlak is minstens 44 pixels. De segmentregelaar is de uitzondering op 38, want een
 *    filter hoort niet het zwaarste ding op het scherm te zijn
 * 5. Elk onderdeel is een eigen kaart met een kopbalk erin, en de regels lopen van rand tot rand
 *
 * De donkere stand komt uit het prototype en blijft erin. Deze mensen kijken buiten op een scherm in
 * de zon en binnen in een bus in het donker; wie zijn toestel op donker heeft gezet heeft daar een
 * reden voor.
 */

/*
 * Manrope van onze eigen server en niet van Google.
 *
 * Het prototype haalde hem bij fonts.googleapis.com. Dat kan hier niet en dat is met opzet: de CSP
 * laat geen externe bronnen toe, omdat elk verzoek naar een derde partij op een pagina met andermans
 * certificaten een gegeven weggeeft dat daar niet hoort. Dit is de latijnse subset van de variabele
 * versie, 24 kB, en die dekt 400 tot 800.
 */
@font-face{
  font-family:Manrope;
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(/assets/manrope.woff2) format('woff2');
}

:root{
  --grond:#F4F6FB; --vlak:#FFFFFF; --hover:#F1F4FB; --veld:#F3F5FC;
  --inkt:#0F1219; --inkt-mid:#373D4A; --stil:#5E6675; --flauw:#676F80;
  --lijn:#E5E8F0; --lijn2:#CDD3E0;
  --merk:#204CE5; --merk-diep:#1A3FBF;
  --rood:#C0271A; --rood-mid:#A8392C; --rood-zacht:#94564C;
  --rood-vlak:#FDEEEC; --merk-vlak:#EAEFFE; --stil-vlak:#EEF1F8;
  --rond:14px; --rond-s:12px;
  --hoog:0 1px 2px rgba(15,23,45,.05), 0 16px 34px -24px rgba(15,23,45,.5);
  --kaart:0 0 10px -2px rgba(15,23,45,.07);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --grond:#0D1016; --vlak:#161A21; --hover:#1C2129; --veld:#1E232C;
    --inkt:#E9EBF0; --inkt-mid:#C6CBD6; --stil:#A3A9B8; --flauw:#8E95A6;
    --lijn:#232833; --lijn2:#39404F;
    --merk:#6E90FF; --merk-diep:#5578F0;
    --rood:#EE7568; --rood-mid:#D98478; --rood-zacht:#BC8981;
    --rood-vlak:#2A1614; --merk-vlak:#111A33; --stil-vlak:#1E232C;
    --hoog:0 1px 2px rgba(0,0,0,.5), 0 16px 34px -24px rgba(0,0,0,.95);
    --kaart:0 0 10px -2px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --grond:#0D1016; --vlak:#161A21; --hover:#1C2129; --veld:#1E232C;
  --inkt:#E9EBF0; --inkt-mid:#C6CBD6; --stil:#A3A9B8; --flauw:#8E95A6;
  --lijn:#232833; --lijn2:#39404F;
  --merk:#6E90FF; --merk-diep:#5578F0;
  --rood:#EE7568; --rood-mid:#D98478; --rood-zacht:#BC8981;
  --rood-vlak:#2A1614; --merk-vlak:#111A33; --stil-vlak:#1E232C;
  --hoog:0 1px 2px rgba(0,0,0,.5), 0 16px 34px -24px rgba(0,0,0,.95);
  --kaart:0 0 10px -2px rgba(0,0,0,.45);
}

/*
 * De reset die het prototype NIET zelf had.
 *
 * Daar kwam `body{margin:0}` uit het omhulsel van de artifact, en bij het overzetten van het
 * stijlblad is die niet meegekomen. Gevolg: de standaardmarge van acht pixels stond er weer omheen en
 * de gekleurde balk raakte de rand van het venster niet. Dat ziet eruit als een kader om de app.
 *
 * Precies dezelfde soort fout als de inline stijlen: iets wat in de ene omgeving vanzelf goed stond
 * en in de andere niet, zonder dat er ergens een foutmelding komt.
 */
html,body{margin:0;padding:0}
img{max-width:100%;height:auto}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{
  background:var(--grond);color:var(--inkt);
  font:500 16px/1.45 Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;padding-bottom:40px;
}
p{margin:0}
button{font-family:inherit;color:inherit}
.wrap{max-width:860px;margin:0 auto;padding:0 18px}
:focus-visible{outline:3px solid var(--merk);outline-offset:2px}

.proto{background:var(--inkt);color:var(--vlak)}
.proto p{max-width:860px;margin:0 auto;padding:7px 18px;font-size:12.5px;font-weight:600;opacity:.75}

/* ================= appbalk =================
   Dezelfde groene balk als bij delen en invullen, zodat elke stand dezelfde kop heeft. */
.appbalk{position:sticky;top:0;z-index:25;background:var(--merk);color:#fff}
.appbalk__in{max-width:860px;margin:0 auto;padding:14px 18px;min-height:76px;display:flex;align-items:center;gap:14px}
.merk{font-weight:800;font-size:21px;letter-spacing:-.045em;color:#fff;line-height:1.1}
.merk i{display:inline-block;width:6px;height:6px;border-radius:2px;background:#fff;margin-left:3px;vertical-align:3px}
.bedrijfsrij{display:flex;align-items:center;gap:6px;margin-top:2px}
.bedrijfsrij span{font-size:13.5px;font-weight:700;color:rgba(255,255,255,.82)}
.cta{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;min-height:44px;
  cursor:pointer;border:0;border-radius:var(--rond-s);background:#fff;color:var(--merk);
  font-size:15.5px;font-weight:800;letter-spacing:-.01em;padding:12px 18px}
.cta:hover{background:rgba(255,255,255,.88)}
.cta:focus-visible{outline:3px solid #fff;outline-offset:2px}
.cta svg{width:17px;height:17px}
.ctakort{display:none}
.balkknop{
  flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;gap:7px;min-height:44px;
  cursor:pointer;border:0;border-radius:var(--rond-s);background:rgba(255,255,255,.16);color:#fff;
  font-size:14.5px;font-weight:700;padding:11px 15px;
}
.balkknop:hover{background:rgba(255,255,255,.28)}
.balkknop b{font-size:12.5px;font-weight:800;background:rgba(255,255,255,.26);border-radius:100px;padding:1px 7px}
.balkknop + .cta{margin-left:8px}

/* ================= voorbeeld van de gedeelde pagina =================
   Bewust zonder de groene app-balk: dit is de buitenkant, niet jouw omgeving. */
.voorbeeldbalk{background:var(--inkt);color:var(--vlak);position:sticky;top:0;z-index:25}
.voorbeeldbalk__in{max-width:860px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:12px;
  font-size:13.5px;font-weight:600}
.voorbeeldbalk button{margin-left:auto;cursor:pointer;background:rgba(255,255,255,.16);border:0;
  color:var(--vlak);border-radius:var(--rond-s);padding:9px 15px;min-height:40px;font-size:13.5px;font-weight:700}
.voorbeeldbalk button:hover{background:rgba(255,255,255,.3)}
.bewijskop{display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding:24px 20px;border-bottom:1px solid var(--lijn)}
.bewijskop h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.03em}
.bewijskop p{font-size:13.5px;font-weight:400;color:var(--stil);margin-top:4px}
/* Rechthoekig met dezelfde ronding als de knoppen. Groen als het klopt, rood als het niet klopt:
   op de gedeelde pagina is de uitspraak zelf de boodschap, dus die mag kleur hebben. */
.standpil{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:baseline;gap:8px;
  border-radius:var(--rond-s);padding:10px 17px;font-size:14px;font-weight:700;
  background:var(--merk);color:var(--vlak)}
.standpil.mis{background:var(--rood);color:var(--vlak)}
.standpil span{font-size:13px;font-weight:500;opacity:.72;font-variant-numeric:tabular-nums}
.bewijsvoet{padding:16px 20px;border-top:1px solid var(--lijn);background:var(--veld);
  font-size:13px;font-weight:400;color:var(--stil)}

/* ================= module: elk onderdeel is een eigen kaart ================= */
.module{
  background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--rond);
  box-shadow:var(--kaart);overflow:hidden;margin-bottom:32px;
}
.module__kop{display:flex;align-items:baseline;gap:12px;padding:15px 20px 14px;border-bottom:1px solid var(--lijn)}
.module__kop b{font-size:17px;font-weight:800;letter-spacing:-.025em;line-height:1.2}
.module__kop i{margin-left:auto;font-style:normal;font-size:13px;font-weight:700;color:var(--flauw)}
.module--rood .module__kop{background:var(--rood-vlak);border-bottom-color:transparent}
.module--rood .module__kop b{color:var(--rood)}
.module--merk .module__kop{background:var(--merk-vlak);border-bottom-color:transparent}
.module--merk .module__kop b{color:var(--merk-diep)}
:root[data-theme="dark"] .module--merk .module__kop b,
:root:not([data-theme="light"]) .module--merk .module__kop b{color:var(--merk)}
.module--rood .module__kop i{color:var(--rood);opacity:.8}
.module--merk .module__kop i{color:var(--merk-diep);opacity:.8}

/* de werkbalk van de papierenmodule hoort in de kaart, niet los op de pagina */
.module__werk{display:flex;gap:9px;align-items:center;padding:13px 20px;border-bottom:1px solid var(--lijn);flex-wrap:wrap}
.zoekrij{position:relative;flex:1 1 220px;min-width:0}
.zoekrij svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--flauw)}
.zoekrij input{width:100%;font:inherit;font-size:15.5px;font-weight:600;padding:12px 14px 12px 42px;min-height:44px;
  border:1px solid var(--lijn2);border-radius:var(--rond-s);background:var(--veld);color:var(--inkt)}
.zoekrij input::placeholder{color:var(--flauw);font-weight:600;opacity:1}
.zoekrij input:focus-visible{outline-offset:-1px;border-color:var(--merk);background:var(--vlak)}
/* Eén segmentregelaar in plaats van vier losse knoppen. Een filter is bijzaak, dus hij hoort
   niet het zwaarste ding op het scherm te zijn. Segmenthoogte 38 is bewust onder de 44 die we
   voor regels en hoofdknoppen aanhouden: dit is een keuzeregelaar, geen doel op zich. */
.pillen{display:inline-flex;gap:2px;flex:0 0 auto;padding:3px;max-width:100%;
  background:var(--veld);border:1px solid var(--lijn);border-radius:var(--rond-s);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pillen::-webkit-scrollbar{display:none}
.pil{appearance:none;cursor:pointer;white-space:nowrap;flex:0 0 auto;min-height:38px;
  background:transparent;border:0;color:var(--stil);
  border-radius:9px;padding:9px 15px;font-size:13.5px;font-weight:600}
.pil:hover{color:var(--inkt)}
.pil[aria-pressed="true"]{background:var(--vlak);color:var(--inkt);font-weight:700;
  box-shadow:0 1px 2px rgba(15,23,45,.1)}

/* ================= één regel, overal dezelfde ================= */
.rij{
  display:grid;grid-template-columns:1fr 176px 150px 20px;gap:16px;align-items:center;
  width:100%;text-align:left;cursor:pointer;min-height:68px;
  background:transparent;border:0;border-top:1px solid var(--lijn);padding:14px 20px;
}
.rij:first-child{border-top:0}
.rij:hover{background:var(--hover)}
.rij:focus-visible{outline-offset:-3px}
.rij__wat{min-width:0}
.rij__wat b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.rij__wat em{display:block;font-style:normal;font-size:12px;font-weight:400;color:var(--inkt-mid);margin-top:2px}
.rij__wie{font-size:13.5px;font-weight:400;color:var(--stil);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Tot wanneer is één kolom: de datum, en eronder wat hij betekent. Twee kolommen voor
   hetzelfde gegeven lieten het oog twee keer springen. */
.rij__dat{text-align:right;white-space:nowrap}
.rij__dat b{display:block;font-size:15.5px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.rij__dat span{display:block;font-size:12px;font-weight:400;color:var(--flauw);margin-top:2px}
.bijna .rij__dat span{color:var(--rood)}
.nieuw .rij__dat span{color:var(--inkt-mid)}
.rij__dat span.let{color:var(--rood);font-weight:600}
.rij__pijl{color:var(--flauw)}
.rij__pijl svg{width:20px;height:20px;display:block}
/* Elke regel spreekt één familie in drie sterktes: titel sterk, actieregel midden, eigenaar zacht.
   Neutraal loopt van inkt via inkt-mid naar stil, een verlopen regel van rood via rood-mid naar
   rood-zacht. Petrol komt in een regel niet voor: dat is alleen voor bediening en merk.
   Een regel die bijna verloopt blijft neutraal; alleen zijn pil kleurt. Anders wordt het
   halve scherm rood en zegt rood niets meer. */
.rij.laat .rij__wat b,.laat .rij__dat b{color:var(--rood)}
.laat .rij__dat span{color:var(--rood-mid)}
.rij.laat .rij__wat em{color:var(--rood-mid)}
.rij.laat .rij__wie{color:var(--rood-zacht)}
.rij.laat .rij__pijl{color:var(--rood-zacht)}


/* Het jaartal is een tussenkop in één lijst, geen sectie in een sectie. Daarom geen vlak
   maar lucht erboven: ruimte groepeert net zo goed en houdt het één kaart. */
.tussenkop{display:flex;align-items:baseline;gap:10px;padding:22px 20px 7px;background:transparent;
  border-top:1px solid var(--lijn);
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--flauw)}
.tussenkop:first-child{border-top:0;padding-top:14px}
.tussenkop + .rij{border-top:0}
.tussenkop span{margin-left:auto;font-size:11.5px;letter-spacing:.03em;text-transform:none;font-weight:600}
.geen{padding:34px 20px;text-align:center;font-weight:600;color:var(--flauw)}

@media (max-width:680px){
  .rij{grid-template-columns:1fr auto;grid-template-areas:"wat dat" "wie dat";row-gap:4px;column-gap:14px}
  .rij__wat{grid-area:wat}
  .rij__wie{grid-area:wie}
  .rij__dat{grid-area:dat;align-self:center}
  .rij__pijl{display:none}
  .cta{padding:12px 15px}
  .ctatekst{display:none}
  .ctakort{display:inline}
}

/* ================= toevoegen =================
   Het uploadvak loopt over de volle breedte; wat je verder kunt doen staat eronder als
   tekstactie. Twee knoppen naast elkaar maakten van de bijzaak een even groot blok. */
/* De stippellijn ligt om het hele vak, dus ook om de tekstacties: alles wat met toevoegen
   te maken heeft zit in één omheining. */
.toevoegrij{
  margin-bottom:32px;padding:6px;
  border:2px dashed var(--lijn2);border-radius:var(--rond);
  transition:border-color .15s,background .15s;
}
.toevoegrij.over{border-color:var(--merk);background:var(--merk-vlak)}
.invoer{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;
  border:0;border-radius:8px;padding:14px 16px;
  cursor:pointer;background:transparent;
}
.invoer:hover{background:var(--merk-vlak)}
.invoer svg{width:22px;height:22px;flex:0 0 22px;color:var(--merk)}
.invoer b{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em}
.invoer small{display:block;font-size:13.5px;font-weight:400;color:var(--stil);margin-top:2px}
.invoer em{font-style:normal;font-weight:600;color:var(--merk)}
.onderrij{display:flex;align-items:center;gap:8px;padding:0 4px 2px;flex-wrap:wrap}
.tekstknop{
  cursor:pointer;background:transparent;border:0;border-radius:var(--rond-s);
  min-height:44px;padding:12px 12px;font-size:14.5px;font-weight:600;color:var(--stil);
}
.tekstknop:hover{color:var(--inkt);background:var(--hover)}
.onderrij .rechts{margin-left:auto}

.leegkaart{text-align:center;padding:30px 24px}
.leegkaart b{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em}
.leegkaart p{font-size:15.5px;font-weight:600;color:var(--stil);margin-top:8px;max-width:38ch;margin-left:auto;margin-right:auto}

/* ================= aparte standen ================= */
.standkop{color:#fff;background:var(--merk)}
.standkop__in{max-width:860px;margin:0 auto;padding:14px 18px;min-height:76px;display:flex;align-items:center;gap:12px}
.standkop__in .tekst{flex:1;min-width:0}
.standkop__in b{display:block;font-size:clamp(19px,4vw,24px);font-weight:800;letter-spacing:-.03em;line-height:1.2}
.standkop__in span{display:block;font-size:14.5px;font-weight:600;opacity:.88;margin-top:3px}
.rondknop{flex:0 0 44px;width:44px;height:44px;border-radius:50%;cursor:pointer;border:0;
  background:rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center}
.rondknop:hover{background:rgba(255,255,255,.34)}
.rondknop svg{width:22px;height:22px}
.klaarknop{flex:0 0 auto;cursor:pointer;background:rgba(255,255,255,.2);border:0;min-height:44px;
  color:#fff;border-radius:var(--rond-s);padding:12px 20px;font-size:15.5px;font-weight:700}
.klaarknop:hover{background:rgba(255,255,255,.34)}

/* detail */
.detail{padding-top:20px}
.waarschuwing{border-radius:var(--rond-s);padding:15px 17px;margin-bottom:20px;
  background:var(--rood-vlak);color:var(--rood);font-size:15.5px;font-weight:700}
.waarschuwing.nieuw{background:var(--merk-vlak);color:var(--merk-diep)}
:root[data-theme="dark"] .waarschuwing.nieuw,
:root:not([data-theme="light"]) .waarschuwing.nieuw{color:var(--merk)}
.veld + .veld{margin-top:18px}
.veld label{display:block;font-size:14px;font-weight:700;color:var(--stil);margin:0 0 7px}
.veld input{width:100%;font:inherit;font-size:16.5px;font-weight:600;padding:15px;min-height:52px;
  border:1px solid var(--lijn2);border-radius:var(--rond-s);background:var(--veld);color:var(--inkt)}
.veld input:focus-visible{outline-offset:-1px;border-color:var(--merk);background:var(--vlak)}
.veld input[aria-invalid="true"]{border-color:var(--rood);border-width:2px}
.veld .hint{display:block;font-size:14px;font-weight:600;color:var(--flauw);margin-top:6px}
.veld .fout{display:block;font-size:14.5px;font-weight:700;color:var(--rood);margin-top:6px}
.hoofdknop{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;
  margin-top:26px;cursor:pointer;border:0;border-radius:var(--rond);
  background:var(--merk);color:#fff;font-weight:800;font-size:18px;letter-spacing:-.015em;padding:20px}
.hoofdknop:hover{background:var(--merk-diep)}
/* Verwijderen is geen sectie maar een stille afsluiter: onderaan, gecentreerd, zonder rand.
   Bewust niet als prullenbak in de kop, want dan staat het onomkeerbare op de makkelijkst
   raakbare plek van het scherm. */
.weglink{display:block;margin:22px auto 0;padding:12px 16px;min-height:44px;cursor:pointer;
  background:transparent;border:0;border-radius:var(--rond-s);
  font-size:14.5px;font-weight:600;color:var(--rood)}
.weglink:hover{background:var(--rood-vlak)}
.zekervak{margin:22px auto 0;max-width:460px;text-align:center}
.zekervak p{font-size:14.5px;font-weight:500;color:var(--stil);margin-bottom:12px}
.zekervak div{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.formkaart{padding:20px}
.knop{cursor:pointer;border:1px solid var(--lijn2);background:var(--vlak);color:var(--inkt);min-height:48px;
  border-radius:var(--rond-s);padding:14px 20px;font-size:16px;font-weight:700}
.knop:hover{border-color:var(--flauw)}
.knop-echtweg{background:var(--rood);border-color:var(--rood);color:#fff}
.knop-echtweg:hover{filter:brightness(1.1);border-color:var(--rood)}

/* delen */
.eigenaar{display:grid;grid-template-columns:26px 1fr auto;gap:15px;align-items:center;
  width:100%;text-align:left;cursor:pointer;min-height:68px;
  background:transparent;border:0;border-top:1px solid var(--lijn);padding:14px 20px}
.eigenaar:first-child{border-top:0}
.eigenaar:hover{background:var(--hover)}
.eigenaar:focus-visible{outline-offset:-3px}
.bol{width:26px;height:26px;border-radius:50%;border:2px solid var(--lijn2);display:flex;align-items:center;justify-content:center}
.bol svg{width:14px;height:14px;color:#fff;opacity:0}
.eigenaar[aria-pressed="true"] .bol{background:var(--merk);border-color:var(--merk)}
.eigenaar[aria-pressed="true"] .bol svg{opacity:1}
.eigenaar.half .bol{border-color:var(--merk);box-shadow:inset 0 0 0 4px var(--merk)}
.eigenaar__naam{min-width:0}
.eigenaar__naam b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.eigenaar.laat .eigenaar__naam b{color:var(--rood)}
.eigenaar.laat .eigenaar__naam span{color:var(--rood-zacht)}
.eigenaar__naam span{display:block;font-size:13.5px;font-weight:400;color:var(--stil);margin-top:1px}
.fijn{display:block;margin:12px auto 0;padding:12px 14px;min-height:44px;cursor:pointer;
  background:transparent;border:0;border-radius:var(--rond-s);
  font-size:14.5px;font-weight:600;color:var(--stil)}
.fijn:hover{color:var(--inkt);background:var(--hover)}
.deelbalk{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--vlak);border-top:1px solid var(--lijn2);box-shadow:var(--hoog)}
.deelbalk__in{max-width:860px;margin:0 auto;padding:14px 18px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.deelbalk__in .telt{font-size:16px;font-weight:800;letter-spacing:-.02em}
.deelbalk__in .telt span{display:block;font-size:13.5px;font-weight:400;color:var(--stil);letter-spacing:0}
.deelrechts{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.voorwie{font:inherit;font-size:14.5px;font-weight:500;padding:12px 14px;min-height:48px;min-width:190px;
  border:1px solid var(--lijn2);border-radius:var(--rond-s);background:var(--veld);color:var(--inkt)}
.voorwie::placeholder{color:var(--flauw);font-weight:400}
.voorwie:focus-visible{outline-offset:-1px;border-color:var(--merk);background:var(--vlak)}
/* Een uitgedeelde link is een blijvend ding: hij hoort niet aanklikbaar te zijn maar wel
   in te trekken. Daarom geen pijl maar een actie aan het eind. */
.rij--stil{cursor:default;grid-template-columns:1fr 176px 128px auto}
.rij--stil:hover{background:transparent}
.intrek{cursor:pointer;background:transparent;border:0;border-radius:var(--rond-s);
  min-height:44px;padding:11px 12px;font-size:14px;font-weight:600;color:var(--stil);white-space:nowrap}
.intrek:hover{color:var(--rood);background:var(--rood-vlak)}
.knop-vol{background:var(--merk);border-color:var(--merk);color:#fff;margin-left:auto}
.knop-vol:hover{background:var(--merk-diep);border-color:var(--merk-diep)}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;
  background:var(--inkt);color:var(--vlak);border-radius:100px;padding:14px 24px;
  font-size:15.5px;font-weight:700;box-shadow:var(--hoog);max-width:90vw;text-align:center}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ================= wat het prototype niet had =================
   Het prototype was één pagina met javascript; dit zijn echte adressen. Daar horen twee dingen bij
   die daar niet nodig waren: een voet, en een melding die uit een omleiding komt in plaats van uit
   een toast. Beide in het ritme van de rest. */

.voet{max-width:860px;margin:0 auto;padding:10px 18px 40px;text-align:center;
  color:var(--flauw);font-size:13.5px;font-weight:500}
.voet a{color:var(--flauw)}

.melding{border-radius:var(--rond-s);padding:14px 17px;margin-bottom:20px;
  font-size:15px;font-weight:700}
.melding-gelukt{background:var(--merk-vlak);color:var(--merk-diep)}
.melding-fout{background:var(--rood-vlak);color:var(--rood)}
:root[data-theme="dark"] .melding-gelukt,
:root:not([data-theme="light"]) .melding-gelukt{color:var(--merk)}

/* Het merkteken uit de site, in plaats van het woordmerk met de stip uit het prototype. De site
   staat live met dat teken in de kopbalk, in de mail en in het tabblad; twee tekens voor hetzelfde
   merk is erger dan een teken dat van het prototype afwijkt. */
/*
 * Het merkteken past zich aan zijn ondergrond aan.
 *
 * Op wit: blauw papier met een wit vinkje, zoals op bewys.nl. Op de gekleurde balk andersom, want
 * blauw op blauw is bijna niets. Dat was het ook: het teken stond in #3D6BFF op een balk van #204CE5
 * en verdween erin.
 */
.teken{height:26px;width:auto;display:block;flex:0 0 auto}
.teken-achter{fill:var(--merk);opacity:.45}
.teken-voor{fill:var(--merk)}
.teken-vink{stroke:var(--vlak)}

.appbalk .teken-achter,.strook .teken-achter{fill:#fff;opacity:.5}
.appbalk .teken-voor,.strook .teken-voor{fill:#fff}
.appbalk .teken-vink{stroke:var(--merk)}
.strook .teken-vink{stroke:var(--inkt)}
.merkrij{display:flex;align-items:center;gap:9px;min-width:0}

/* De strook boven de gedeelde pagina. In het prototype was dat .voorbeeldbalk om te kijken wat de
   ontvanger ziet; hier is het de pagina zelf, dus hij draagt het merk. */
.strook{background:var(--inkt);color:#fff}
.strook__in{max-width:860px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:9px}
.strook .merk{font-size:17px}

/* Een formulier dat een heel scherm is, in het ritme van .veld uit het detail. */
.vorm{padding:20px}
.vormvoet{margin-top:22px;text-align:center}
.vormvoet a{color:var(--stil);font-size:14.5px;font-weight:600;text-decoration:none}
.vormvoet a:hover{color:var(--inkt);text-decoration:underline}

/* Een link als hoofdknop. Dezelfde maat en kleur als de knop, want het verschil tussen een knop en
   een link is voor de gebruiker niet interessant. */
a.hoofdknop{text-decoration:none}
a.knop{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}

/* Het adres van een deellink: groot genoeg om met een duim te selecteren. */
.adres{background:var(--veld);border:1px solid var(--lijn);border-radius:var(--rond-s);
  padding:14px 16px;margin:0 20px 16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14.5px;
  word-break:break-all;user-select:all}

/* Het bestandsveld. De knop van de browser is niet te stylen zonder javascript, dus hij krijgt
   genoeg ruimte om aan te raken en een rand die bij de andere velden hoort. */
input[type=file]{width:100%;font:inherit;font-size:15px;font-weight:600;
  border:2px dashed var(--lijn2);border-radius:var(--rond-s);padding:14px;
  background:var(--veld);color:var(--inkt)}
input[type=file]::file-selector-button{font:inherit;font-weight:700;font-size:14px;
  background:var(--vlak);color:var(--merk);border:1px solid var(--lijn2);border-radius:9px;
  padding:9px 14px;margin-right:12px;min-height:40px;cursor:pointer}

/* De keuzelijst voor het soort datum: dezelfde vorm als een veld. */
.soorten{border:1px solid var(--lijn2);border-radius:var(--rond-s);background:var(--veld);
  padding:14px 16px;margin:18px 0 0;display:flex;flex-direction:column;gap:2px}
.soorten legend{font-size:14px;font-weight:700;color:var(--stil);padding:0 6px}
.keuze{display:flex;align-items:flex-start;gap:11px;padding:9px 0;min-height:44px;
  font-size:15px;font-weight:600;cursor:pointer}
.keuze input{margin-top:3px;width:20px;height:20px;accent-color:var(--merk);flex:0 0 20px}

/* Een vinkje in de lijst bij delen, waar het prototype een bol met javascript had. */
.vink{width:24px;height:24px;accent-color:var(--merk);flex:0 0 24px;margin:0}

/* Een ingetrokken link blijft staan maar doet niets meer. Zachter, niet weg: dat hij bestond is
   onderdeel van je logboek. */
.rij--uit{opacity:.55}


/* ================= links die geen link zijn =================
 *
 * In het prototype waren de regels, de segmenten en de knoppen `<button>`-elementen, want daar deed
 * javascript het werk. Hier zijn het echte adressen en dus `<a>`, en dat is juist: een regel die naar
 * een ander scherm gaat hoort een link te zijn, met alles wat een browser daaraan geeft (middelklik,
 * nieuw tabblad, de status onderin).
 *
 * Maar het kost wel de standaardopmaak: zonder deze regels staat het hele scherm blauw en onderstreept
 * en verdwijnt het onderscheid tussen een titel, een houder en een datum volledig. Dat was ook zo.
 */
.rij,.eigenaar,.invoer{text-decoration:none;color:inherit;display:grid}
.rij:visited,.eigenaar:visited,.invoer:visited{color:inherit}
.invoer{display:flex}
.pil,.balkknop,.cta,.klaarknop,.rondknop,.merkrij,.weglink{text-decoration:none}
.pil:visited{color:var(--stil)}
.pil[aria-pressed="true"]:visited{color:var(--inkt)}
.balkknop,.balkknop:visited,.klaarknop,.klaarknop:visited{color:#fff}
.cta,.cta:visited{color:var(--merk)}
.weglink,.weglink:visited{color:var(--rood)}

/* Binnen een regel mag een link er wél uitzien als een link: daar is hij een uitzondering en geen
   regel. Het gaat om "het papier bekijken" op de gedeelde pagina en het bestand bij een versie. */
.rij__wat em a,.rij__wie a{color:var(--merk);text-decoration:underline}


/* ================= de enige groen in het hele product =================
 *
 * De stempel op de gedeelde pagina. In het prototype droeg die de merkkleur, en die was petrol: een
 * groentint, dus hij las als "in orde". Toen petrol naar blauw ging verdween die betekenis, want blauw
 * is bij ons bediening en zegt niets over de stand. Dat is een verlies dat je pas ziet als je naar de
 * pagina kijkt, niet als je de kleuren omzet.
 *
 * Dus hier staat groen, en alleen hier. Op de gedeelde pagina is de uitspraak zelf de boodschap: een
 * opdrachtgever die vier leveranciers naast elkaar legt leest de kleur voordat hij de tekst leest.
 * Overal elders in het product blijft gelden dat een kleur geen status is.
 */
.standpil{background:#14794A;color:#fff}
.standpil.mis{background:var(--rood)}
:root[data-theme="dark"] .standpil,
:root:not([data-theme="light"]) .standpil{background:#2E9C68}


/* Het bestandsveld in het toevoegvak is verborgen; het label ís het vak. Zo blijft de vorm van het
   prototype (een gestippelde omheining die je aantikt) zonder javascript. De knop "Toevoegen" staat
   in de onderrij, want zonder javascript moet een formulier verzonden worden. */
.toevoegrij .invoer{cursor:pointer}
.toevoegrij input[type=file]{border:0;padding:0;background:none}
.tekstknop{font-family:inherit}
a.tekstknop{display:inline-flex;align-items:center;text-decoration:none}

/* ================= wat eerst in een style-attribuut stond =================
 *
 * Er stonden negenentwintig inline stijlen in de schermen, en die deden allemaal NIETS: de CSP staat
 * `style-src 'self'` zonder `unsafe-inline`, dus de browser gooit elk `style="..."` weg. Zonder
 * foutmelding, en dat is het vervelende: de opmaak klopte in de broncode en niet op het scherm. Zo
 * ontbrak de lucht tussen de balk en de eerste kaart, en stond het woordmerk onderstreept.
 *
 * Ze staan hier met een naam die zegt wat ze doen in plaats van wat ze zijn, zodat er geen tweede
 * stijltaal naast het stijlblad ontstaat.
 */

/* De inhoud onder een kop- of standbalk. */
.blad{padding-top:20px}
.blad--ruim{padding-top:24px}

/* Een scherm dat uit één smalle kaart bestaat: inloggen, een foutmelding. */
.smal{max-width:460px;margin-inline:auto}

/* Het merk in de balk is een link naar je papieren, maar hij hoort er niet als een link uit te zien. */
.merklink{text-decoration:none;color:inherit;display:block}
.merklink:visited{color:inherit}

/* De aanhef binnen een formulierkaart: de vorm van een lege kaart, zonder de lucht eronder omdat het
   formulier volgt. */
.opener{padding:6px 0 22px}

/* Een alinea die de boodschap van het scherm draagt, in plaats van toelichting te zijn. */
.draagt{font-size:16.5px;font-weight:600}
.draagt--kop{margin-bottom:14px}
.draagt + .hint{display:block;margin-top:10px}

/* Een opsomming die geen lijst is: vier regels achter elkaar met lucht ertussen. */
.somrij{font-size:15px;line-height:1.7}

/* Weggooien draagt rood, en alleen op het scherm dat erom vraagt. */
.hoofdknop--weg{background:var(--rood)}
.hoofdknop--weg:hover{background:#A02116}

.formkaart--strak{padding-bottom:0}
.veld--kaal{margin:0}
.hint--boven{display:block;margin:0 0 8px}
.hint--onder{padding:0 20px 18px}

/* Een knop die geen hoofdknop is, binnen een formulierkaart. */
.formkaart .knop{margin-top:18px}


/* ================= de kop van een pagina die één ding doet =================
 *
 * Was een eigen balk die de appbalk verving, zoals in het prototype. Dat gaf twee problemen die
 * dezelfde kant op wezen: de twee balken waren niet even hoog (een titel mét ondertitel groeit over
 * de 76 pixels heen, dus de bovenkant versprong), en op die pagina's stond geen merk meer.
 *
 * Nu draagt elke pagina dezelfde appbalk en staat waar-je-bent hieronder, in de inhoud.
 */
.paginakop{
  display:flex;align-items:center;gap:14px;
  margin:0 0 20px;padding:0 2px;
}
.paginakop .tekst{flex:1;min-width:0}
.paginakop .tekst b{display:block;font-size:clamp(20px,4vw,25px);font-weight:800;
  letter-spacing:-.03em;line-height:1.2}
.paginakop .tekst span{display:block;font-size:14.5px;font-weight:500;color:var(--stil);margin-top:3px}

/* De ronde terugknop staat nu op een lichte ondergrond in plaats van op de merkkleur. */
.paginakop .rondknop{background:var(--vlak);border:1px solid var(--lijn2);color:var(--inkt)}
.paginakop .rondknop:hover{background:var(--hover);border-color:var(--flauw)}
.paginakop .knop{flex:0 0 auto}

/* De appbalk krijgt een vaste hoogte in plaats van een minimum, zodat er nooit iets overheen groeit
   en de bovenkant op elke pagina op dezelfde plek staat. */
.appbalk__in{height:76px;min-height:76px}


/* ================= de voet staat onderaan, niet ergens in het midden =================
 *
 * Op een kort scherm (het inlogscherm, een lege lijst) hing de voet vlak onder de inhoud en dus
 * halverwege de pagina. Dat leest als een afgebroken pagina.
 *
 * Met een kolom over de volle hoogte en `margin-top:auto` op de voet zakt hij naar beneden zodra er
 * ruimte over is, en schuift hij gewoon mee als de inhoud langer wordt. `100dvh` en niet `100vh`:
 * op een telefoon telt vh de adresbalk mee die er niet altijd is, en dan staat de voet net buiten
 * beeld.
 */
body{display:flex;flex-direction:column;min-height:100dvh}
body > main{flex:1 0 auto}
.voet{flex:0 0 auto;margin-top:auto;padding-top:28px}


/* ================= .hint buiten een veld =================
 *
 * In het prototype was dit `.veld .hint`: toelichting onder een invoerveld. Ik gebruik hem ook als
 * losse alinea ("de papieren van je bedrijf blijven gratis"), en dan gold er niets: zwarte tekst op
 * zestien pixels, tegen het blok erboven aan. Het zag eruit als een gewone regel in plaats van een
 * terzijde.
 */
.hint{display:block;font-size:14px;font-weight:600;color:var(--flauw);line-height:1.5}

/* In een kaart hebben alinea's onderling lucht nodig; `p{margin:0}` uit het prototype gaat uit van
   een lijst met regels en niet van lopende tekst. */
.formkaart p + p,.formkaart p + .hint,.formkaart .veld + p{margin-top:12px}
.formkaart .somrij{margin-top:10px}

/* ================= beeldmerk naast woordmerk =================
 *
 * Het prototype had alleen een woordmerk met een vierkant stipje, en dat stipje wás daar de
 * vervanging voor een teken dat nog niet bestond. Nu er een teken is hoort dat er te staan: het is
 * het tabbladicoon, het staat in de kop van bewys.nl en in de outreach-mail. Twee verschillende
 * merken voor één product is erger dan afwijken van een prototype van vóór dat merk.
 */
.merk{display:flex;align-items:center;gap:9px}
.merk i{display:none}
.appbalk .teken{height:23px}
.strook .teken{height:19px}

/* De bedrijfsnaam lijnt uit onder het woord en niet onder het teken, anders hangt hij los. */
.bedrijfsrij{padding-left:32px}