/* 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; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-ui);
  background: var(--linen);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.15; }

/* --- Aanraakgedrag (prototype: .pbtn, .pcard, .navi) -------------------- */
.pbtn, .knop, .scoreknop, .tab, .catpil, .nvt {
  cursor: pointer; user-select: none;
  transition: transform .1s, box-shadow .15s, background .15s, border-color .15s, color .15s;
}
.pbtn:active, .knop:active { transform: translateY(1px); }
:focus-visible { outline: 3px solid var(--sp-orange-diep); outline-offset: 2px; border-radius: 6px; }

/* 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;
}
.sprongkoppeling { position: absolute; left: -9999px; }
.sprongkoppeling:focus {
  left: 8px; top: 8px; z-index: 99; background: var(--surface); color: var(--ink);
  padding: 10px 16px; border-radius: var(--r-sm); box-shadow: var(--schaduw-kaart);
}

/* 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: 19px; }
  .schaal { gap: 8px; }
  .catpil { min-height: 44px; }
}

/* --- Topbalk ------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 9;
  height: var(--topbar-hoogte);
  display: flex; align-items: center; gap: 16px;
  padding: 0 var(--inhoud-pad);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
/* Het echte SYNDLE-logo uit het stijlboek; de huisstijl verbiedt herkleuren,
   dus geen filter of gekleurde ondergrond eronder. Alleen "Audit" is tekst. */
.merk {
  display: flex; align-items: center; gap: 7px; flex-shrink: 0;
  text-decoration: none; color: var(--ink); line-height: 1;
}
.merk img { height: 20px; width: auto; display: block; }
.merk span {
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  letter-spacing: -.03em;
}
.merk.groot { gap: 9px; }
.merk.groot img { height: 28px; }
.merk.groot span { font-size: 23px; }
.scheiding { width: 1px; height: 26px; background: var(--line); flex-shrink: 0; }

.tabs { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  border: 0; background: transparent; text-decoration: none; white-space: nowrap;
  font: 500 13px var(--font-ui); color: var(--ink-mute);
  padding: 6px 12px; border-radius: 8px;
}
.tab:hover { color: var(--ink); }
.tab.actief { background: var(--linen-deep); color: var(--ink); font-weight: 700; }
.tab.uit { color: var(--line); pointer-events: none; }

.wie { display: flex; align-items: center; gap: 12px; }
.wie .naam { font-size: 13px; font-weight: 600; line-height: 1.2; }
.wie .rol { font-size: 11.5px; color: var(--ink-mute); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(235, 91, 38, .14); color: var(--sp-orange-diep);
  font: 700 12px var(--font-ui);
}

/* --- Inhoud ------------------------------------------------------------- */
main { max-width: var(--inhoud-max); margin: 0 auto; padding: 26px var(--inhoud-pad) 60px; }
h1 { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
h2 { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 0 0 10px; }
h3 { font-family: var(--font-display); font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.onderkop { margin: 6px 0 22px; color: var(--ink-mute); font-size: 13.5px; max-width: 68ch; }
.label {
  font: 800 11px var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute); display: block;
}

/* --- Kaarten (prototype: Card) ------------------------------------------ */
.kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.kaart {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
.kaart .titel { font-weight: 700; font-size: 15px; }
.kaart .tekst { font-size: 13px; color: var(--ink-mute); line-height: 1.5; flex: 1; }
.kaart.klikbaar { text-decoration: none; color: inherit; cursor: pointer; }
.kaart.klikbaar:hover { box-shadow: var(--schaduw-kaart); border-color: var(--ink-mute); transform: translateY(-2px); }
section.kaart { margin-bottom: 16px; }
section.kaart h2 + .hint { margin-top: -4px; }
.kaart.gedimd { opacity: .62; }
.kaartvoet { display: flex; align-items: center; gap: 9px; padding-top: 12px; border-top: 1px solid var(--line-soft); }

/* --- Pills en status ---------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  border-radius: 999px; font: 600 12px var(--font-ui); padding: 4px 11px;
  background: var(--linen-deep); color: var(--ink-soft);
}
.pill .stip { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Een rij pillen 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 pil hoog is. */
.pillen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Een pil die ergens op klikt is een <button>, en die krijgt van de browser een
   eigen rand, achtergrond en lettertype. Zonder deze reset staan een klikbare en
   een gewone pil naast elkaar in twee verschillende vormen. */
button.pill {
  border: 0; cursor: pointer; font: 600 12px var(--font-ui);
  line-height: inherit; -webkit-appearance: none; appearance: none;
}
button.pill:hover { filter: brightness(.95); }
/* Een ja/nee-schakelaar houdt één breedte: anders is 'ja' twee letters breed en
   'nee' drie, en verspringt de kolom per regel. */
.pill.schakelaar { min-width: 3.4em; justify-content: center; }
/* De ziekenhuizen van een gebruiker: pillen boven elkaar of 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; }
button.pill:focus-visible { outline: 2px solid var(--sp-orange-diep); outline-offset: 2px; }
.pill.goed { background: rgba(47, 125, 79, .1); color: var(--goed); }
.pill.bezig { background: rgba(235, 91, 38, .12); color: var(--sp-orange); }
.pill.later, .pill.open { background: var(--linen-deep); color: var(--ink-mute); }
.pill.let { background: rgba(201, 138, 26, .13); color: var(--matig); }
.pill.zwak { background: rgba(192, 57, 43, .1); color: var(--zwak); }

/* --- Knoppen (prototype: Btn) ------------------------------------------- */
.knop {
  border: none; border-radius: 10px; background: var(--ink); color: #fff;
  font: 700 13.5px var(--font-ui); padding: 10px 18px; min-height: 40px;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; white-space: nowrap;
}
.knop:hover { filter: brightness(1.06); }
.knop.oranje { background: var(--sp-orange-diep); }
.knop.licht { background: transparent; color: var(--ink-soft); border: 1.5px solid var(--line); }
.knop.zacht { background: var(--linen-deep); color: var(--ink); }
.knop.klein { min-height: 32px; padding: 8px 14px; font-size: 12.5px; }
.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 .veld { min-width: 0; }
.tabel.raster .veld.tijd { width: 7.5em; }
.tabel.raster .veld.aantal { width: 5.5em; }
.tabel.raster .veld.tijdvak { width: 10em; }
@media (pointer: coarse) {
  .tabel.raster .veld { min-height: 44px; font-size: 15px; }
}
/* Een samengevoegde bankvraag: blijft leesbaar, maar niet meer in gebruik. */
tr.vervallen td { color: var(--ink-mute); }
/* 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 { padding: 0; width: 32px; min-width: 32px; font-size: 15px; line-height: 1; }
@media (pointer: coarse) {
  .knop.icoon { width: 44px; min-width: 44px; min-height: 44px; font-size: 17px; }
}
.knoppen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* --- Velden ------------------------------------------------------------- */
.veld {
  font: 400 13.5px var(--font-ui); color: var(--ink); background: var(--linen);
  border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px 12px;
  outline: none; width: 100%; min-height: 42px;
  transition: border-color .15s, background .15s;
}
.veld:focus { border-color: var(--sp-orange); background: #fff; }
.veld::placeholder { color: var(--ink-mute); }
.veld.smal { width: auto; min-width: 90px; }
select.veld { min-height: 40px; }

.formulier { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.rij { display: flex; flex-direction: column; gap: 5px; }
.formulier label, .inlog label { font: 800 11px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.balk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.balk .veld { width: auto; min-width: 200px; }
.balk label { font: 600 12.5px var(--font-ui); color: var(--ink-mute); }
.inline { display: inline; }

.melding {
  border-radius: var(--r-md); padding: 11px 14px; font-size: 13.5px; margin-bottom: 14px;
  background: #FDEEDE; color: #9A4A12;
}
.fout { color: var(--zwak); font-size: 12.5px; }

/* --- 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; }

/* --- 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 {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  font-size: 13.5px; 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 th {
  text-align: left; font: 800 11px var(--font-ui); text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-mute); padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}
.tabel td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel tbody tr:hover { background: var(--linen); }
.tabel.compact { border: 0; background: transparent; margin-bottom: 10px; }
/* Compact betekent: geen kader en geen marge aan de buitenrand — niet dat de
   kolommen tegen elkaar aan mogen. Zonder ruimte ertussen plakt een vraagcode aan
   de vraag. De laatste kolom houdt zijn rechterrand vrij, want die staat rechts. */
.tabel.compact td, .tabel.compact th { padding: 7px 18px 7px 0; }
.tabel.compact td:last-child, .tabel.compact th:last-child { padding-right: 0; }
.tabel.compact tbody tr:hover { background: transparent; }
.tabel .rechts { text-align: right; white-space: nowrap; }
.tabel .code, .code { font: 600 12px var(--font-mono); color: var(--ink-soft); 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; }
.leeg { color: var(--ink-mute); font-style: italic; }

.link { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--sp-orange); }
.link:hover { color: var(--sp-orange); }
.bij { color: var(--ink-mute); font-size: 12.5px; }
.hint { color: var(--ink-mute); font-size: 12.5px; line-height: 1.5; }
.lijst { margin: 0; padding-left: 18px; font-size: 13.5px; 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-groot {
  font-family: var(--font-display); font-size: 40px; font-weight: 800;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1;
}
.cijfer-xl { font-size: 46px; }
.cijfer { font-variant-numeric: tabular-nums; font-weight: 800; }
.cijfer.hoog, .cijfer-groot.hoog { color: var(--goed); }
.cijfer.mid, .cijfer-groot.mid { color: var(--matig); }
.cijfer.laag, .cijfer-groot.laag { color: var(--zwak); }
.cijfer.geen, .cijfer-groot.geen { color: var(--ink-mute); }

.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: 800 14px var(--font-ui); color: var(--ink);
}

.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(--line); 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(--linen-deep); border-radius: 3px 3px 0 0; }
.staafjes .nu { width: 16px; border-radius: 4px 4px 0 0; position: relative; background: var(--ink-mute); }
.staafjes .nu.hoog { background: var(--goed); }
.staafjes .nu.mid { background: var(--matig); }
.staafjes .nu.laag { background: var(--zwak); }
.staafjes .nu .waarde {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  font: 800 10.5px var(--font-ui); font-variant-numeric: tabular-nums; color: inherit;
}
.staafjes .nu.hoog .waarde { color: var(--goed); }
.staafjes .nu.mid .waarde { color: var(--matig); }
.staafjes .nu.laag .waarde { color: var(--zwak); }
.staafjes .kolom { min-width: 0; }
.staafjes .kort {
  font: 600 10px var(--font-mono); color: var(--ink-mute); 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(--topbar-hoogte)); }
.catbalk {
  display: flex; gap: 8px; padding: 14px var(--inhoud-pad);
  background: var(--surface); border-bottom: 1px solid var(--line);
  overflow-x: auto; flex-shrink: 0; position: sticky; top: var(--topbar-hoogte); z-index: 8;
}
.catpil {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-mute);
  border-radius: 999px; padding: 7px 14px; font: 600 12.5px var(--font-ui);
  text-decoration: none; min-height: 38px;
}
.catpil.af { background: var(--linen-deep); color: var(--ink); }
.catpil.actief { background: var(--sp-orange-diep); border-color: var(--sp-orange-diep); color: #fff; }

.werkvlak { flex: 1; display: flex; gap: 22px; padding: 22px var(--inhoud-pad); 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); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 13px 16px; transition: border-color .15s, background .15s;
}
.vraagregel.open { border: 1.5px solid var(--sp-orange); }
.vraagregel.nvt { background: var(--linen); opacity: .72; }
.vraagregel.zojuist { animation: bewaard .9s ease-out; }
@keyframes bewaard { from { background: #FDEEDE; } to { background: var(--surface); } }
.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 12px var(--font-mono); color: var(--ink-mute);
  margin-top: 11px; min-width: 18px;
}
.vraagtekst { flex: 1; font-size: 13.5px; line-height: 1.45; margin-top: 8px; }
.vraagvoet { display: flex; gap: 8px; margin-top: 11px; margin-left: 32px; align-items: center; }
.vraagvoet .veld { min-height: 38px; font-size: 13px; }

/* 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(--line);
  background: var(--surface); color: var(--ink-soft);
  font: 700 17px var(--font-ui); display: inline-flex; align-items: center; justify-content: center;
}
.scoreknop:hover { border-color: var(--ink-mute); }
.scoreknop:active { transform: scale(.92); }
.scoreknop.gekozen { background: var(--sp-orange-diep); border: 2px solid var(--sp-orange-diep); color: #fff; }
.nvt {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 13px;
  font: 500 11.5px var(--font-ui); color: var(--ink-mute); white-space: nowrap;
  background: none; border: 0;
}
.nvt .vakje {
  width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px;
}
.nvt.aan { color: var(--ink); font-weight: 700; }
.nvt.aan .vakje { background: var(--ink); border-color: var(--ink); }
.opgeslagen { font-size: 12px; color: var(--ink-mute); }
.toelichting-gelezen { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-soft); }

/* 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(--inhoud-pad);
  background: var(--surface); border-top: 1px solid var(--line);
}
.voetbalk .stand { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--ink-mute); }
.meter { width: 160px; height: 6px; border-radius: 3px; background: var(--linen-deep); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--spectrum); transition: width .4s; }

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

/* --- Keukenoordelen ------------------------------------------------------ */
.scoreknop.oordeel { width: auto; min-width: 0; padding: 0 14px; font-size: 13px; }
.scoreknop.oordeel.gekozen.goed { background: var(--goed); border-color: var(--goed); }
.scoreknop.oordeel.gekozen.aandachtspunt { background: var(--matig); border-color: var(--matig); color: var(--ink); }
.scoreknop.oordeel.gekozen.afwijking { background: var(--zwak); border-color: var(--zwak); }
.scoreknop.oordeel.gekozen.nvt { background: var(--ink-mute); border-color: var(--ink-mute); }
.raster .veld { min-width: 120px; padding: 8px 10px; font-size: 13px; min-height: 38px; }
.voorstel {
  white-space: pre-wrap; font: 400 13px var(--font-ui); color: var(--ink-soft);
  background: var(--linen); border-radius: var(--r-sm); padding: 10px 12px; margin: 8px 0;
}

/* --- Rapport ------------------------------------------------------------- */
.cijferblok { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.delta { font: 700 12px var(--font-ui); border-radius: 999px; padding: 3px 9px; }
.delta.op { color: var(--goed); background: rgba(47, 125, 79, .1); }
.delta.neer { color: var(--zwak); background: rgba(192, 57, 43, .1); }
.delta.gelijk { color: var(--ink-mute); background: var(--linen-deep); }
td.cijfer { font-variant-numeric: tabular-nums; font-weight: 700; }
td.cijfer.laag { background: rgba(192, 57, 43, .13); color: var(--zwak); }
td.cijfer.hoog { background: rgba(47, 125, 79, .12); color: var(--goed); }
td.cijfer.mid { background: transparent; }
td.cijfer.geen { color: var(--ink-mute); }
.totaalrij td { border-top: 2px solid var(--line); font-weight: 700; }

/* --- Snel inloggen (alleen ontwikkelomgeving) ---------------------------- */
.snellogin { width: 100%; max-width: 380px; margin-top: 14px; gap: 8px; }
.snellogin .hint { 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 .wie .bij { font-weight: 400; }
.snelknop .code { font: 600 12px var(--font-mono); color: var(--ink-mute); }

/* --- 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; }
  .vraagkop { flex-wrap: wrap; }
  .schaal { width: 100%; }
  .scoreknop { flex: 1; }
  .vraagvoet { margin-left: 0; }
  .voetbalk { height: auto; padding: 12px var(--inhoud-pad); }
  .meter { width: 90px; }
}

/* --- 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 .cijfer-groot { font-size: 34px; color: var(--ink); }
.kaart.stat.let-op .cijfer-groot { color: var(--matig); }

/* --- Rapportscherm ------------------------------------------------------- */
.kaart.eindcijfer { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.kaart.eindcijfer .hint { max-width: 46ch; }
.catstand { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.kaart.tedoen { border-left: 3px solid var(--sp-orange); }
.tabel td.punt { font-variant-numeric: tabular-nums; width: 56px; color: var(--ink-mute); }
.tabel td.punt.zwak { color: var(--zwak); 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 - 260px); min-height: 420px; border: 0; }