/* Wijnkelder — huisstijl volgens SPEC.md (september 2026).
   Eén letterfamilie voor de hele app, geen serif. Kleuren uit de officiële
   Wit & Rood huisstijl.

   Geen stijlregels in de html zelf: de Content-Security-Policy staat die niet
   toe. Alles wat varieert (breedte van de drinkvensterbalk, kleur van de
   streep) loopt daarom via een klasse. */

:root {
  /* Merkkleuren */
  --goud: #C59012;
  --goud-licht: #DBA31C;
  --inkt: #21272D;
  --inkt-zacht: #2E353C;
  --zand: #EFECD9;
  --zand-donker: #E4E0CB;
  --wit: #FFFFFF;
  --lijn: #DFDBC4;
  --hairline: #EFECDF;
  /* Gemeten op de zandkleur: #8A8F94 haalt ongeveer 2,6 op 1 en dat is ver
     onder de norm van 4,5. De app wordt op een telefoon gebruikt, in een
     kelder, bij slecht licht. Secundair is daarom #5C6166 en tertiair niet
     lichter dan #767B80. */
  --grijs: #5C6166;
  --grijs-licht: #767B80;

  /* Datakleuren voor de wijnsoorten */
  --bordeaux: #7A1F2E;
  --champagne: #D9C083;
  --rose: #D08B93;
  --amber: #8A5A22;
  --onbekend: #B7B2A4;   /* soort niet bekend — nooit een kleur gokken */

  /* Roc Grotesk is de huisstijlletter en komt uit de Adobe Fonts-kit.
     Werkt die kit niet, dan neemt Hanken Grotesk van Google Fonts het over. */
  --letter: 'roc-grotesk', 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --kolom: 430px;
  /* Onderbalk met de tabs. Gemeten in de browser, niet geschat: 101px sinds
     ontwerp A er een iconenregel bij kreeg. Zonder de veilige zone onderaan
     de iPhone — die telt elke plek er zelf bij op, anders wordt hij dubbel
     geteld. */
  --balkhoogte: 101px;
  /* Vaste merkbalk bovenaan: 18px boven + 46px schild + 16px onder + de rand. */
  --merkbalk: 81px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Het hidden-attribuut hoort altijd te winnen.

   Zonder deze regel verliest het van elke klasse met een eigen 'display'. Dat
   ging mis bij het scanscherm: .bezig heeft display:flex, dus het donkere blok
   met "Etiket lezen" stond er ook als er niets liep. Wie een element verbergt
   met el.hidden mag ervan uitgaan dat het weg is. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  background: var(--zand-donker);
  color: var(--inkt-zacht);
  font-family: var(--letter);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}


input, button, textarea, select { font: inherit; }

a { color: inherit; text-decoration: none; }

/* ---------- Merkbalk ---------- */

.merkbalk {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: var(--merkbalk);
  padding: 18px 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--zand);
  border-bottom: 1px solid var(--lijn);
}

/* Het schild is hoger dan breed (150,8 × 191,21). Bij 46px hoog hoort dus
   36px breed; een vierkant vak zou er lucht naast zetten. */
.merkbalk__schild { width: 36px; height: 46px; display: block; }

.merkbalk__naam {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--inkt);
}

/* ---------- Schermopbouw ---------- */

/* Ruimte voor de vaste merkbalk, maar alleen op schermen die hem hebben.
   Het inlogscherm heeft geen balk en begint dus gewoon bovenaan. */
body.met-merkbalk { padding-top: var(--merkbalk); }
body.met-merkbalk .scherm,
body.met-merkbalk .detail {
  min-height: calc(100vh - var(--merkbalk));
  min-height: calc(100dvh - var(--merkbalk));
}

.scherm {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 26px;
  max-width: var(--kolom);
  margin: 0 auto;
  background: var(--zand);
}


.scherm--gecentreerd { justify-content: center; padding: 40px 32px; }
/* Geen +26px meer: dat was de ruimte voor de cameracirkel die boven de balk
   uitstak. Die overhang is er in ontwerp A niet meer. De veilige zone onderaan
   de iPhone komt er wel bij, want de balk zelf reserveert die ook. */
.scherm--met-balk {
  padding-bottom: calc(var(--balkhoogte) + env(safe-area-inset-bottom, 0px));
}

/* Krapper opgezet, voor de schermen waar je moet kunnen zien dat er iets
   gebeurt zonder eerst te scrollen: scannen en een wijn op naam zoeken.
   Op een telefoon staat daarmee de voortgang meteen in beeld. */
.scherm--compact { padding-top: 14px; }
.scherm--compact .kop { font-size: 22px; }
.scherm--compact .schermkop { margin-bottom: 14px; }
.scherm--compact .knoprij { margin-top: 14px; gap: 10px; }
.scherm--compact .melding { margin-top: 14px; }
.scherm--compact .velden { gap: 12px; }
.scherm--compact .meta { margin-top: 14px; display: block; }
.scherm--compact .detailkop__terug { margin-bottom: 10px; }

/* ---------- Inlogscherm en de andere schermen zonder merkbalk ---------- */

.inlogscherm {
  position: relative;
  overflow: hidden;
  justify-content: center;
  padding: 40px 28px;
}

.merk {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin-bottom: 36px;
}

.merk__schild { width: 66px; height: 66px; display: block; }

.merk__naam {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--inkt);
}

.merk__titel {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--inkt);
}

.merk__onderschrift { font-size: 15px; color: var(--grijs); }

/* Het stijlelement: de vier bogen, rechtsonder, half buiten beeld. */
.stijlelement {
  position: absolute;
  right: -110px;
  bottom: -60px;
  width: 260px;
  height: auto;
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

/* Op het inlogscherm staan de velden links uitgelijnd onder het gecentreerde
   merkblok. */
.inlogscherm form, .inlogscherm .velden, .inlogscherm .knoprij { text-align: left; }

/* ---------- Koppen ---------- */

.kop {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--inkt);
  margin: 0;
  line-height: 1.15;
}

.kop--klein {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--inkt);
  margin: 0 0 10px;
}

.kop--afstand { margin-top: 28px; }
.inleiding { font-size: 14px; color: var(--grijs); margin: 8px 0 20px; }

.schermkop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}

/* Gewone schrijfwijze, 15px. Kleine hoofdletters met ruime letterafstand zijn
   mooi op een ontwerp en slecht op een telefoon in een kelder; bovendien
   draagt de waarde de betekenis al. "16–18 °C" heeft geen kopje boven zich
   nodig. */
.label {
  font-size: 15px;
  font-weight: 600;
  color: var(--inkt);
}

.meta { font-size: 13px; color: var(--grijs); }
.onderstreept { text-decoration: underline; }

/* ---------- Formulieren ---------- */

.velden { display: flex; flex-direction: column; gap: 14px; }
.velden--twee { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.veld { display: flex; flex-direction: column; gap: 6px; }

/* Bij een invoerveld hoort een leesbaar label, geen kapitaaltjes. Wie hier
   staat is iets aan het invullen en moet weten wát. */
.veld__label {
  font-size: 15px;
  font-weight: 500;
  color: var(--inkt);
}

.veld__hulp { font-size: 13px; color: var(--grijs); margin: 0; }


.veld__invoer {
  width: 100%;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 12px;
  padding: 13px 14px;
  font-size: 16px;
  color: var(--inkt);
  outline: none;
  min-height: 44px;
}
.veld__invoer:focus { border-color: var(--goud); }
textarea.veld__invoer { line-height: 1.5; resize: vertical; }

/* ---------- Knoppen ---------- */

/* Actieknoppen zijn rechthoekig met een lichte ronding, zoals op
   witenrood.nl. Pilvormig zijn alleen de filterchips en de plus- en
   minknoppen. */
.knop {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  min-height: 44px;
}

.knop--primair { background: var(--goud); color: var(--wit); }
.knop--primair:hover { background: var(--goud-licht); }
.knop--secundair { background: var(--inkt); color: var(--wit); }
.knop--rand { background: transparent; border: 1px solid var(--lijn); color: var(--inkt); }
.knop--smal { padding: 12px 16px; font-size: 14px; font-weight: 500; }
.knop--auto { width: auto; }
.knop--bezig { opacity: 0.7; cursor: progress; }

.knoprij { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }

.tekstknop {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  color: var(--grijs);
  font-size: 15px;
  padding: 12px;
  min-height: 44px;
  cursor: pointer;
  text-align: center;
}

.hulpregel {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--grijs-licht);
}
.hulpregel a.accent { color: var(--goud); }

.knop-stippel {
  display: block;
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed var(--lijn);
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--inkt);
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  background: none;
  width: 100%;
}
.knop-stippel::-webkit-details-marker { display: none; }
.uitklap[open] .knop-stippel { border-style: solid; margin-bottom: 14px; }
.uitklap .veld { margin-bottom: 12px; }

/* ---------- Meldingen ---------- */

.melding { margin-top: 16px; padding: 12px 14px; border-radius: 12px; font-size: 14px; }

.melding--fout {
  background: #F8EDEE;
  border: 1px solid #E4C7CB;
  color: var(--bordeaux);
}
.melding--klaar { background: var(--wit); border: 1px solid var(--lijn); color: var(--inkt-zacht); }
.meldingen { max-width: var(--kolom); margin: 0 auto; padding: 14px 20px 0; background: var(--zand); }
.meldingen .melding { margin-top: 0; }

.foutlijst { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--bordeaux); }

/* Verbinding weg. Staat onder de merkbalk en schuift de inhoud niet weg. */
.verbindingsmelding {
  position: fixed;
  top: var(--merkbalk);
  left: 0;
  right: 0;
  z-index: 9;
  margin: 0;
  padding: 10px 20px;
  background: var(--bordeaux);
  color: var(--wit);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}
body:not(.met-merkbalk) .verbindingsmelding { top: 0; }

.voetnoot { margin-top: auto; padding-top: 40px; font-size: 11px; line-height: 1.6; color: var(--grijs); }
.voetnoot a { text-decoration: underline; }

.knop-in-tekst {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Zoeken en filteren ---------- */

.zoekbalk { margin-bottom: 12px; }

.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 12px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }

/* Minstens 44 bij 44: kleiner is met een duim niet te raken. */
.chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 14px;
  font-weight: 500;
  color: var(--inkt);
  background: var(--wit);
  white-space: nowrap;
}
.chip--actief { background: var(--inkt); border-color: var(--inkt); color: var(--zand); }

/* ---------- Wijnkaarten ---------- */

.lijst { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

/* Naar links slepen legt de knop bloot die eronder ligt: een fles openen.
   Dat was verwijderen — zie static/js/voorraad.js voor waarom dat is
   omgedraaid. */
.rij { position: relative; border-radius: 14px; overflow: hidden; }

.rij__openen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 104px;
  border: 0;
  background: var(--goud);
  color: var(--wit);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.rij__openen:disabled { background: var(--onbekend); cursor: default; }

/* Weggooien is dezelfde beweging als openen, maar het is een andere handeling
   en die hoort er anders uit te zien. Goud is wat je vaak doet, bordeaux is
   wat niet terug te draaien is. */
.rij__weggooien { background: var(--bordeaux); }

/* Een wijn waarvan niets meer ligt blijft staan, maar gedimd. Hij verdwijnt
   niet vanzelf: dat je hem ooit had is ook informatie. */
.rij--leeg .wijnkaart { opacity: 0.55; }

.rij .wijnkaart {
  position: relative;
  transition: transform 0.18s ease;
  will-change: transform;
}

.rij--open .wijnkaart { transform: translateX(-104px); }

@media (prefers-reduced-motion: reduce) {
  .rij .wijnkaart { transition: none; }
}

.wijnkaart {
  display: flex;
  align-items: stretch;
  background: var(--wit);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(26, 24, 21, 0.06);
  min-height: 76px;
}

/* Zonder bekende soort de kleur 'onbekend', geen gegokte wijnkleur. */
.wijnkaart__streep { width: 5px; flex: 0 0 5px; background: var(--onbekend); }
.streep--wit { background: var(--goud); }
.streep--rood { background: var(--bordeaux); }
.streep--rose { background: var(--rose); }
.streep--bubbels { background: var(--champagne); }
.streep--versterkt { background: var(--amber); }


.wijnkaart__tekst { flex: 1; padding: 12px 10px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.wijnkaart__naam {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--inkt);
}

/* Het huis op een eigen regel. Het stond achter de naam, en dan wordt de
   titelregel bij een lange naam een blok tekst waar je doorheen moet lezen. */
.wijnkaart__huis { font-size: 14px; font-weight: 400; color: var(--grijs); }

.wijnkaart__bezig {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--goud);
}

.wijnkaart__meta {
  font-size: 12px;
  color: var(--grijs-licht);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wijnkaart__aantal {
  align-self: center;
  margin-right: 12px;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 999px;
  background: var(--inkt);
  color: var(--zand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
}

/* ---------- Lege staat ---------- */

.leeg {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
}
.leeg__tekst {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--inkt);
  line-height: 1.35;
  margin: 0;
}
.leeg .knop { width: auto; min-width: 200px; }

/* ---------- Detailscherm ---------- */

.detail {
  max-width: var(--kolom);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--zand);
}

.detailkop { padding: 20px 20px 22px; background: var(--inkt); color: var(--zand); }
.detailkop__terug { display: inline-block; font-size: 13px; color: var(--grijs-licht); margin-bottom: 16px; }
.detailkop__naam {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
}
.detailkop__huis { font-size: 13px; color: #C7C2B6; margin: 6px 0 0; }
.detailkop__meta { font-size: 12px; color: var(--grijs-licht); margin: 8px 0 0; }

/* Herkomst als pad, van breed naar smal. Het laatste en meest specifieke
   niveau licht op; wat ontbreekt valt weg, en dat gat is bedoeld. */
.herkomst {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--grijs-licht);
}
.herkomst__deel { color: var(--grijs-licht); }
.herkomst__deel--nu { color: var(--zand); }
.herkomst__streep { color: #565E66; margin: 0 6px; }

/* ---------- Kerngegevens ---------- */

.tegels--kern { grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }

.kerntegel {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  background: var(--wit);
  border: 1px solid var(--zand-donker);
  border-radius: 12px;
}

/* Het label leest als een gewoon woord, niet als kapitalen. Kapitalen met
   letterafstand zagen er strak uit maar lazen trager, en dit kaartje is er
   juist om in één blik te pakken. */
.kerntegel__label {
  font-size: 13px;
  font-weight: 400;
  color: var(--grijs);
}

.kerntegel__waarde {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--inkt);
}

.kerntegel__eenheid {
  font-size: 13px;
  font-weight: 400;
  color: var(--grijs);
  margin-left: 3px;
}

/* Vinificatie als losse pillen. Geen iconen: die zeggen hier niets.
   Ze lopen door op een volgende regel als ze niet passen; afkappen zou een
   kenmerk laten verdwijnen zonder dat je het merkt. */
.chips--vinificatie {
  margin: 0;
  overflow: visible;
  flex-wrap: wrap;
  gap: 8px;
}

.vinchip {
  padding: 8px 14px;
  border: 1px solid var(--zand-donker);
  border-radius: 999px;
  background: var(--wit);
  font-size: 14px;
  /* Iets lichter dan de bodytekst: een kenmerk is een terzijde, geen kop.
     Bewust niet --inkt-zacht (#2E353C), dat is te donker voor een pil. */
  color: #39414A;
  white-space: nowrap;
}

/* ---------- Drinkvenster als fasetijdlijn ---------- */

.tijdlijn { margin-top: 12px; }

/* De balk mag horizontaal schuiven: elk segment houdt zijn minimumbreedte,
   zodat een label nooit wordt afgekapt. De pagina zelf schuift niet. */
.tijdlijn__balk {
  display: flex;
  overflow-x: auto;
  border-radius: 8px;
}

.fase {
  position: relative;
  flex: 0 0 auto;
  min-width: 78px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fase:first-child { border-radius: 8px 0 0 8px; }
.fase:last-child { border-radius: 0 8px 8px 0; }

.fase__label {
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  padding: 0 6px;
}

.fase--jong { background: #DFDBC4; color: #5C574F; }
.fase--rijpt { background: #D9C083; color: var(--wit); }
.fase--top { background: #C59012; color: var(--wit); }
.fase--voorbij { background: #8A5A22; color: var(--wit); }

/* Waar we nu staan. Steekt boven en onder de balk uit, zodat hij ook op een
   donker segment leesbaar blijft. */
.tijdlijn__marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--inkt);
  border-radius: 1px;
}

.tijdlijn__as {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--grijs-licht);
  font-variant-numeric: tabular-nums;
}

.tijdlijn__zin { margin: 10px 0 0; font-size: 14px; color: var(--inkt-zacht); }

/* Linkerpositie binnen een segment, in stappen van vijf. Net als de
   breedteklassen: de Content-Security-Policy staat geen stijlregel in de
   html toe. */
.links-0{left:0}.links-5{left:5%}.links-10{left:10%}.links-15{left:15%}
.links-20{left:20%}.links-25{left:25%}.links-30{left:30%}.links-35{left:35%}
.links-40{left:40%}.links-45{left:45%}.links-50{left:50%}.links-55{left:55%}
.links-60{left:60%}.links-65{left:65%}.links-70{left:70%}.links-75{left:75%}
.links-80{left:80%}.links-85{left:85%}.links-90{left:90%}.links-95{left:95%}
.links-100{left:calc(100% - 2px)}

/* ---------- Proefnotities ---------- */

.proefnotitie { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--hairline); }
.proefnotitie:first-child { padding-top: 0; margin-top: 0; border-top: 0; }

.proefnotitie__tekst {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--inkt-zacht);
}

.detail__blokken { padding: 20px; display: flex; flex-direction: column; gap: 14px; }

.kaart {
  background: var(--wit);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(26, 24, 21, 0.06);
  padding: 18px;
}
.kaart--rij { display: flex; align-items: center; justify-content: space-between; }
.kaart__regel { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; }
.kaart__leeg { margin: 6px 0 0; font-size: 14px; color: var(--grijs-licht); }

.getal-groot {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--inkt);
  line-height: 1.1;
  margin-top: 4px;
}
.getal-midden {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--inkt);
  margin-top: 4px;
}
.getal-prijs {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--inkt);
}
.status { font-size: 12px; color: var(--goud); }

/* Een geschat drinkvenster staat er als schatting bij, in grijs. */
/* Eén kort kaderlabel bij het drinkvenster: Bevestigd, Onzeker of Schatting.
   De onderbouwing wordt bewaard maar staat niet in beeld. Zie ANALYSE.md. */
.hardheid {
  display: inline-block;
  margin: 0;
  padding: 2px 7px 3px;
  border: 1px solid var(--lijn);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grijs);
}

/* Er loopt een analyse. Het blok houdt zijn hoogte en zijn inhoud; dit teken
   komt er alleen bij. */
.analyseblok { min-height: 160px; }

.bezigteken {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--grijs);
}

.bezigteken__ring {
  flex: 0 0 auto;
  margin-top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid var(--lijn);
  border-top-color: var(--goud);
  animation: draaien 0.9s linear infinite;
}

@keyframes draaien { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .bezigteken__ring { animation: none; border-top-color: var(--goud); }
}

.schatting {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--grijs-licht);
  text-transform: none;
}

/* Korte melding als het opslaan van een aantal misging. */
.tellerfout {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--bordeaux);
}

.telknoppen { display: flex; gap: 10px; }
.telknop {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.telknop--af { border: 1px solid var(--lijn); background: var(--zand); color: var(--inkt); }
.telknop--op { border: 0; background: var(--inkt); color: var(--zand); }
.telknop:disabled { opacity: 0.35; cursor: default; }

.balk { margin-top: 12px; height: 6px; border-radius: 999px; background: var(--zand-donker); overflow: hidden; }
.balk__vulling { display: block; height: 100%; background: var(--goud); border-radius: 999px; }

/* Breedte van de vulling, in stappen van vijf. Zie kern/drinkvenster.py. */
.v-5{width:5%}.v-10{width:10%}.v-15{width:15%}.v-20{width:20%}.v-25{width:25%}
.v-30{width:30%}.v-35{width:35%}.v-40{width:40%}.v-45{width:45%}.v-50{width:50%}
.v-55{width:55%}.v-60{width:60%}.v-65{width:65%}.v-70{width:70%}.v-75{width:75%}
.v-80{width:80%}.v-85{width:85%}.v-90{width:90%}.v-95{width:95%}.v-100{width:100%}

.notitie {
  font-size: 16px;
  font-style: italic;
  color: var(--inkt);
  margin: 8px 0 4px;
  line-height: 1.5;
}

.bron { font-size: 13px; color: var(--grijs); margin: 6px 0 12px; word-break: break-word; }

.veldrijen { margin: 0 0 14px; }
.veldrij {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
}
.veldrij dt { color: var(--grijs-licht); }
.veldrij dd { margin: 0; color: var(--inkt); text-align: right; }

/* ---------- Herkenscherm (SPEC scherm 4) ---------- */

.herkend {
  margin-top: 18px;
  background: var(--wit);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(26, 24, 21, 0.06);
  padding: 18px;
}

.herkend__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.herkend__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--goud);
}

.herkend__kwaliteit { font-size: 12px; color: var(--grijs-licht); text-align: right; }

/* De wijnnaam is een invoerveld met alleen een hairline eronder. */
.herkend__naam {
  width: 100%;
  margin-top: 8px;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--inkt);
  padding: 4px 0 10px;
  outline: none;
}
.herkend__naam:focus { border-bottom-color: var(--goud); }
.herkend__naam::placeholder { color: var(--grijs-licht); font-weight: 400; }

.herkendrij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-top: 1px solid var(--hairline);
}

.herkendrij__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grijs-licht);
  flex: 0 0 auto;
}

.herkendrij__waarde {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: right;
  font-size: 15px;
  color: var(--inkt);
  padding: 10px 0;
  outline: none;
  min-height: 44px;
}
.herkendrij__waarde::placeholder { color: var(--grijs-licht); }
.herkendrij__waarde:focus { color: var(--inkt); }

.herkendrij--dubbel { gap: 6px; }
.herkendrij--dubbel .herkendrij__waarde { text-align: right; }
.herkendrij__scheiding { color: var(--grijs-licht); font-size: 14px; }

/* Ondergeschikt: velden die niet in de zes rijen staan maar wel bij de wijn
   horen. Kleiner en gedempt, zodat de hoofdrijen de aandacht houden. */
/* Een veld dat zojuist is ingevuld. Zonder dit verandert er na een
   achterkantfoto bovenin niets zichtbaars — het alcoholpercentage staat ver
   onder de vouw — en dan lijkt het alsof er niets gebeurd is. */
.herkendrij--nieuw {
  background: #FBF6E4;
  box-shadow: inset 3px 0 0 var(--goud);
  border-radius: 0 8px 8px 0;
}

.herkendrij__nieuw {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--goud);
  white-space: nowrap;
}

.herkend__overig { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.herkend__overig .herkendrij { border-top: 0; }
.herkend__overig .herkendrij__label { font-size: 11px; }
.herkend__overig .herkendrij__waarde { font-size: 14px; color: var(--grijs); }
.herkend__overig .herkendrij__waarde:focus { color: var(--inkt); }

/* Aankoopgegevens: horen bij het aantal en de locatie, niet bij de wijn. */
.aankoop {
  margin-top: 10px;
  padding: 4px 16px 8px;
  border-radius: 14px;
  background: var(--wit);
  box-shadow: 0 1px 2px rgba(26, 24, 21, 0.06);
}
.aankoop .herkendrij:first-child { border-top: 0; }

.herkend__onderregel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

.herkend__bron { font-size: 12px; color: var(--grijs-licht); word-break: break-word; min-width: 0; }
.herkend__bron a { text-decoration: underline; }

.herkend__waarschuwing {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #FAF3DF;
  border: 1px solid #E8DCB2;
  font-size: 13px;
  color: var(--inkt-zacht);
}

.herkend__botsing { font-size: 13px; margin: 10px 0 4px; color: var(--inkt-zacht); }
.herkend__keuzes { margin: 0 0 8px; padding-left: 18px; font-size: 13px; color: var(--inkt-zacht); }

/* Kandidatenpaneel: "Verkeerde wijn" */

.kandidaat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  width: 100%;
  background: none;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  text-align: left;
  cursor: pointer;
}

.kandidaat__naam { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--inkt); }
.kandidaat__meta { font-size: 12px; color: var(--grijs-licht); margin-top: 2px; }
.kandidaat__kies { font-size: 14px; font-weight: 500; color: var(--goud); flex: 0 0 auto; }

/* Aantal flessen: grijze balk met min, getal, plus */

.aantalbalk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--zand-donker);
}

.aantalbalk__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grijs);
}

.aantalbalk__regeling { display: flex; align-items: center; gap: 10px; }

.aantalbalk__getal {
  width: 56px;
  border: 1px solid var(--lijn);
  border-radius: 10px;
  background: var(--wit);
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--inkt);
  padding: 10px 4px;
  min-height: 44px;
  outline: none;
}

/* ---------- Etiket scannen ---------- */

/* Een strook, geen bijna volledig scherm. De plaatshouder zegt alleen wat er
   komt; hij hoeft niet de vorm van een fles te hebben. Zo passen de knoppen én
   de voortgang op een telefoon in beeld zonder te scrollen. */
.fotoplek {
  height: 130px;
  border-radius: 14px;
  background: repeating-linear-gradient(135deg, #F2EFDE, #F2EFDE 6px, #E7E3CD 6px, #E7E3CD 12px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fotoplek__tekst { font: 11px ui-monospace, monospace; color: #A9A48C; }

.bezig {
  min-height: 130px;
  border-radius: 14px;
  background: var(--inkt);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 20px;
}

.bezig .stappen { color: var(--zand); }
.bezig .stap { color: rgba(239, 236, 217, 0.55); }
.bezig .stap--bezig, .bezig .stap--klaar { color: var(--zand); }

/* ---------- Stappen van een scan ---------- */

.stappen {
  list-style: none;
  margin: 14px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

.stap {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--grijs-licht);
}

.stap--klaar { color: var(--grijs); }
.stap--bezig { color: var(--inkt); font-weight: 500; }

/* Een open rondje dat vol loopt als de stap klaar is. */
.stap__teken {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  position: relative;
}

.stap--klaar .stap__teken { background: var(--goud); border-color: var(--goud); }

/* Het vinkje, met twee randen getekend zodat er geen plaatje nodig is. */
.stap--klaar .stap__teken::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid var(--wit);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.stap--bezig .stap__teken {
  border-color: var(--goud);
  border-top-color: transparent;
  animation: draaien 0.9s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .stap--bezig .stap__teken { animation-duration: 3s; }
}

.bezig__ring {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 2px solid rgba(239, 236, 217, 0.25);   /* zand, sterk doorzichtig */
  border-top-color: var(--goud);
  animation: draaien 0.8s linear infinite;
}

.bezig__tekst { font-size: 14px; color: var(--zand); }

@keyframes draaien { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .bezig__ring { animation-duration: 3s; }
}

/* Het echte bestandsveld is onzichtbaar; het label eroverheen is de knop. */
.verborgen-invoer {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

label.knop { cursor: pointer; }

/* Zolang er een stap loopt kan er niets anders gestart worden. Een label is
   geen knop die je kunt uitzetten, dus die wordt hier onklikbaar gemaakt. */
.formulier--bezig label.knop,
.formulier--bezig .knop-stippel,
.formulier--bezig .tekstknop {
  pointer-events: none;
  opacity: 0.45;
}

/* De gemaakte foto op het herkenscherm.

   Breedte automatisch en een grens op de hoogte: zo houdt de foto zijn eigen
   verhouding en staan er geen lege balken naast een uitsnede die veel hoger is
   dan breed. Een etiket is meestal juist breder dan hoog; beide moeten kunnen. */
.etiketfoto {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 320px;
  border-radius: 14px;
  margin: 0 auto 14px;
}

.detailfoto {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 460px;
  border-radius: 14px;
  margin: 0 auto;
}

/* ---------- Storingen ---------- */

.storing { padding: 12px 0; border-top: 1px solid var(--hairline); }
.storing:first-child { border-top: 0; padding-top: 0; }

.storing__kop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.storing__code {
  font: 600 13px ui-monospace, monospace;
  letter-spacing: 0.04em;
  color: var(--inkt);
}

.storing__wanneer { font-size: 12px; color: var(--grijs-licht); }

.storing__waar {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grijs-licht);
  margin-top: 3px;
}

.storing__melding {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--inkt-zacht);
  overflow-wrap: anywhere;
}

.storing__context {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--grijs);
  overflow-wrap: anywhere;
}

/* ---------- Analyse ---------- */

.onderdeel { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); }

.onderdeel__kop {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grijs-licht);
  margin-bottom: 8px;
}

.onderdeel__leeg { margin: 0; font-size: 13px; color: var(--grijs-licht); font-style: italic; }

.bevinding { margin-bottom: 12px; }
.bevinding:last-child { margin-bottom: 0; }
.bevinding__tekst { margin: 0; font-size: 14px; color: var(--inkt-zacht); line-height: 1.55; }

.bevinding__voet {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--grijs-licht);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.bevinding__bron { text-decoration: underline; word-break: break-word; }
.bevinding__opmerking { font-style: italic; }

/* Onzeker en inferentie krijgen een markering; bevestigd niet. */
.markering {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grijs-licht);
  border: 1px solid var(--lijn);
  border-radius: 4px;
  padding: 1px 6px;
  cursor: help;
}

/* ---------- Bevestiging bij verwijderen ---------- */

.bevestiging {
  border: 0;
  padding: 24px 20px calc(26px + env(safe-area-inset-bottom));
  margin: auto auto 0;
  width: 100%;
  max-width: var(--kolom);
  background: var(--zand);
  border-radius: 16px 16px 0 0;
  color: var(--inkt-zacht);
  animation: omhoog 0.22s ease-out;
}

.bevestiging::backdrop { background: rgba(33, 39, 45, 0.55); }

@keyframes omhoog {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .bevestiging { animation: none; }
}

.bevestiging__kop {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--inkt);
  margin: 0;
}

.bevestiging__uitleg { font-size: 14px; color: var(--grijs); margin: 10px 0 0; }
.bevestiging .knoprij { margin-top: 20px; }

.knop--gevaar { background: var(--bordeaux); color: var(--wit); }
.knop--gevaar:hover { background: #8E2637; }

/* ---------- Kostenoverzicht ---------- */

.kostenrij {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
}
.kostenrij:first-child { border-top: 0; }

.kostenrij__naam { font-size: 15px; font-weight: 500; color: var(--inkt); }
.kostenrij__bedrag {
  font-size: 15px;
  font-weight: 600;
  color: var(--inkt);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.kostenrij__cijfers { font-size: 12px; color: var(--grijs-licht); }
.kostenrij__gemiddeld {
  font-size: 12px;
  color: var(--grijs-licht);
  text-align: right;
}

.schuif { overflow-x: auto; }

.kostentabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 14px;
}

.kostentabel th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grijs-licht);
  padding: 10px 10px 8px;
  white-space: nowrap;
}

.kostentabel td {
  padding: 8px 10px;
  border-top: 1px solid var(--hairline);
  white-space: nowrap;
}

.kostentabel__mislukt td { color: var(--bordeaux); }

/* ---------- Onderbalk ---------- */

.tabbalk { position: fixed; left: 0; right: 0; bottom: 0; }

/* Dekkend, niet doorschijnend met een vervaging erachter.

   Een vast element met backdrop-filter dwingt Safari op de iPhone de hele
   pagina in een andere tekenwijze. Bij een lange pagina laat dat grijze
   vlakken achter waar inhoud hoort te staan, precies als je omhoog scrollt.
   De balk staat toch op een zandkleurige ondergrond, dus het verschil is
   nauwelijks te zien. */
.tabbalk__binnen {
  max-width: var(--kolom);
  margin: 0 auto;
  display: flex;
  /* De onderste ruimte telt op bij de home-indicator van de iPhone, anders
     staat "Overzicht" straks onder dat streepje. */
  padding: 12px 8px calc(26px + env(safe-area-inset-bottom, 0px));
  background: var(--zand);
  border-top: 1px solid var(--lijn);
}

/* Icoon boven, label onder. Gewone schrijfwijze, 15px: de kleine hoofdletters
   met ruime letterafstand waren mooi op een ontwerp en slecht op een telefoon
   in een donkere kelder. Van 13 naar 15 in ontwerp A — vier gelijke tabs geven
   de ruimte, en op een telefoon in slecht licht scheelt twee punt meer dan je
   zou denken.

   De hele tab is het tikvlak, niet alleen het label; vandaar de minimumhoogte
   uit de richtlijn van 44 pixels. Icoon plus tussenruimte plus label haalt dat
   ruimschoots, maar dan staat het er tenminste. */
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  text-align: center;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--grijs);
  padding: 4px 0;
}
.tab--actief { color: var(--inkt); font-weight: 600; }

/* De iconen tekenen met de kleur van hun tab, dus ze volgen actief en inactief
   vanzelf. Geen vulling: alleen lijnen. */
.tab__icoon {
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Scan is geen bestemming maar een handeling, en houdt daarom het goud van de
   oude cameraknop. Altijd, want dit tabblad wordt nooit actief: het scherm
   erachter heeft geen tabbalk.

   Het icoon is lichter goud dan het label. Dat is geen slordigheid: #C59012
   haalt als tekst te weinig contrast op de zandkleurige balk, als lijntekening
   van bijna twee pixels dik wel. */
.tab--scan { color: #9B700D; font-weight: 600; }
.tab--scan .tab__icoon { color: #C59012; }

/* ---------- Kelder (SPEC scherm 5) ---------- */

.tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }

.tegel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 16px 18px;
  border-radius: 14px;
  background: var(--inkt);
  color: var(--zand);
}

.tegel__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grijs-licht);
}

.tegel__getal { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.tegel__getal--leeg { color: var(--grijs-licht); }
.tegel__onder { font-size: 12px; color: var(--grijs-licht); }

.verdeelrij {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
}
.verdeelrij:first-child { border-top: 0; }
.verdeelrij__naam { flex: 1; color: var(--inkt); }
.verdeelrij__aantal { font-weight: 600; color: var(--inkt); }

/* Een soort zonder kleur krijgt de neutrale stip; nooit een kleur gokken. */
.stip {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 999px;
  background: var(--onbekend);
}

/* ---------- Spijsadvies (SPEC scherm 6) ---------- */

.gang { margin-top: 8px; }
.gang__stijl { font-size: 14px; color: var(--grijs); margin: 16px 0 10px; }
.gang__serveren, .gang__bronnen {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--grijs);
  word-break: break-word;
}
.gang__serveren .label, .gang__bronnen .label { margin-right: 6px; }

.advies {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding: 16px;
  border-radius: 14px;
  background: var(--wit);
  border: 1px solid var(--lijn);
}

.advies__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.advies__naam {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--inkt);
  min-width: 0;
}

.advies__label {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--goud);
  text-align: right;
}

.advies__meta { font-size: 12px; color: var(--grijs-licht); }
.advies__tekst { font-size: 14px; color: var(--inkt-zacht); line-height: 1.55; }
/* Een voorwaardelijke valkuil: een kanttekening, geen afkeuring. Daarom
   grijs en niet bordeauxrood zoals het gesloten drinkvenster. */
.advies__letop { font-size: 13px; color: var(--grijs); }
.advies__waarschuwing { font-size: 13px; color: var(--bordeaux); }
.advies__voet { font-size: 12px; color: var(--grijs-licht); }


/* ---------- Wachten op het spijsadvies ---------- */

/* Het advies duurt lang — gemeten 87,6 seconden voor een gang waarvoor echt
   gezocht wordt. De knop is zelf de indicatie, want daar kijk je op dat moment
   naar. Geen schermvullende overlay: die blokkeert de app voor iets wat je ook
   in de knop kunt zeggen. Zie werk/002 en static/js/spijs.js. */

/* Twee klassen diep, en met :disabled erbij: `.knop:disabled` verderop zet
   elke uitgeschakelde knop op grijs, en deze knop staat juist uit zolang hij
   bezig is. Zonder deze regel wordt de wachtstand een grauwe knop. */
.knop.knop--denkt,
.knop.knop--denkt:hover,
.knop.knop--denkt:disabled {
  background: #EFE3C4;
  color: #9B700D;
  cursor: progress;
}

.knop__rondje { display: none; }

.knop--denkt .knop__rondje {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 10px;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  border: 2px solid rgba(197, 144, 18, 0.3);   /* goud, sterk doorzichtig */
  border-top-color: var(--goud);
  animation: draaien 0.8s linear infinite;
}

/* Eén eerlijke regel: dat er echt iets gebeurt, en hoe lang het ongeveer
   duurt. Geen voortgangsbalk — je weet niet hoe lang het duurt, dus een balk
   die op 80% blijft hangen is een leugen. */
.spijs-wachtregel { margin-top: 10px; font-size: 14px; color: var(--grijs); }

/* Een storing tijdens het wachten, boven de knop. Geen doos eromheen zoals
   .melding--fout: dit hoort bij de knop, niet bij het scherm. */
.spijs-fout { margin-top: 16px; font-size: 15px; color: var(--bordeaux); }

/* Twee lege kaarten in de vorm van het echte advies, op de plek waar het komt
   te staan. Zonder deze springt het antwoord uit het niets omhoog. De maten
   volgen .advies, zodat de echte kaart er precies overheen past. */
.skelet {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding: 16px;
  border-radius: 14px;
  background: var(--wit);
  border: 1px solid var(--lijn);
}

.skelet--tweede { opacity: 0.6; }

.skelet__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Rustig pulseren mag; een glans die eroverheen schuift niet. Dat is druk, en
   het draaiende rondje in de knop doet het werk al. */
.skelet__balk {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: #EDEAE0;
  animation: ademen 1.6s ease-in-out infinite;
}

.skelet__balk--naam { width: 58%; height: 18px; }
.skelet__balk--label { width: 22%; background: #F3EBD6; }
.skelet__balk--meta { width: 42%; height: 10px; }
.skelet__balk--tekst { width: 100%; }
.skelet__balk--kort { width: 74%; }
.skelet__balk--voet { width: 36%; height: 10px; background: #F2F0E8; }

@keyframes ademen {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  /* De balkjes staan stil; het rondje blijft draaien, alleen langzamer. Het is
     het enige teken dat er nog gewacht wordt. */
  .skelet__balk { animation: none; }
  .knop--denkt .knop__rondje { animation-duration: 3s; }
}


/* ---------- Fles openen ---------- */

/* Het voorraadblok op het detailscherm. Openen is de gewone handeling en
   staat als enige knop in beeld; corrigeren is administratie en zit een tik
   verder weg. Zie templates/kern/wijn_detail.html. */
.voorraadblok { margin-top: 16px; }

.voorraadregel {
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.voorraadregel__aantal {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--inkt);
  line-height: 1.1;
}
.voorraadregel__tekst { font-size: 15px; color: var(--grijs); }

.knop--breed { padding: 18px; border-radius: 10px; font-size: 17px; }
.knop:disabled { background: var(--onbekend); cursor: default; }

.corrigeren { margin-top: 10px; }
.corrigeren__knop {
  list-style: none;
  text-align: center;
  font-size: 14px;
  color: var(--grijs);
  padding: 12px;
  cursor: pointer;
  min-height: 44px;
}
.corrigeren__knop::-webkit-details-marker { display: none; }
.corrigeren__inhoud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px solid var(--hairline);
}

.tekstknop--stil { color: var(--grijs); font-weight: 400; }

/* De melding onderin na het openen van een fles. Boven de tabbalk, zodat hij
   de tabs niet afdekt, en met een knop die groot genoeg is voor een duim. */
.toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(var(--balkhoogte) + 12px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: calc(var(--kolom) - 32px);
  margin: 0 auto;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--inkt);
  color: var(--wit);
  box-shadow: 0 8px 24px rgba(26, 24, 21, 0.22);
}
.toast__tekst { display: flex; flex-direction: column; min-width: 0; }
.toast__naam {
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toast__rest { font-size: 13px; color: #B9BEC3; }
.toast__knop {
  flex: none;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--wit);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
}
.toast__knop:hover { background: rgba(255, 255, 255, 0.22); }


/* ---------- Camera ---------- */

/* Het camerascherm vult het beeld en heeft geen tabbalk: je gaat terug met
   Klaar. Donker, zodat het etiket in het kader het enige is wat oplicht. */
body.donker { background: #15181B; }

.camerascherm {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #15181B;
  overflow: hidden;
}

.camerabeeld {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camerakader {
  position: absolute;
  left: 11%;
  right: 11%;
  top: 18%;
  bottom: 34%;
  border: 1px solid rgba(239, 236, 217, 0.25);
  border-radius: 14px;
}
.camerahoek { position: absolute; width: 34px; height: 34px; }
.camerahoek--lb {
  left: -1px; top: -1px;
  border-left: 3px solid var(--goud); border-top: 3px solid var(--goud);
  border-radius: 14px 0 0 0;
}
.camerahoek--rb {
  right: -1px; top: -1px;
  border-right: 3px solid var(--goud); border-top: 3px solid var(--goud);
  border-radius: 0 14px 0 0;
}
.camerahoek--lo {
  left: -1px; bottom: -1px;
  border-left: 3px solid var(--goud); border-bottom: 3px solid var(--goud);
  border-radius: 0 0 0 14px;
}
.camerahoek--ro {
  right: -1px; bottom: -1px;
  border-right: 3px solid var(--goud); border-bottom: 3px solid var(--goud);
  border-radius: 0 0 14px 0;
}

.camerauitleg {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 180px;
  text-align: center;
}
.camerauitleg__kop { margin: 0; font-size: 16px; color: var(--zand); }
.camerauitleg__regel { margin: 4px 0 0; font-size: 14px; color: #9AA0A6; }

.cameramelding {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 148px;
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: #F3D9A0;
  line-height: 1.45;
}

.camerabalk {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
}
.camerabalk__galerij {
  position: absolute;
  left: 28px;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  border: 1px solid rgba(239, 236, 217, 0.2);
  background: repeating-linear-gradient(135deg, #2C333A, #2C333A 6px, #333B43 6px, #333B43 12px);
  cursor: pointer;
}
.camerabalk__sluiter {
  width: 82px;
  height: 82px;
  border-radius: 999px;
  background: var(--wit);
  border: 5px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
}
.camerabalk__sluiter:active { transform: scale(0.96); }
/* Weggaan zonder foto: een pijl linksboven, zoals op het detailscherm.
   Versturen brengt je vanzelf terug naar de lijst, dus een knop 'Klaar' is er
   niet meer — die voelde als een extra tik voor niets. */
.cameraterug {
  position: absolute;
  left: 12px;
  top: calc(10px + env(safe-area-inset-top, 0px));
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 22px;
  color: var(--zand);
}

.camerateller {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(18px + env(safe-area-inset-top, 0px));
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: var(--zand);
}

.cameraterugval { position: absolute; left: 20px; right: 20px; top: 60px; color: var(--zand); }

/* Kort wit knipperen zodat je ziet dát er een foto gemaakt is. */
body.flits .camerascherm::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: var(--wit);
  opacity: 0.75;
}

.verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Concept-kaarten ---------- */

/* Een gescand etiket dat nog geen wijn is. Grijze streep, want een kleur die
   we nog niet kennen mag niet gegokt worden. */
.lijst--scans { margin-bottom: 4px; }

.conceptrij .wijnkaart { align-items: center; }
.conceptrij__bezig {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--grijs);
}
.conceptrij__uitweg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 12px;
  background: var(--wit);
}
.conceptrij__uitweg form { margin: 0; }


/* ---------- Snijden, na de sluiter ---------- */

/* De foto staat stil en je sleept het kader over het etiket. Wat er naar de
   server gaat is de uitsnede; de hele foto verlaat de telefoon niet. */
.snijpaneel {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: calc(60px + env(safe-area-inset-top, 0px)) 16px
           calc(20px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}

.snijder__beeld {
  position: relative;
  line-height: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #0F1215;
  touch-action: none;        /* anders scrolt de pagina mee tijdens het slepen */
  user-select: none;
}

/* De foto vult het vak precies; static/js/camera.js zet het vak op de maat van
   de foto. Zo slaan de procenten van het kader op het beeld zelf en niet op
   balken eromheen — dat verschil leverde een uitsnede op die dwars door het
   etiket liep.

   Hier stond een tweede begrenzing: max-height 58vh, terwijl camera.js al
   begrenst op window.innerHeight * 0.58. Dat lijkt hetzelfde en is het niet.
   Op een telefoon rekent vh met het volle scherm, inclusief het stuk onder de
   adresbalk; innerHeight rekent met wat je werkelijk ziet. Zodra die twee
   uiteenlopen wordt het vak hoger dan de foto erin, ligt de foto met balken in
   het vak, en snijdt een kader dat je netjes om het etiket legde er een strook
   naast. Gemeten op 7 september 2026: 424 x 1047 en 533 x 1685, terwijl het
   etiket bijna vierkant in beeld stond.

   Er is nu één plek die de hoogte bepaalt, en dat is camera.js: die zet zowel
   het vak als de foto op dezelfde uitgerekende maat.

   'object-fit: contain' hoort erbij en mag er niet af. Zonder die regel is de
   standaard 'fill', en dan wordt de foto uitgerekt om het vak te vullen in
   plaats van dat hij zijn verhouding houdt. Dat is één keer gebeurd toen de
   regel bij het opruimen sneuvelde: het kader klopte, de foto niet. */
.snijder__beeld img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.snijder__kader {
  position: absolute;
  border: 2px solid var(--goud);
  box-shadow: 0 0 0 9999px rgba(15, 18, 21, 0.55);
  cursor: move;
}

/* Grijpblokjes van 44px: kleiner is met een vinger niet te raken. Het gouden
   rondje binnenin is wat je ziet; het onzichtbare vlak eromheen is wat je
   aanraakt. */
.snijder__greep {
  position: absolute;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.snijder__greep::after {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--goud);
  border: 2px solid var(--wit);
}

.snijder__greep--lb { left: -22px; top: -22px; cursor: nwse-resize; }
.snijder__greep--rb { right: -22px; top: -22px; cursor: nesw-resize; }
.snijder__greep--lo { left: -22px; bottom: -22px; cursor: nesw-resize; }
.snijder__greep--ro { right: -22px; bottom: -22px; cursor: nwse-resize; }

.snijuitleg { text-align: center; margin: 0; }
.snijknoppen { margin-top: 0; gap: 10px; }

/* Knoppen op een donkere ondergrond. */
.knop--donker { border-color: rgba(239, 236, 217, 0.35); color: var(--zand); }
.tekstknop--donker { color: #9AA0A6; }


/* ---------- Het scherm na het scannen ---------- */

/* Een bevestiging om te lezen, geen formulier om te controleren. Meestal
   klopt het en hoef je alleen te zeggen hoeveel het er zijn en waar ze liggen.
   Zie templates/kern/_herkend_lezen.html. */

.gelezen {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--grijs);
}
.gelezen__vink {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--goud);
  position: relative;
}
.gelezen__vink::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid var(--wit);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.bevestig__naam {
  margin: 16px 0 0;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--inkt);
}
.bevestig__huis { margin: 8px 0 0; font-size: 16px; color: var(--grijs); }
.bevestig__herkomst { margin: 4px 0 0; font-size: 15px; color: var(--grijs); }
.bevestig__voet { margin-top: 18px; text-align: center; }

/* De uitsnede die je net zelf hebt aangewezen: klein, rechtsboven, als
   bevestiging dat de goede fles binnen is. */
.bevestig__foto {
  float: right;
  width: 76px;
  max-height: 104px;
  margin: 0 0 8px 14px;
  border-radius: 10px;
  object-fit: cover;
}

/* Regels met een haarlijn erboven, waarde rechts. Geen kaarten, geen
   schaduwen: het is één pagina, geen stapel blokken. */
.leesrij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  clear: both;
  padding: 16px 0;
  border-top: 1px solid var(--lijn);
  font-size: 15px;
}
.leesrij:first-of-type { margin-top: 22px; }
.leesrij__label { color: var(--grijs); }
.leesrij__waarde { color: var(--inkt); text-align: right; }
.leesrij__waarde--nieuw { color: var(--goud); font-weight: 600; }
.leesrij__invoer {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 6px 0;
  font-size: 15px;
  color: var(--inkt);
  text-align: right;
}

/* De locatie is het enige veld op dit scherm dat je zelf moet invullen, en het
   enige waarop het formulier vastloopt. Zonder rand en zonder achtergrond zag
   het eruit als tekst: je krijgt te horen dat je een plek moet kiezen, terwijl
   het veld eruitziet alsof er niets in te vullen valt. Daarom hier wél een
   zichtbaar vak. */
.leesrij__invoer--invullen {
  flex: 0 1 auto;
  min-width: 9rem;
  max-width: 60%;
  padding: 10px 12px;
  border: 1px solid var(--zand-donker);
  border-radius: 10px;
  background: var(--wit);
  min-height: 44px;
}

.leesrij__invoer--invullen::placeholder { color: var(--grijs-licht); }

/* Loopt het formulier hierop vast, dan is dit het veld waar je moet zijn. */
.leesrij--fout .leesrij__invoer--invullen {
  border-color: var(--bordeaux);
  border-width: 2px;
}
.leesrij__invoer::placeholder { color: var(--grijs-licht); }

/* Aantal: stappers van 48 bij 48, met de hele doos ernaast als pil. */
.aantalrij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
}
.aantalrij__label { font-size: 15px; color: var(--grijs); }
.aantalrij__regeling { display: flex; align-items: center; gap: 8px; }
.aantalrij__getal {
  width: 44px;
  border: 0;
  background: none;
  font-size: 20px;
  font-weight: 600;
  color: var(--inkt);
  text-align: center;
}

.stapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stapper--af { border: 1px solid var(--lijn); background: var(--wit); color: var(--inkt); }
.stapper--op { border: 0; background: var(--inkt); color: var(--zand); }
.stapper:disabled { opacity: 0.35; cursor: default; }

.pilknop {
  border: 1px solid var(--lijn);
  background: var(--wit);
  border-radius: 999px;
  padding: 9px 13px;
  min-height: 44px;
  font-size: 14px;
  color: var(--inkt);
  white-space: nowrap;
  cursor: pointer;
}

/* Twee gelijke knoppen naast elkaar. */
.knoppaar { display: flex; gap: 10px; }
.knoppaar .knop { flex: 1; }

/* Waar het vandaan komt, en wat je zelf moet nakijken. Klein en grijs, maar
   niet te grijs: dit is de regel die een verkeerde cuvée verraadt. */
.herkomstregel {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--grijs);
}

.scherm--midden { text-align: center; }
.scherm--midden .gelezen { justify-content: center; }


/* ---------- Wijndetail: één pagina ---------- */

/* Was acht witte kaarten van gelijk gewicht, dus niets had voorrang en je
   scrolde zoekend. Nu: een donkere kop, de conclusie in gewone taal, en
   daaronder gewone secties met haarlijnen ertussen. */

.wijnkop {
  background: var(--inkt);
  color: var(--zand);
  padding: 18px 20px 22px;
}
.wijnkop__terug {
  display: inline-block;
  font-size: 14px;
  color: #A8ADB2;
  padding: 6px 0 12px;
  min-height: 44px;
}
.wijnkop__rij { display: flex; gap: 14px; align-items: flex-start; }
.wijnkop__tekst { flex: 1; min-width: 0; }
.wijnkop__naam {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.wijnkop__huis { margin: 8px 0 0; font-size: 15px; color: #D6D1C4; }
.wijnkop__herkomst { margin: 4px 0 0; font-size: 14px; color: #A8ADB2; }

/* Geen foto betekent niets op die plek: geen grijs vlak, geen silhouet. */
.wijnkop__foto {
  flex: 0 0 76px;
  width: 76px;
  max-height: 104px;
  border-radius: 10px;
  object-fit: cover;
}

.detail__inhoud {
  max-width: var(--kolom);
  margin: 0 auto;
  padding: 22px 20px calc(var(--balkhoogte) + 40px);
}

/* De conclusie. Dit is waar je voor kwam: kan hij open of niet. */
.conclusie {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--inkt);
}
.conclusie__uitleg {
  margin: 5px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--grijs);
}

/* De streep is klein met opzet: hij ondersteunt de zin erboven. */
.venster {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.venster__jaar { font-size: 13px; color: var(--grijs); flex: none; }
.venster__balk {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--zand-donker);
}
.venster__vak {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--goud);
  border-radius: 999px;
}
.venster__nu {
  position: absolute;
  top: -5px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 999px;
  background: var(--inkt);
  border: 3px solid var(--zand-donker);
}
.venster__hardheid { margin: 8px 0 0; font-size: 13px; color: var(--grijs); }

/* Secties: haarlijnen in plaats van kaarten. */
.sectie {
  border-top: 1px solid var(--lijn);
  padding: 16px 0;
}
.sectie__kop {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--inkt);
}
.sectie__kop--klap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  min-height: 44px;
}
.sectie__kop--klap::-webkit-details-marker { display: none; }
.sectie__aantal { font-size: 15px; font-weight: 400; color: var(--grijs-licht); }
.sectie__regel {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--grijs);
}
.sectie__meta { margin: 6px 0 0; font-size: 13px; color: var(--grijs-licht); }
.sectie__leeg { margin: 6px 0 0; font-size: 15px; color: var(--grijs-licht); }
.sectie--klap[open] .sectie__kop--klap { margin-bottom: 8px; }

.tekstknop--links { text-align: left; padding-left: 0; }

/* Het voorraadblok staat op het detailscherm los, zonder kaart eromheen. */
.detail__inhoud .voorraadblok {
  margin: 18px 0 4px;
  padding: 16px 0 0;
  border-top: 1px solid var(--lijn);
}


/* ---------- Lijst: secties, sorteren, statuspil ---------- */

.zoekrij { display: flex; gap: 8px; align-items: stretch; }
.zoekrij .zoekbalk { flex: 1; min-width: 0; }

.sorteer { position: relative; flex: 0 0 auto; }
.sorteer__knop {
  list-style: none;
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  background: var(--wit);
  font-size: 15px;
  color: var(--inkt);
  cursor: pointer;
  white-space: nowrap;
}
.sorteer__knop::-webkit-details-marker { display: none; }
.sorteer__lijst {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 180px;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 12px;
  box-shadow: 0 10px 24px -12px rgba(26, 24, 21, 0.4);
  overflow: hidden;
}
.sorteer__optie {
  display: block;
  padding: 13px 16px;
  min-height: 44px;
  font-size: 15px;
  color: var(--inkt);
  border-top: 1px solid var(--hairline);
}
.sorteer__optie:first-child { border-top: 0; }
.sorteer__optie--actief { font-weight: 600; background: var(--zand); }

.lijstkop {
  margin: 18px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--inkt);
}
.lijstkop--tweede { margin-top: 22px; }

.wijnkaart__rechts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 12px 12px 0;
  flex: 0 0 auto;
}

/* De drinkstatus als pil: het kan open, het moet bijna open, of het moet nog
   wachten. Meer kleuren op een lijst leest niemand. */
.statuspil {
  font-size: 12px;
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.statuspil--dronk { color: #9B700D; background: #FAF2DE; }
.statuspil--laatste { color: var(--bordeaux); background: #F6E7E8; }
.statuspil--wachten { color: var(--grijs); background: var(--zand); }


/* ---------- Foutmeldingen bij het veld ---------- */

/* Ze stonden alleen bovenaan: "Voer een getal in", en dan zelf zoeken waar. */
.veldfout {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--bordeaux);
}
.herkendrij .veldfout { flex-basis: 100%; text-align: right; }

.veld__moet {
  font-size: 12px;
  font-weight: 400;
  color: var(--grijs-licht);
}


/* ---------- Tweestapsverificatie ---------- */

/* De sleutel wordt overgetypt van een scherm naar een telefoon. Vaste breedte
   en blokjes van vier, anders raak je halverwege de tel kwijt. */
.sleutel {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--inkt);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 8px 0 20px;
  word-break: break-all;
}
.sleutelregel { margin: 12px 0 0; font-size: 15px; }

.codelijst {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.codelijst__code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 16px;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
}