/* App-schil en componenten, overgenomen uit het prototype (prototype-src/ui.jsx).
   Daar staat het ontwerp in React-inlinestijlen; hier staan dezelfde waarden als
   klassen, zodat de server-gerenderde app er hetzelfde uitziet. Alle kleuren en
   maten komen uit tokens.css.

   De naamgeving volgt het prototype: Card → .kaart, ScoreBtns → .scoreknop,
   Ring → .ring, TrendBars → .trend, BarChart → .staafjes. */

* { box-sizing: border-box; }
/* Een component met display: flex mag [hidden] niet overstemmen. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; height: 100%; }

/* --- Aanraakgedrag (prototype: .pbtn, .pcard, .navi) -------------------- */
.pbtn, .scoreknop, .catpil, .nvt {
  cursor: pointer; user-select: none;
  transition: transform .1s, box-shadow .15s, background .15s, border-color .15s, color .15s;
}
.pbtn:active { transform: translateY(1px); }

/* Alleen voor schermlezers: sprongkoppeling en meldingen die niemand hoeft te zien. */
.alleen-voorlezen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Tapdoelen op écht aanraakgerei — een iPad is 768 tot 1194 px breed en valt
   dus buiten elke breedte-mediaquery die je voor 'mobiel' schrijft. */
@media (pointer: coarse) {
  .scoreknop { width: 54px; height: 54px; font-size: var(--text-lg); }
  .schaal { gap: 8px; }
  .catpil { min-height: 44px; }
}


/* --- Topbalk ------------------------------------------------------------ */
.topbar { z-index: 9; }
/* Het echte SYNDLE-logo uit het stijlboek; de huisstijl verbiedt herkleuren,
   dus geen filter of gekleurde ondergrond eronder. Alleen "Audit" is tekst. */
.merk { gap: 7px; flex-shrink: 0; margin-bottom: 0; padding: 0; line-height: 1; }
.merk img { height: 20px; width: auto; display: block; }
.merk span {
  font-weight: 700; font-size: var(--text-lg);
  letter-spacing: -.03em;
}
.merk.groot { gap: 9px; }
.merk.groot img { height: 28px; }
.merk.groot span { font-size: var(--text-2xl); }
.scheiding { width: 1px; height: 26px; background: var(--outline-variant); flex-shrink: 0; }

.tabs { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav__item.uit { opacity: .5; pointer-events: none; }
.tabs::-webkit-scrollbar { display: none; }

.topbar .gebruiker { flex: 0 1 auto; }

/* --- Inhoud ------------------------------------------------------------- */
main { max-width: var(--inhoud-max); margin: 0 auto; padding: 26px var(--shell-gutter) 60px; }
h1 { margin: 0; }
h2 { margin: 0 0 10px; }
h3 { margin: 0 0 6px; }
.onderkop { margin: 6px 0 22px; color: var(--on-surface-variant); font-size: var(--text-sm); max-width: 68ch; }

/* --- Kaarten (prototype: Card) ------------------------------------------ */
.kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.kaart {
  display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
.kaart .titel { font-weight: 700; font-size: var(--text-base); }
.kaart .tekst { font-size: var(--text-sm); color: var(--on-surface-variant); line-height: 1.5; flex: 1; }
section.kaart { margin-bottom: 16px; }
/* Een tweede deel in een kaart, onder een streep (de trend onder de categoriescore). */
.kaartsectie { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--outline-variant); }
.kaartsectie .hulptekst { margin: 0; }
section.kaart h2 + .hulptekst { margin-top: -4px; }
.kaart.gedimd { opacity: .62; }
.kaartvoet { display: flex; align-items: center; gap: 9px; padding-top: 12px; border-top: 1px solid var(--outline-variant); }

/* --- Pills en status ---------------------------------------------------- */
/* Badge en chip staan in huisstijl/huisstijl.css. Hier alleen de plaatsing. */
.badge { align-self: flex-start; white-space: nowrap; }
/* Een rij badges in één cel: met alleen de spatie uit de HTML ertussen raken ze
   elkaar, en bij het afbreken naar een tweede regel overlappen ze — de regelhoogte
   van de tabel is kleiner dan een badge hoog is. */
.pillen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Een ja/nee-schakelaar houdt één breedte: anders is 'ja' twee letters breed en
   'nee' drie, en verspringt de kolom per regel. */
.chip.schakelaar { min-width: 3.4em; justify-content: center; }
/* De ziekenhuizen van een gebruiker: naast elkaar, en het keuzeveld eronder —
   anders loopt de rij door elkaar zodra er meerdere staan. */
.toewijzingen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.toewijzingen form { display: contents; }
form.toewijzen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- Knoppen ------------------------------------------------------------
   De knop zelf staat in huisstijl/huisstijl.css: .knop met --primair, --secundair,
   --ghost, --gevaar, --klein en --icoon. Hier alleen wat deze app erbij heeft. */
.knop--breed { width: 100%; }
/* Invulvelden in een observatietabel: alleen zo breed als hun inhoud, anders rekt
   één tijdveld de hele kolom op. Op een aanraakscherm worden ze hoger, want daar
   staan ze dicht op elkaar. */
.tabel.raster .invoer { min-width: 0; }
.tabel.raster .invoer.tijd { width: 7.5em; }
.tabel.raster .invoer.aantal { width: 5.5em; }
.tabel.raster .invoer.tijdvak { width: 10em; }
/* Een samengevoegde bankvraag: blijft leesbaar, maar niet meer in gebruik. */
tr.vervallen td { color: var(--on-surface-variant); }
/* Vierkant knopje voor één teken (✎ ✕). Op de iPad blijft het 44px, want daar
   staan potlood en kruisje naast elkaar en zit een misser meteen fout. */
.knop--icoon { line-height: 1; }
.knoppen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* Een formulier in zo'n rij is zelf ook een blok; zonder dit staat de knop erin op
   zijn eigen regelhoogte en zakt hij weg naast zijn buren. Dat viel op bij 'Sessie
   afronden', dat naast een keuzelijst staat die hoger is dan een knop. */
.knoppen > form { display: flex; align-items: center; gap: 8px; margin: 0; }
/* In een knoppenrij staat de grendel gewoon op de middellijn mee. `align-self`
   betekent in een kolom iets anders dan in een rij, vandaar dat hij hier terug moet
   naar het midden. En niet afbreken: een tabelkolom krimpt anders tot de breedte van
   de knop en dan valt het potloodje op een eigen regel. */
.knoppen > form.schuifgrendel { gap: 0; align-self: center; }
.tabel td .knoppen { flex-wrap: nowrap; }

/* --- Velden ------------------------------------------------------------- */
.invoer.smal { width: auto; min-width: 90px; }

.formulier { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.rij { display: flex; flex-direction: column; gap: 5px; }
.formulier label, .inlog label { font-size: var(--text-sm); font-weight: 500; color: var(--on-surface); }
.balk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
/* In een tabelcel is die onderruimte er te veel: hij duwt de keuzelijst acht pixels
   boven het midden van de regel, en dan staat hij scheef naast alles ernaast. */
.tabel form.balk { margin-bottom: 0; }
.balk .invoer { width: auto; min-width: 200px; }
.balk label { font-size: var(--text-sm); font-weight: 500; color: var(--on-surface); }
.inline { display: inline; }

.melding { display: block; }
.melding ul { margin: 6px 0 0; padding-left: 18px; }
.melding li { margin: 2px 0; }
.fout { color: var(--error); font-size: var(--text-xs); }

/* --- Inloggen ----------------------------------------------------------- */
.inlog { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.inlog .kaart { width: 100%; max-width: 380px; gap: 14px; }
.inlog .rij { display: flex; flex-direction: column; gap: 6px; }
.inlog .tekst { margin: 0; }

/* --- Koppen en tabellen ------------------------------------------------- */
.kop-rij { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.kop-rij .onderkop, .kop-rij .balk { margin-bottom: 0; }

.tabel { margin-bottom: 16px; }
/* Een tabel die breder wordt dan zijn kaart schuift in zichzelf, niet in de
   pagina: tien jaar trend naast elkaar past niet op een scherm en mag de rest
   niet meesleuren. */
.tabelrol { overflow-x: auto; margin-bottom: 16px; }
.tabelrol > .tabel { margin-bottom: 0; }
/* Een bestandsnaam of code zonder spaties mag een kolom niet openbreken. */
.tabel td { overflow-wrap: anywhere; }
.tabel td.code, .tabel .rechts { overflow-wrap: normal; }
.tabel--compact { margin-bottom: 10px; }
.tabel .rechts { text-align: right; white-space: nowrap; }
.tabel .code, .code { font: 600 var(--text-xs) var(--font-mono); color: var(--on-surface-variant); white-space: nowrap; }
/* Een vragenlijst staat als acht losse tabellen op het scherm, één per categorie,
   en de browser verdeelt de breedte per tabel opnieuw naar de inhoud. Met vragen
   van 129 tot 215 tekens stond de code in de ene categorie verder van de vraag dan
   in de andere. Deze kolommen krimpen nu tot hun inhoud, zodat de vraagkolom het
   verschil opvangt en alle tabellen op dezelfde plek beginnen. */
.tabel td.code, .tabel th.code { width: 1%; }
.tabel td.rechts, .tabel th.rechts { width: 1%; }
.tabel .gedimd td, tr.gedimd td { opacity: .5; }
.tabelscroll { overflow-x: auto; margin-bottom: 8px; }
.tabelscroll .tabel { min-width: 640px; }

/* Een link heeft dezelfde kleur als gewone tekst, dus de streep eronder is het
   enige dat zegt dat je erop kunt klikken. Die blijft dus staan — maar zacht: een
   volle oranje rand van anderhalve pixel onder elke regel in een tabel is meer
   opmaak dan aanwijzing. Bij aanwijzen wordt hij wél vol, want dan is hij een
   antwoord op 'kan ik hier klikken'.

   Met text-decoration en niet met een border: dat springt over de staarten van een
   g en een j heen, zodat de streep niet dwars door 'Longgeneeskunde' loopt. */
.link {
  color: var(--on-surface); font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent);
}
.link:hover, .link:focus-visible {
  text-decoration-color: var(--primary);
  text-decoration-thickness: 1.5px;
}
.lijst { margin: 0; padding-left: 18px; font-size: var(--text-sm); line-height: 1.7; }
.twee-koloms { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }

/* --- Cijfers, delta, ring, trend (prototype: Cijfer/Delta/Ring/TrendBars) */
.cijfer { font-variant-numeric: tabular-nums; font-weight: 700; }
.cijfer.hoog, .groot-getal.hoog { color: var(--success); }
.cijfer.mid, .groot-getal.mid { color: var(--warning); }
.cijfer.laag, .groot-getal.laag { color: var(--error); }
.cijfer.geen, .groot-getal.geen { color: var(--on-surface-variant); }

.ring { position: relative; flex-shrink: 0; }
.ring svg { transform: rotate(-90deg); display: block; }
.ring .ringtekst {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 700 var(--text-sm) var(--font); color: var(--on-surface);
}

.trend { display: flex; align-items: flex-end; gap: 3px; height: 44px; min-width: 64px; }
.tabel td.verloop { width: 1%; padding-left: 18px; }
.trend .staaf { flex: 1; min-width: 5px; border-radius: 2px 2px 0 0; background: var(--sp-gold); opacity: .42; }
.trend .staaf.nu { opacity: 1; }
.trend .staaf.leeg { height: 2px !important; background: var(--outline-variant); opacity: 1; }

/* De waarde staat bóven het staafje (top:-17px), dus er moet ruimte boven de
   grafiek zijn — anders loopt het cijfer van een 10,0 over de tekst erboven. */
.staafjes {
  display: flex; align-items: flex-end; gap: 14px;
  height: 150px; padding: 20px 2px 0; margin-bottom: 6px;
}
.staafjes .kolom { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.staafjes .balken { flex: 1; display: flex; align-items: flex-end; gap: 3px; width: 100%; justify-content: center; }
.staafjes .vorig { width: 9px; background: var(--surface-selected); border-radius: 3px 3px 0 0; }
.staafjes .nu { width: 16px; border-radius: 4px 4px 0 0; position: relative; background: var(--on-surface-variant); }
.staafjes .nu.hoog { background: var(--success); }
.staafjes .nu.mid { background: var(--warning); }
.staafjes .nu.laag { background: var(--error); }
.staafjes .nu .waarde {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  font: 700 var(--text-xs) var(--font); font-variant-numeric: tabular-nums; color: inherit;
}
.staafjes .nu.hoog .waarde { color: var(--success); }
.staafjes .nu.mid .waarde { color: var(--warning); }
.staafjes .nu.laag .waarde { color: var(--error); }
.staafjes .kolom { min-width: 0; }
.staafjes .kort {
  font: 600 var(--text-xs) var(--font-mono); color: var(--on-surface-variant); text-align: center;
  line-height: 1.1; height: 24px; white-space: nowrap; overflow: hidden;
}

/* --- Invulscherm: één categorie tegelijk (prototype: Audit) -------------- */
.werkblad { display: flex; flex-direction: column; min-height: calc(100vh - var(--shell-topbar)); }
.catbalk {
  display: flex; gap: 8px; padding: 14px var(--shell-gutter);
  background: var(--surface-raised); border-bottom: 1px solid var(--outline-variant);
  overflow-x: auto; flex-shrink: 0; position: sticky; top: var(--shell-topbar); z-index: 8;
}
.catpil {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  border: 1.5px solid var(--outline-variant); background: var(--surface-raised); color: var(--on-surface-variant);
  border-radius: 999px; padding: 7px 14px; font: 600 var(--text-xs) var(--font);
  text-decoration: none; min-height: 38px;
}
.catpil.af { background: var(--surface-selected); color: var(--on-surface); }
.catpil.actief { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

.werkvlak { flex: 1; display: flex; gap: 22px; padding: 22px var(--shell-gutter); align-items: flex-start; }
.vragenkolom { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rail { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 130px; }

.vraagregel {
  background: var(--surface-raised); border: 1px solid var(--outline-variant); border-radius: var(--r-button);
  padding: 13px 16px; transition: border-color .15s, background .15s;
}
.vraagregel.open { border: 1.5px solid var(--primary); }
.vraagregel.op-nvt { background: var(--surface); opacity: .72; }
.vraagregel.zojuist { animation: bewaard .9s ease-out; }
@keyframes bewaard { from { background: var(--primary-container); } to { background: var(--surface-raised); } }
.vraagkop { display: flex; align-items: flex-start; gap: 14px; }
/* Het nummer of de code links van de vraag: op dezelfde regel als de eerste regel
   tekst beginnen. Het keukenpunt gebruikt de code (HYG-03) waar de afdelingsaudit
   een nummer gebruikt; zonder deze regel staat die code acht pixels te hoog. */
.vraagkop .nr, .vraagkop .code {
  font: 600 var(--text-xs) var(--font-mono); color: var(--on-surface-variant);
  margin-top: 11px; min-width: 18px;
}
.vraagtekst { flex: 1; font-size: var(--text-sm); line-height: 1.45; margin-top: 8px; }
.vraagvoet { display: flex; gap: 8px; margin-top: 11px; margin-left: 32px; align-items: center; }

/* Het waarnemingsveld is een textarea en geen invoerregel: er hoort een zin in te
   staan die het rapport in kan. Hij begint op één regel zodat vijftig vragen onder
   elkaar te overzien blijven, en groeit mee zodra er meer in komt — dat laatste doet
   een scriptje, want CSS kan de hoogte van ingetypte tekst niet meten. Verticaal
   slepen staat uit; dat werkt op een iPad toch niet. */
.vraagvoet .waarneming {
  resize: none; overflow: hidden; line-height: 1.45; padding-top: 9px; padding-bottom: 9px;
}

/* Het duwtje bij een 0 of een 1 zonder waarneming. Zacht van toon en van kleur: het
   is een vraag aan de auditeur, geen fout — hij kan een goede reden hebben. */
.vraaghint {
  margin: 9px 0 0 32px; padding: 7px 11px; border-radius: 8px;
  background: var(--warning-container); border-left: 3px solid var(--warning);
  color: var(--on-surface-variant); font-size: var(--text-xs); line-height: 1.45;
}
@media (max-width: 860px) { .vraaghint { margin-left: 0; } }

/* Scoreknoppen: vierkant met ronde hoeken, zoals ScoreBtns in het prototype.
   46px op aanraakschermen — een auditeur tikt dit staand op een iPad. */
.schaal { display: flex; gap: 5px; align-items: flex-start; flex-shrink: 0; }
.scoreknop {
  width: 46px; height: 46px; border-radius: 10px; border: 1.5px solid var(--outline-variant);
  background: var(--surface-raised); color: var(--on-surface-variant);
  font: 700 var(--text-lg) var(--font); display: inline-flex; align-items: center; justify-content: center;
}
.scoreknop:hover { border-color: var(--on-surface-variant); }
.scoreknop:active { transform: scale(.92); }
.scoreknop.gekozen { background: var(--primary); border: 2px solid var(--primary); color: var(--on-primary); }
.nvt {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 13px;
  font: 500 var(--text-xs) var(--font); color: var(--on-surface-variant); white-space: nowrap;
  background: none; border: 0;
}
.nvt .vakje {
  width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--outline-variant);
  display: inline-flex; align-items: center; justify-content: center; color: var(--on-primary); font-size: var(--text-xs);
}
.nvt.aan { color: var(--on-surface); font-weight: 700; }
.nvt.aan .vakje { background: var(--on-surface); border-color: var(--on-surface); }
.opgeslagen { font-size: var(--text-xs); color: var(--on-surface-variant); }
.toelichting-gelezen { margin: 8px 0 0; font-size: var(--text-sm); color: var(--on-surface-variant); }

/* Voetbalk met de voortgang over alle categorieën. */
.voetbalk {
  position: sticky; bottom: 0; z-index: 8;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  height: 60px; padding: 0 var(--shell-gutter);
  background: var(--surface-raised); border-top: 1px solid var(--outline-variant);
}
.voetbalk .stand { display: flex; align-items: center; gap: 12px; font-size: var(--text-xs); color: var(--on-surface-variant); }
.meter { width: 160px; height: 6px; border-radius: 3px; background: var(--surface-selected); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--spectrum); transition: width .4s; }

.vergrendeld .scoreknop, .vergrendeld .invoer, .vergrendeld .nvt { opacity: .45; pointer-events: none; }

/* --- Keukenoordelen ------------------------------------------------------ */
.scoreknop.oordeel { width: auto; min-width: 0; padding: 0 14px; font-size: var(--text-sm); }
.scoreknop.oordeel.gekozen.goed { background: var(--success); border-color: var(--success); }
.scoreknop.oordeel.gekozen.aandachtspunt { background: var(--warning); border-color: var(--warning); color: var(--on-surface); }
.scoreknop.oordeel.gekozen.afwijking { background: var(--error); border-color: var(--error); }
.scoreknop.oordeel.gekozen.nvt { background: var(--on-surface-variant); border-color: var(--on-surface-variant); }
.raster .invoer { min-width: 120px; }
.voorstel {
  white-space: pre-wrap; font: 400 var(--text-sm) var(--font); color: var(--on-surface-variant);
  background: var(--surface); border-radius: var(--r-control); padding: 10px 12px; margin: 8px 0;
}

/* --- Rapport ------------------------------------------------------------- */
.cijferblok { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.delta { font: 700 var(--text-xs) var(--font); border-radius: 999px; padding: 3px 9px; }
.delta.op { color: var(--on-success-container); background: var(--success-container); }
.delta.neer { color: var(--on-error-container); background: var(--error-container); }
.delta.gelijk { color: var(--on-surface-variant); background: var(--surface-selected); }
td.cijfer { font-variant-numeric: tabular-nums; font-weight: 700; }
td.cijfer.laag { background: var(--error-container); color: var(--on-error-container); }
td.cijfer.hoog { background: var(--success-container); color: var(--on-success-container); }
td.cijfer.mid { background: transparent; }
td.cijfer.geen { color: var(--on-surface-variant); }
.totaalrij td { border-top: 2px solid var(--outline-variant); font-weight: 700; }

/* --- Snel inloggen (alleen ontwikkelomgeving) ---------------------------- */
.snellogin { width: 100%; max-width: 380px; margin-top: 14px; gap: 8px; }
.snellogin .hulptekst { margin: -2px 0 4px; }
.snelknop {
  width: 100%; justify-content: space-between; gap: 12px; text-align: left;
  font-weight: 600; padding: 10px 14px;
}
.snelknop .wie { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; gap: 0; }
.snelknop .code { font: 600 var(--text-xs) var(--font-mono); color: var(--on-surface-variant); }

/* --- Smalle schermen: de iPad staand, en de telefoon --------------------- */
@media (max-width: 900px) {
  .werkvlak { flex-direction: column; }
  .rail { width: 100%; position: static; }
}
@media (max-width: 720px) {
  :root { --inhoud-pad: 16px; }
  .kop-rij { flex-direction: column; align-items: stretch; }

  /* De naam en de rol gaan weg, de avatar met de initialen blijft. Anders duwt het
     blok rechts de zes tabbladen tot nul breedte — dan is de navigatie op een
     telefoon niet meer te bereiken, en dat is geen schoonheidsfoutje. */
  .topbar .gebruiker__tekst { display: none; }
  .topbar .gebruiker { gap: 8px; flex-shrink: 0; }
  .scheiding { display: none; }
  .tabs { min-width: 0; flex: 1 1 auto; }

  /* De schaal en n.v.t. op één regel: bij 52 vragen scheelt dat 52 regels
     scrollen, en het hoort ook bij elkaar — het is één keuze. */
  .vraagkop { flex-wrap: wrap; }
  .vraagkop .schaal { flex: 1 1 auto; }
  .vraagkop .nvt { flex-shrink: 0; }
  .scoreknop { flex: 1; min-width: 0; }
  .vraagvoet { margin-left: 0; }
  /* De vraagtekst vult de regel naast het nummer, zodat de schaal naar de tweede
     regel zakt en n.v.t. daar achteraan meekomt. Het nummer een eigen regel geven
     kost bij 52 vragen 52 regels scrollen. */
  .vraagkop .vraagtekst { flex: 1 1 calc(100% - 34px); }

  /* De voetbalk heeft op 390 pixels geen ruimte voor een zin. Wat er moet staan is
     hoeveel er open is en hoe het ervoor staat; 'x van 7 categorieën afgerond'
     staat al bovenin als pillen. */
  .voetbalk { height: auto; padding: 10px var(--shell-gutter); }
  .voetbalk .stand { gap: 10px; }
  /* Alles met .voluit is context die op een telefoon niet hoeft. */
  .voluit { display: none; }

  /* Behalve waar juist tekst in staat: die mag wel afbreken, anders wordt één cel
     zo breed als een alinea. */
  .tabel td.tekst, .tabel td .toelichting-gelezen { white-space: normal; min-width: 22ch; }
  .meter { width: 60px; }

  /* Ruimte terugwinnen op het invulscherm. Op 390 pixels ging 36% van het eerste
     scherm op aan de kop, en paste er nog geen derde vraag bij. Waar je bent staat
     al in de pillenbalk erboven; de kop hoeft dat niet groot te herhalen. */
  .werkvlak { padding-top: 12px; }
  .werkblad .kop-rij { margin-bottom: 10px; gap: 4px; }
  .werkblad .onderkop { font-size: var(--text-xs); line-height: 1.35; margin-top: 3px; }
  /* Hoeveel er in deze categorie beoordeeld is, staat al als getal in de pil erboven. */
  .werkblad .kop-rij > .hulptekst { display: none; }

  /* En de vraag zelf compacter: bij 202 pixels per vraag zie je er twee. Alle
     tikdoelen blijven 44 pixels hoog — dat is waar je met een vinger op mikt. */
  .werkblad .vragenkolom { gap: 8px; }
  .vraagregel { padding: 10px 12px; }
  .vraagkop { gap: 10px; }
  .vraagtekst { margin-top: 0; }
  .vraagkop .nr { margin-top: 0; }
  .vraagvoet { margin-top: 8px; }
  .scoreknop { height: 44px; }
}

/* --- Startscherm: de stand in vier getallen ------------------------------ */
.stand-cijfers, .stand {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin-bottom: 30px;
}
.kaart.stat { gap: 4px; padding: 16px 18px; }
.kaart.stat .groot-getal { color: var(--on-surface); }
.kaart.stat.let-op .groot-getal { color: var(--warning); }

/* --- Rapportscherm ------------------------------------------------------- */
.kaart.eindcijfer { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.kaart.eindcijfer .hulptekst { max-width: 46ch; }
.catstand { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.tabel td.punt { font-variant-numeric: tabular-nums; width: 56px; color: var(--on-surface-variant); }
.tabel td.punt.zwak { color: var(--error); font-weight: 700; }

/* Een eerder verslag in de app zelf inzien: het kader vult de hoogte van het
   scherm minus de kop erboven, zodat je niet in twee schuifbalken tegelijk zit. */
.kaart.lezer { padding: 0; overflow: hidden; }
.verslag { display: block; width: 100%; height: calc(100vh - 200px); min-height: 420px; border: 0; }
.middenuit { text-align: center; }

/* -- de verslaglezer ------------------------------------------------------
   Een lezer is geen scherm met een document erop maar een document met een
   smalle balk erboven. De balk blijft staan bij het bladeren, zodat 'Sluiten'
   altijd binnen bereik is — dat was de klacht: je kwam er alleen uit met de
   terugknop van de browser. */
.lezerbalk {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 10px 0 12px; margin-bottom: 12px;
  background: var(--surface); border-bottom: 1px solid var(--outline-variant);
}
.lezertitel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lezertitel strong { font-size: var(--text-lg); }
.lezerbalk .knoppen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zoom { display: flex; align-items: center; gap: 4px; }
.zoomstand { font-size: var(--text-xs); color: var(--on-surface-variant); min-width: 38px; text-align: center; }

/* De pagina's onder elkaar. De breedte is een instelling en geen vaste maat:
   100% is zo breed als de kolom, en daarboven mag hij buiten de kolom groeien
   omdat een A4 op 100% nog altijd klein leest. */
.verslagpaginas {
  --verslagzoom: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding-bottom: 32px;
}
.verslagpagina { margin: 0; width: var(--verslagzoom); max-width: 100%; }
.verslagpagina img {
  display: block; width: 100%; height: auto;
  background: var(--surface-raised); border: 1px solid var(--outline-variant); border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.verslagpagina figcaption {
  text-align: center; font-size: var(--text-xs); color: var(--on-surface-variant); padding-top: 6px;
}
@media (min-width: 1100px) {
  /* Ruimer dan de kolom: op een breed scherm is er plek en dan leest een A4
     pas echt prettig. Onder die breedte blijft hij binnen de kolom. */
  .verslagpagina { max-width: min(var(--verslagzoom), 1400px); width: var(--verslagzoom); }
}

/* --- Foto's bij een categorie -------------------------------------------- */
/* Twee op een rij in de rechterkolom: groot genoeg om te zien wat erop staat,
   klein genoeg om er vier onder elkaar te hebben zonder te scrollen. Onder de
   860px vouwt de rail toch naar één kolom en mogen ze breder. */
.fotostrook { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.fotostrook .fotoform { grid-column: 1 / -1; }

.foto { margin: 0; border: 1px solid var(--outline-variant); border-radius: 10px; overflow: hidden; background: var(--surface-raised); }
.foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Een foto die in het rapport komt krijgt een rand in de accentkleur: in één
   oogopslag zie je welke van de acht foto's de klant straks te zien krijgt. */
.foto.inrapport { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }

.foto figcaption { padding: 7px; display: flex; flex-direction: column; gap: 6px; }
.foto figcaption.gelezen { font-size: var(--text-xs); color: var(--on-surface-variant); line-height: 1.4; }
.fotoknoppen { display: flex; gap: 5px; flex-wrap: wrap; }


@media (max-width: 860px) {
  .fotostrook { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}


/* --- De categoriescore in de voetbalk, alleen op smalle schermen ---------- */
/* Op een telefoon staat de rechterkolom onder alle vragen: ruim duizend pixels
   verderop. Je scoort dan een hele categorie zonder te zien wat eruit komt, terwijl
   dat juist is waar een auditeur op let. De voetbalk plakt toch al onderaan en
   wordt na elk antwoord ververst — dus staat hij daar. Op een breed scherm blijft
   hij weg: daar staat hij groot in de rechterkolom. */
.voetbalk .catcijfer { display: none; }
@media (max-width: 900px) {
  .voetbalk .catcijfer {
    display: inline-flex; align-items: baseline; gap: 6px;
    font: 700 var(--text-base) var(--font);
  }
  .voetbalk .catcijfer.geen { display: none; }  /* nog niets gescoord: geen streepje tonen */
}

/* --- Het schrijfvak met het spiekbriefje ernaast ------------------------- */
/* De toelichting is de enige plek in de app waar echt geschreven wordt. Wat je
   daarvoor nodig hebt — het cijfer, wat er laag scoorde en je eigen notities —
   stond tot nu toe boven of onder het vak, of achter een uitklapper. Nu ernaast,
   zodat je het kunt lezen terwijl je typt. */
.schrijfblok { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
.schrijfblok .formulier { margin: 0; }

.spiek {
  background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--r-button);
  padding: 12px 14px;
}
.spiek .hulptekst { margin: 2px 0 10px; }
.spieklijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.spieklijst li { display: flex; gap: 8px; font-size: var(--text-xs); line-height: 1.4; }

/* Het cijfer als vast blokje vooraan, zodat de labels onder elkaar uitlijnen. */
.spieklijst .punt {
  flex-shrink: 0; width: 26px; text-align: center; border-radius: 6px;
  background: var(--surface-raised); border: 1px solid var(--outline-variant);
  font: 700 var(--text-xs) var(--font); color: var(--on-surface-variant); padding: 1px 0;
}
.spieklijst li.zwak .punt { background: var(--error); border-color: var(--error); color: var(--on-primary); }
.spieklijst .wat { color: var(--on-surface-variant); }
/* De eigen woorden van de auditeur: dat is het materiaal, dus die mogen opvallen. */
.spieklijst em { display: block; font-style: normal; color: var(--on-surface); margin-top: 2px; }

/* Op de rapportage van de ronde staat er een tabel naast het vak: de cijfers van nu
   tegen die van de vorige keer. Die heeft meer ruimte nodig dan een lijstje. */
.schrijfblok.breed { grid-template-columns: 1fr 400px; }
.spiek .tabel { margin-bottom: 10px; }
.spiek details { margin-top: 8px; }
.spiek details .hulptekst { margin: 4px 0; }
/* Het teken zegt de richting; de kleur is dezelfde als bij de cijfers. Een
   verschil van nul blijft grijs. */
.verschil { font-weight: 700; white-space: nowrap; }
.verschil.omhoog { color: var(--success); }
.verschil.omlaag { color: var(--error); }
.verschil.gelijk { color: var(--on-surface-variant); }

@media (max-width: 900px) {
  .schrijfblok, .schrijfblok.breed { grid-template-columns: 1fr; }
}

/* --- Het rapport als voorbeeld op het scherm ----------------------------- */
/* Uitklapbaar, want het is een controle en niet het werk zelf: je schrijft boven
   en kijkt hier of het klopt. Open bij het laden, zodat je het ziet zonder erom te
   vragen. */
.kaart.voorbeeld { padding: 0; overflow: hidden; }
.kaart.voorbeeld > summary {
  padding: 14px 18px; cursor: pointer; display: flex; flex-direction: column; gap: 2px;
}
.kaart.voorbeeld > summary .titel { font: 700 var(--text-base) var(--font); }
.kaart.voorbeeld > summary::-webkit-details-marker { display: none; }
.kaart.voorbeeld > .hulptekst { padding: 0 18px 12px; }
.rapportvoorbeeld {
  display: block; width: 100%; height: 78vh; min-height: 460px; border: 0;
  border-top: 1px solid var(--outline-variant); background: var(--surface);
}
@media (max-width: 720px) { .rapportvoorbeeld { height: 60vh; min-height: 320px; } }

/* --- Verbeterpunt doorgeven, vanaf elk scherm ---------------------------- */
/* Rechtsonder, boven de voetbalk van het invulscherm en boven alles heen. Dicht is
   het een knop, open een kaartje — met <details> dus, zonder javascript. */
/* Linksonder en niet rechtsonder. Rechtsonder is de gebruikelijke plek voor zo'n
   zwevende knop, maar in deze app is dat juist de hoek waar het werk zit: de
   knoppenrij van een kaart, 'volgende categorie' in de voetbalk, 'sessie afronden'.
   Daar stond hij dus steeds ergens voor.

   Links is leeg — de inhoud begint daar aan de bovenkant. Dat het minder voor de
   hand ligt weegt hier niet zwaar: de knop draagt het woord 'Verbeterpunt' en is
   geen pictogram dat je moet raden. Alleen op een telefoon valt dat woord weg en
   blijft het potlood over; daar is de balk onderin ook smaller. */
.melder { position: fixed; left: 18px; bottom: 18px; z-index: 30; }
/* Op een scherm met een voetbalk — het invulscherm — loopt de balk over de volle
   breedte, dus ook links moet de knop erboven blijven. Met :has() omdat de
   voetbalk in een ander sjabloon zit dan deze knop. */
body:has(.voetbalk) .melder { bottom: 84px; }
.melder > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-raised); border: 1.5px solid var(--outline-variant); border-radius: 999px;
  padding: 9px 15px; min-height: 44px; box-shadow: var(--elevation-soft);
  font: 600 var(--text-sm) var(--font); color: var(--on-surface-variant);
}
.melder > summary::-webkit-details-marker { display: none; }
.melder > summary:hover { border-color: var(--primary); color: var(--on-surface); }
.melder[open] > summary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

.melder .kaart {
  position: absolute; left: 0; bottom: 56px; width: min(360px, calc(100vw - 36px));
  gap: 8px;
}
/* Het wijzigformulier van een auditdag klapt open onder zijn knop; de rest van de
   dag blijft staan waar hij staat. */
.dagwijzigen { position: relative; }
.dagwijzigen > summary { list-style: none; cursor: pointer; }
.dagwijzigen > summary::-webkit-details-marker { display: none; }
.dagformulier {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 4;
  width: 320px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--elevation-pop);
}
.dagformulier .rij { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 720px) { .dagformulier { position: static; width: auto; } }

.melder .kaart { position: absolute; }
.melder .kaart .hulptekst { margin: 0 0 4px; }
/* Het kruisje rechtsboven in het blokje. 32 pixels, want op een iPad mik je met een
   vinger en niet met een muis. */
.melder-sluit {
  position: absolute; top: 8px; right: 8px; width: 32px; height: 32px;
  border: 0; background: transparent; cursor: pointer; border-radius: 8px;
  font-size: var(--text-base); line-height: 1; color: var(--on-surface-variant);
}
.melder-sluit:hover { background: var(--surface-selected); color: var(--on-surface); }
.melder .gelukt { border-top: 1px solid var(--outline-variant); padding-top: 9px; margin-top: 4px; font-size: var(--text-sm); }

/* Op een telefoon is het woord te veel; het potlood zegt genoeg. */
@media (max-width: 720px) {
  .melder { left: 12px; bottom: 76px; }
  .melder > summary .woord { display: none; }
  .melder > summary { padding: 0; width: 44px; justify-content: center; }
}

/* --- Het beheerscherm met de verbeterpunten ------------------------------ */
.catbalk.plat { position: static; border: 0; background: transparent; padding: 0 0 14px; }
.kaart.punt { gap: 10px; }
.kaart.punt.afgehandeld, .kaart.punt.vervallen { opacity: .65; }
.puntform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.puntform select.invoer { flex: 0 0 auto; width: auto; }
.puntform input.invoer { flex: 1 1 200px; }

/* Een ingevulde audit weggooien: het invulveld voor de bevestiging staat naast het
   kruisje, klein en onopvallend. Het hoort geen knop te zijn die je aantikt. */
/* Een rij aankruishokjes naast elkaar in plaats van onder elkaar. Django zet elk
   hokje in een eigen div; die worden hier op één regel gezet, zodat het vak van de
   keukenauditdag even hoog wordt als dat van de afdelingsauditdag ernaast. Drie
   hokjes onder elkaar maakten het blok twee regels langer zonder meer te zeggen. */
/* Exact het kader en de maten van een invoerveld: dezelfde achtergrond, dezelfde
   rand, dezelfde hoogte en dezelfde tekstregel. Dan lopen de twee vakken naast
   elkaar op precies dezelfde regels af. */
.hokjesrij {
  display: flex; gap: 18px; flex-wrap: nowrap; align-items: center;
  height: 42px; padding: 0 12px; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--outline-variant); border-radius: 8px;
}
.hokjesrij > div { display: inline-flex; align-items: center; }
.hokjesrij label {
  display: inline-flex; align-items: center; gap: 6px;
  font: 400 var(--text-sm) var(--font); color: var(--on-surface);
  text-transform: none; letter-spacing: 0; line-height: 1;
}
.hokjesrij input[type="checkbox"] { margin: 0; }

.weggooien { display: inline-flex; gap: 5px; align-items: center; }
.weggooien .invoer--klein { width: 9em; }

/* Het wachtwoordvak op het gebruikersscherm: dicht een knop, open een regeltje. */
.wachtwoordzetten > summary { list-style: none; cursor: pointer; }
.wachtwoordzetten > summary::-webkit-details-marker { display: none; }
.wachtwoordzetten form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.wachtwoordzetten .invoer--klein { width: 12em; }

/* --- Twee kaarten naast elkaar, en de spreiding per afdeling ------------- */
/* Even hoog, altijd. Met `align-items: start` kreeg elk vak zijn eigen hoogte en
   stonden twee kaarten naast elkaar die net niet gelijk aflopen; dat leest als een
   fout ook als het er geen is. `stretch` trekt ze gelijk, en de knop onderin blijft
   op zijn plek doordat de inhoud erboven de ruimte opvult. */
.naast-elkaar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.naast-elkaar > .kaart { display: flex; flex-direction: column; }
.naast-elkaar > .kaart > .formulier { flex: 1; display: flex; flex-direction: column; }
.naast-elkaar > .kaart > .formulier > button { margin-top: auto; }
@media (max-width: 900px) { .naast-elkaar { grid-template-columns: 1fr; } }

/* De spreiding per jaar: een baan van 0 tot 10 met daarin het blok van de laagste
   tot de hoogste afdeling, en een streep op het gemiddelde. Het jaartal staat links
   en niet onder de balk — een afdelingsnaam onder een smalle balk valt af, en dat
   was precies wat er misging. */
.banden { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.band { display: grid; grid-template-columns: 3.2em 1fr 11em; gap: 12px; align-items: center; }
.band .jaar { font: 600 var(--text-xs) var(--font-mono); color: var(--on-surface-variant); }
.band .baan { position: relative; height: 16px; border-radius: 8px; background: var(--surface-selected); }
.band .blok { position: absolute; top: 0; bottom: 0; background: var(--primary); border-radius: 8px; opacity: .85; }
.band .midden { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--on-surface); }
.band .waarden { font: 600 var(--text-xs) var(--font); color: var(--on-surface-variant); }
.band .waarden .hulptekst { display: block; }
@media (max-width: 720px) {
  .band { grid-template-columns: 3em 1fr; }
  .band .waarden { grid-column: 2; }
}


/* --- Een auditronde op het dossier --------------------------------------
   Alleen dit jaar staat open; eerdere jaren zijn een regel die je openklikt. De
   samenvatting is zelf al het antwoord op 'hoe ging dat jaar': jaartal, stand,
   hoeveel afdelingen, en het cijfer. */
.ronderegel + .ronderegel { border-top: 1px solid var(--outline-variant); }
.ronderegel > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0; font: 600 var(--text-base) var(--font); color: var(--on-surface);
}
.ronderegel > summary::-webkit-details-marker { display: none; }
.ronderegel > summary::before {
  content: "\203A"; display: inline-block; width: 12px;
  color: var(--on-surface-variant); transition: transform .15s;
}
.ronderegel[open] > summary::before { transform: rotate(90deg); }
.ronderegel > summary:hover { text-decoration: underline; text-decoration-color: var(--primary); }
.ronderegel > summary .jaar { font-size: var(--text-lg); }
.ronderegel > summary .groot-getal { margin-left: auto; }
/* Onder de samenvatting staat alleen nog wat er niet in past: de vragenlijst, hoe
   ver het is, en de knoppen naar het rapport. Jaartal, stand en cijfer staan al in
   de regel erboven en horen er niet twee keer. */
.ronderegel .rondekop { margin-bottom: 10px; padding-left: 26px; }

/* --- De schuifgrendel ----------------------------------------------------
   Een knop met een grendel ervoor: je schuift hem opzij en pas dán kan de knop
   ingedrukt worden. Hij staat er wit en uit; zodra de greep rechts is kleurt hij
   oranje. De beweging geeft hem vrij, de druk voert hem uit — bewuster dan een
   venster wegklikken en op een iPad prettiger dan een naam overtypen.

   Zonder javascript blijft het overtypen staan; het script in base.html zet de greep
   er overheen. */
.schuifgrendel { display: inline-flex; align-self: flex-start; margin: 0; }
.grendel { position: relative; width: 96px; height: 32px; }
/* Aan beide kanten ruimte voor de greep: links waar hij begint, rechts waar hij
   eindigt. Anders dekt hij het woord half af zodra je hem hebt verschoven. */
.grendel .grendelknop {
  position: absolute; inset: 0; width: 100%; min-height: 0;
  border-radius: 999px; padding: 0 26px;
  font: 700 var(--text-xs) var(--font); letter-spacing: 0;
  background: var(--surface-raised); color: var(--on-surface-variant);
  border: 1.5px solid var(--outline-variant); cursor: not-allowed;
  transition: background .15s, color .15s, border-color .15s;
}
/* Vrijgegeven: nu pas oranje, en nu pas in te drukken. */
.grendel .grendelknop:enabled {
  background: var(--primary); color: var(--on-primary);
  border-color: var(--primary); cursor: pointer;
}
.grendel input[type="range"] {
  position: absolute; inset: 0; z-index: 1;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 100%; margin: 0; background: transparent; cursor: grab;
}
.grendel input[type="range"]:active { cursor: grabbing; }
.grendel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--primary); border: 2px solid var(--surface-raised);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.grendel input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--primary); border: 2px solid var(--surface-raised);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
/* Eenmaal vrijgegeven vangt de greep geen kliks meer af: dan is de hele pil de knop
   en werkt een tik op het oranje. Het script zet dat; een tik op de greep zelf
   schuift hem weer dicht. */
.grendel.vrij input[type="range"]::-webkit-slider-thumb { background: var(--surface-raised); border-color: var(--primary); }
.grendel.vrij input[type="range"]::-moz-range-thumb { background: var(--surface-raised); border-color: var(--primary); }

.overtypen { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.overtypen .hulptekst { text-transform: none; letter-spacing: 0; }
/* `display` uit een regel wint van het hidden-attribuut; zonder deze regel blijft
   het overtypveld staan naast de greep die het vervangt. */
.overtypen[hidden], .grendel[hidden] { display: none; }
.overtypen .hulptekst { text-transform: none; letter-spacing: 0; }

/* --- Aanraken, opslaan en telefoon ---------------------------------------- */
/* Onderaan het bestand: deze regels moeten winnen van de gewone maten hierboven. */
@media (pointer: coarse) {
  /* n.v.t. staat vlak naast de 3; op een vinger is 20px een misser die fout scoort. */
  /* Alleen de n.v.t.-knop naast de score: niet de vraag die op n.v.t. staat (.vraagregel.op-nvt)
     en niet de oordeelknop n.v.t. in de keuken. */
  button.nvt:not(.scoreknop), span.nvt { min-height: 44px; padding: 0 10px; margin-top: 5px; }
}

/* De foutbalk blijft in beeld, ook wie bij vraag 30 zit: onder de topbalk vast. */
/* Onderaan en vast, boven de voetbalk: bovenin lag hij over de categoriebalk, en dan
   kon je tijdens een hapering niet van categorie wisselen. */
#verbinding { position: fixed; left: 16px; right: 16px; bottom: 84px; z-index: 20; margin: 0; }
#verbinding .knop { margin-left: 8px; }
/* Wat niet is opgeslagen, blijft rood omrand tot het wél is opgeslagen. */
.niet-opgeslagen, .vraagregel:has(.niet-opgeslagen) {
  outline: 2px solid var(--error); outline-offset: 2px; border-radius: 8px;
}


/* --- Het dossier in de kleur van de klant --------------------------------
   Groen bij het Groene Hart, navy bij Frisius; wie geen huisstijlpakket heeft houdt
   de Syndle-kleuren. Alleen wat iets aanwijst kleurt mee: de staafjes van het
   verloop, de balk van de spreiding, het actieve tabblad, de streep onder een link.

   Níét de cijfers. Groen, oranje en rood betekenen daar 'goed', 'let op' en 'zwak',
   en die betekenis mag niet per klant verschuiven — dan leest een 6,2 bij de ene
   klant anders dan bij de andere.

   En niet de app-schil eromheen: de balk, het logo en de knoppen blijven Syndle. */
.huiskleur .catpil.actief { background: var(--huis); border-color: var(--huis); }
.huiskleur .catpil:hover { border-color: var(--huis); color: var(--huis-donker); }
.huiskleur .trend .staaf { background: var(--huis); opacity: .38; }
.huiskleur .trend .staaf.nu { opacity: .95; }
.huiskleur .band .blok { background: var(--huis); }
.huiskleur .link { text-decoration-color: color-mix(in srgb, var(--huis) 45%, transparent); }
.huiskleur .link:hover, .huiskleur .link:focus-visible { color: var(--huis-donker); }
.huiskleur .kaart h2 { color: var(--huis-donker); } /* huisstijl C6: kleur van de klant, zie CLAUDE.md "Het dossier draagt de kleur van de klant" */
/* Een streep onder de titel van het dossier, in de kleur van het huis: genoeg om te
   zien bij wie je bent, weinig genoeg om niet te schreeuwen. */
.huiskleur > .kop-rij h1 { border-bottom: 3px solid var(--huis); padding-bottom: 6px; display: inline-block; }