/* Reddo - de onderdelen die overal terugkomen: de werkkaart, knoppen, de meta-regels,
   de klantcode, de syncbalk, het filter, de tijdlijn en de taalkeuze.

   Wat hier NIET meer staat, en waar het heen is:

     landing.css   de landingpagina, het brede scherm en de onboarding
     auth.css      inloggen, "Mijn status" en de naam van de onderneming
     customer.css  de publieke klantpagina
     admin.css     flyerbeheer en de lettertypekiezer - gereedschap, geen product

   Waarom opgeknipt: dit bestand was 1.433 regels en werd door iedereen tegelijk aangeraakt.
   Dat is precies de reden waarom photo-viewer.css en date-picker.css in ronde 5 al hun eigen
   bestand kregen; dit is dezelfde beweging, een ronde later.

   LET OP DE VOLGORDE. Deze bestanden worden in index.html na elkaar geladen, en bij gelijke
   specificiteit wint wie het laatst komt. De volgorde daar is niet vrij: hij is zo gekozen
   dat de cascade gelijk blijft aan het oude bestand. Verplaats een <link> niet zonder de
   berekende stijlen opnieuw te meten. */

/* Padding hoort bij de breedte, overal. Zonder dit loopt elk element met
   `width: 100%` én padding precies zijn padding buiten het scherm — dat is nu drie
   keer los gerepareerd (zoekveld, modal, CTA) en de vierde keer stond hij op de
   toegangscodepagina rechts van het scherm af. Eén regel is beter dan vijf
   reparaties en een zesde die nog komt. */
*, *::before, *::after { box-sizing: border-box; }

/* De eigen focusring. De standaard van de browser is blauw, en blauw komt in dit
   palet nergens voor — dat viel elke keer op zodra er een veld in beeld kwam. Wel
   een duidelijke ring: het moet te zien zijn waar je aan het typen bent.
   `:focus-visible` en niet `:focus`, zodat een muisklik geen ring achterlaat. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--r-status-bezig);
  outline-offset: 1px;
}

/* Achtergrond komt van .reddo-ruled (tokens.css): papierkleur mét schrijflijntjes.
   Twee valkuilen die hier allebei zijn ingelopen:
   - een `background` op body.reddo is specifieker dan .reddo-ruled en dekt de lijntjes af;
   - een `background` op html blokkeert dat body's achtergrond het hele canvas vult,
     waardoor je onder de inhoud effen papier ziet.
   Daarom alleen een kale background-color als terugval (lagere specificiteit dan de klasse). */
body { background-color: var(--r-paper); min-height: 100vh; }

body.reddo {
  margin: 0; color: var(--r-black);
  font-family: var(--r-font);
}
/* De onderruimte staat als variabele en niet als los getal, omdat de voettekst hem weer
   moet opheffen (zie `.r-footer`). Twee keer 24px op twee plekken in dit bestand loopt
   uit elkaar zodra iemand er één verandert. */
.r-screen {
  --r-screen-onder: 24px;
  max-width: 430px; margin: 0 auto; padding: 0 var(--r-pad-screen) var(--r-screen-onder);
}
.r-topbar { display: flex; justify-content: space-between; align-items: center; padding: 22px 8px 16px; }
/* Ook als <a> (home-link): een logo is geen blauwe onderstreepte link. */
/* Feedback 16 aug, punt 2: 19px/700 -> vet en 20% groter. Staat op elk scherm
   (logoLink() in components.ts), dus dit groeit overal mee — bewust. */
.r-logo {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--r-black);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.r-logo:visited { color: var(--r-black); }
.r-screenhead { display: flex; justify-content: space-between; align-items: baseline; padding: 0 8px 14px; }
.r-screenhead h1 { font-size: 30px; font-weight: 700; letter-spacing: -.035em; margin: 0; }
.r-count { font-family: var(--r-font-mono); font-size: 12px; color: var(--r-faint); }

.r-list { display: flex; flex-direction: column; gap: var(--r-gap-list); }

.r-card {
  position: relative; background: var(--r-card);
  border: 1px solid var(--r-border); border-radius: var(--r-radius-card);
  overflow: hidden; padding: var(--r-pad-card) var(--r-pad-card) var(--r-pad-card) calc(var(--r-pad-card) + 4px);
  cursor: pointer;
}
.r-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--r-strip-w); background: var(--strip, var(--r-border));
}
.r-card--open {
  border-radius: var(--r-radius-card-lg);
  box-shadow: 0 10px 26px rgba(26, 20, 17, .1);
  cursor: default;
}
.r-card__row { display: flex; gap: 12px; align-items: center; }
.r-card__info { flex: 1; min-width: 0; }
.r-card__title { font-size: 17px; font-weight: 700; }
.r-card__title--lg { font-size: 19.5px; }
/* Naam + potlood op één regel. `min-width: 0` zodat een lange naam afkapt in plaats
   van het potlood van de kaart af te duwen. */
.r-card__titlerow { display: flex; align-items: center; gap: 7px; min-width: 0; }
.r-card__titlerow .r-card__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Het potlood is een uitnodiging, geen knop die om aandacht schreeuwt: rustig
   grijs, maar een raakvlak van 34px — een icoon van 15px is met een duim niet te
   raken, en dit gebeurt aan een toonbank.

   Stond op 28px terwijl de prullenbak en het inklappen ernaast 34px zijn. Dat scheelt
   maar zes pixels, maar het is precies het verschil tussen raken en ernaast tikken: de
   tester miste hem herhaaldelijk. De negatieve marge groeit mee van -6px naar -9px,
   zodat de titelregel even hoog blijft — anders wordt de kaart zes pixels hoger en
   verschuift de lijst eronder. Het icoon zelf blijft 15px. */
.r-card__rename {
  flex: none; width: 34px; height: 34px; margin: -9px 0;
  display: grid; place-items: center;
  border: 1px solid var(--r-border); border-radius: 8px;
  background: transparent; color: var(--r-muted); cursor: pointer;
}
.r-card__rename:hover { color: var(--r-black); border-color: var(--r-black); }

.r-card__titleinput {
  flex: 1; min-width: 0; font: inherit; font-size: 17px; font-weight: 700;
  color: var(--r-black); background: var(--r-white);
  border: 1px solid var(--r-black); border-radius: 8px; padding: 4px 8px; margin: -5px 0;
}
/* Zie de globale focusregel bovenaan dit bestand. */

.r-card__sub { font-size: 14.5px; color: var(--r-muted); }
/* Te laat: kleur ondersteunt, maar draagt de informatie nooit alleen — de kaart
   zegt óók "te laat" in tekst. Zie de designregels in tokens.css. */
.r-card__sub--overdue { color: #A8341F; font-weight: 600; }

/* `position: relative` omdat de fototeller er absoluut in hangt. Stond er niet, want
   tot ronde 5 zat er niets in de miniatuur behalve de foto zelf. */
.r-thumb {
  position: relative;
  flex: none; border-radius: 10px; overflow: hidden; background: var(--r-paper);
  display: grid; place-items: center;
}
.r-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r-thumb--empty { color: var(--r-faint); font-size: 11px; border: 1px dashed var(--r-border); }

/* Foto staat nog in de wachtrij. Bewust geen spinner en geen knipperende foto: er
   valt niets te wachten, de klus staat er al. Alleen een dun randje dat rustig
   aan- en afzwelt — genoeg om te zien dat er nog iets loopt, te weinig om de
   aandacht op te eisen. */
.r-thumb--sending { position: relative; }
.r-thumb--sending::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  border: 1.5px solid var(--r-status-bezig);
  animation: r-breathe 2.4s ease-in-out infinite;
}
@keyframes r-breathe {
  0%, 100% { opacity: .2; }
  50% { opacity: .85; }
}
/* Wie beweging heeft uitgezet, ziet het randje gewoon stilstaan. */
@media (prefers-reduced-motion: reduce) {
  .r-thumb--sending::after { animation: none; opacity: .6; }
}

/* De foto bovenaan de uitgeklapte kaart, over de volle breedte.

   Vaste verhouding, want een staande telefoonfoto op 390px breed is anders bijna twee
   schermen hoog. Erger nog: zonder vaste hoogte springt de kaart zodra de foto binnen
   is, en verschuift de lijst onder de duim die net ergens op mikte. 4:3 en `cover`
   snijdt liever iets weg dan dat het de kaart uit elkaar trekt. */
.r-photo {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3;
  margin: 0 0 14px; padding: 0;
  border: 0; border-radius: 12px; overflow: hidden;
  background: var(--r-paper); color: var(--r-faint);
  font: inherit; font-size: 13px; cursor: pointer;
}
.r-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Geen foto, of een foto die niet wil laden: hetzelfde eerlijke lege vak. Gestippeld,
   zodat het als een plek leest waar iets hoort en niet als een mislukt plaatje. */
.r-photo--empty,
.r-photo--broken {
  display: grid; place-items: center;
  border: 1px dashed var(--r-border);
}
.r-photo--broken { cursor: default; }

/* Aantal foto's, linksonder in de foto. Donker doorschijnend blokje in plaats van
   losse lichte tekst: een teller moet leesbaar zijn op een lichte én een donkere foto,
   en dat is de enige achtergrond waar we niets over weten. */
.r-photocount {
  position: absolute; left: 10px; bottom: 10px;
  font-family: var(--r-font-mono); font-size: 11px; font-weight: 600;
  color: #fff; background: rgba(26, 20, 17, .62);
  padding: 3px 8px; border-radius: var(--r-radius-pill);
  pointer-events: none;
}
/* Dezelfde teller op de miniatuur van de ingeklapte kaart — 48px, dus alles kleiner. */
.r-photocount--sm {
  left: 3px; bottom: 3px; padding: 1px 5px; font-size: 9px; border-radius: 5px;
}

/* De drie regels onder de titel: aangeleverd, datum klaar, klantcode.

   Bewust geen scheidingslijntjes tussen de regels: de kaart staat al op een gelinieerde
   achtergrond en drie randjes erbij maken er een tabel van. De uitlijning doet het werk.

   `min-width` op het label zet de waarden in één kolom. De regel "Datum klaar" komt uit
   date-picker.ts (van D) en heeft deze klassen niet — als die regel scheef staat, is dít
   het getal dat hij moet aanhouden. */
.r-meta { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.r-meta__row {
  display: flex; align-items: center; gap: 8px;
  min-height: 34px; font-size: 16px;
}
.r-meta__label { flex: none; min-width: 104px; color: var(--r-muted); }
.r-meta__value { font-weight: 700; }

/* De klantcode is een regel die openklapt. Als <button> zodat de hele regel een
   raakvlak is en niet alleen het woord — dit gebeurt met een duim aan een toonbank. */
.r-codeline {
  width: 100%; padding: 0; background: none; border: 0;
  font: inherit; font-size: 14px; text-align: left; cursor: pointer;
  /* `color` MOET hier staan en mag niet aan `font: inherit` worden overgelaten: die
     shorthand neemt lettertype, grootte en gewicht over, maar kleur niet. Een <button>
     zonder eigen kleur krijgt de kleur van de browser, en Safari op iOS tekent knoptekst
     in systeemblauw. De klantcode stond daardoor knalblauw op de werkkaart — op een
     iPhone, terwijl hij in Chromium gewoon zwart was, dus in ontwikkeling zag je het niet.
     Blauw komt in dit palet nergens voor.

     Dit is niet dezelfde fout als de `tel:`-link waarvoor in index.html een
     `format-detection`-meta staat. Die ving iOS dat vier cijfers voor een telefoonnummer
     aanzag; deze komt uit de knop eromheen en bleef daarna gewoon staan. Twee oorzaken,
     één symptoom — vandaar dat de eerste fix het probleem niet leek op te lossen. */
  color: var(--r-black);

  /* Het label bovenaan uitlijnen in plaats van te centreren. `.r-meta__row` centreert
     verticaal, en zodra de cijfers hoger werden dan de regel duwde de helft van dat
     verschil het woord "Klantcode:" omlaag — daardoor stond het verder van "Datum klaar"
     af dan "Datum klaar" van "Aangeleverd", terwijl het dezelfde soort regel is. Nu houdt
     het label zijn eigen band van 34px, precies als de regels erboven, en steekt alleen
     het getal eronder uit. Dat is de bedoeling: het getal mag ruimte pakken, het rijtje
     labels moet zijn ritme houden. */
  align-items: flex-start;
  /* Wat extra lucht boven de coderegel, op verzoek: dit is het einde van het rijtje en de
     enige regel die iemand voorleest. */
  margin-top: 6px;
}
/* Label én pijltje krijgen allebei de band van 34px waarin de regels hierboven hun tekst
   centreren. Alleen het label was niet genoeg: met `align-items: flex-start` op de regel
   plakte het pijltje tegen de bovenkant en zweefde het zichtbaar boven het woord
   "Klantcode:" — een halve regel te hoog, en juist bij een ingeklapte kaart waar verder
   niets staat viel dat op. */
.r-codeline .r-meta__label,
.r-codeline .r-codeline__caret {
  min-height: 34px; display: inline-flex; align-items: center;
}

/* De kleur nóg een keer, nu op de cijfers zelf, plus een dekking voor het geval iOS er
   alsnog een telefoonlink van maakt.
 *
 * Waarom dubbelop: de klantcode stond blauw op een iPhone en die blauwe kleur is hier
 * niet na te maken. WebKit op deze machine tekent een kale <button> als rgba(0,0,0,.847)
 * en dus niet blauw — de oorzaak zit ergens waar alleen een echt iOS-toestel bij kan. Er
 * zijn twee kandidaten en dit dekt ze allebei: erft de span de knopkleur, dan wint de
 * regel hieronder; maakt iOS er een `tel:`-anker van, dan wint de tweede.
 *
 * Dit is dus geen diagnose maar een afdekking, en dat hoort erbij te staan. Blijkt hij op
 * het toestel nog steeds blauw, dan is het geen van beide en moet er iemand met een
 * aangesloten iPhone naar kijken. */
.r-codeline .r-codeline__code,
.r-codeline .r-code__digits { color: var(--r-black); }
.r-codeline a,
.r-codeline a[href^='tel:'] {
  color: inherit; text-decoration: none;
}
/* Het pijltje wijst naar rechts als er iets uit te klappen valt, en naar links als het
   open staat. Dat volgt waar de code stáát: die verschijnt rechts op dezelfde regel, niet
   eronder. Een pijltje omlaag beloofde iets onder de regel en daar komt niets.

   Dit is de derde vorm en het is de moeite waard te weten waarom, want de tweede lijkt de
   juiste. Omlaag/omhoog (2acbfca) klopte toen de code nog een blok ónder de regel was.
   Rechts/links kwam in 3075f7b, maar toen stond het pijltje op `margin-left: auto`, dus
   uiterst rechts tegen de kaartrand — daar hoorde het zichtbaar bij niets en het is in
   f0f451e teruggedraaid naar omlaag/omhoog. Dat was terecht voor die plek, maar het loste
   de verkeerde helft op: het probleem was de pósitie, niet de richting.

   Nu allebei goed: naast het label (dus niet verweesd) én wijzend naar waar de code komt.
   De SVG zelf wijst omlaag, vandaar de kwartslag op -90 en +90 — samen een halve draai,
   dus de animatie loopt door in plaats van halverwege terug te springen. */
.r-codeline__caret {
  display: inline-grid; place-items: center; color: var(--r-faint);
  margin-left: 6px; transform: rotate(-90deg);
  transition: transform .15s ease;
}
.r-codeline--open .r-codeline__caret { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .r-codeline__caret { transition: none; }
}

/* Het beige vlak met de code, rechts óp de regel zelf in plaats van als blok eronder.
   Vierde vorm, en de reden dat het er vier zijn: het vak van 44px in een eigen blok was
   ruim honderd pixels hoog voor vier cijfers, kale cijfers op de regel waren te klein om
   voor te lezen én niet terug te vinden zonder eigen vlak, en het blok van 34px eronder
   maakte de kaart weer lang. Dit houdt alle drie de eisen: een eigen vlak (vindbaar),
   26px (voor te lezen aan een toonbank) en geen extra regelhoogte (de werklijst blijft
   kort).

   `margin-left: auto` duwt hem naar de rechterrand; het pijltje blijft bij het label
   staan. Dat het vlak links van de kaartrand begint en niet over de volle breedte loopt is
   de bedoeling — "deels rechts" is precies wat er gevraagd is.

   De selector is bewust `.r-codeline .r-codeline__code` en niet de losse klasse: de span
   draagt óók `.r-code__digits` (44px, waar de browsertests op selecteren, zie
   offline-sync.spec.ts) en met één klasse aan elke kant beslist de volgorde in dit bestand
   wie wint. Twee klassen winnen altijd, waar deze regel ook komt te staan. */
.r-codeline .r-codeline__code {
  margin-left: auto; flex: none;
  background: var(--r-paper); border-radius: 10px; padding: 4px 10px;
  /* 26 -> 52 -> 62px, in twee stappen op verzoek. Dit is het enige getal op de kaart dat
     iemand anders moet overnemen, vaak voorgelezen aan een toonbank met de klant ernaast,
     en op 26px moest je ervoor gaan staan.

     Het past nog náást het label — bij 62px zijn vier cijfers ongeveer 198px breed en er
     zit ~235px tussen het einde van het label en de kaartrand. Veel meer kan dus niet
     zonder dat het getal onder het label duikt; dat is de grens van deze vorm. */
  font-size: 62px; margin-top: 0; line-height: 1.05;
}

/* Nog geen code: die komt pas na de eerste synchronisatie. Kleine grijze tekst en geen
   beige vlak — een leeg vlak op de plek van een getal belooft een getal. */
.r-codeline__pending {
  margin-left: auto; flex: none;
  font-size: 13px; color: var(--r-muted); font-style: italic;
}

/* De uitlegregel staat onder de coderegel en begint op dezelfde plek als de code, dus
   ingesprongen tot voorbij het label. Alleen bij het aannemen zichtbaar. */
.r-codeline__hint {
  font-size: 12.5px; color: var(--r-muted);
  margin: 2px 0 4px; text-align: right;
}

.r-pill {
  font-family: var(--r-font-mono); font-size: 10.5px; font-weight: 600;
  padding: 5px 10px; border-radius: var(--r-radius-pill); flex: none;
}
.r-pill--aangenomen { background: var(--r-status-aangenomen); color: var(--r-black); }
.r-pill--bezig { background: var(--r-status-bezig); color: var(--r-black); }
.r-pill--klaar { background: var(--r-status-klaar); color: #fff; }
.r-pill--opgehaald { background: var(--r-status-meegegeven); color: #fff; }
.r-pill--geannuleerd { background: var(--r-border); color: var(--r-muted); }

.r-code { background: var(--r-paper); border-radius: 14px; padding: 18px; text-align: center; margin-top: 16px; }
.r-code__label { font-family: var(--r-font-mono); font-size: 10px; letter-spacing: .14em; color: var(--r-faint); }
.r-code__digits { font-family: var(--r-font-mono); font-size: 44px; font-weight: 600; letter-spacing: .1em; margin-top: 4px; }
.r-code__hint { font-size: 12.5px; color: var(--r-muted); margin-top: 4px; }


/* Eén handeling, over de volle breedte — dezelfde linker- en rechterrand als de
   klantcode erboven. Was een raster van drie kolommen met de knop in het midden en
   het inklappen ernaast; dat gaf een kaart waarin niets op één lijn stond. */
/* De hoofdknop en de terugknop naast elkaar. `flex` en niet twee blokken: de terugknop
   moet meebewegen met de breedte van de kaart, niet op een vast getal staan. */
.r-card__actions { padding-top: 16px; display: flex; align-items: stretch; gap: 8px; }

/* Eén stap terug. Ongeveer een vijfde van de breedte, in beige met een randje.
 *
 * Beige en niet grijs: grijs is in dit palet de kleur van "uitgeschakeld" (zie
 * `.r-btn:disabled` hieronder, die op `--r-border` staat), en deze knop dóét juist iets.
 * Zand hoort bij de kaart en schreeuwt niet.
 *
 * `flex: 0 0 20%` in plaats van een vaste breedte: op een brede kaart groeit hij mee,
 * en de hoofdknop pakt met `flex: 1` de rest. De ondergrens van 52px is er omdat een
 * vijfde van een smalle kaart onder het formaat zakt waarop je met een duim kunt mikken. */
.r-btn--back {
  flex: 0 0 20%; min-width: 52px;
  display: grid; place-items: center;
  background: var(--r-paper); color: var(--r-muted);
  border: 1px solid var(--r-border);
}
.r-btn--back:hover { color: var(--r-black); border-color: var(--r-muted); }
.r-card__actions .r-btn--advance { flex: 1; width: auto; }

/* Verwijderen: bewust onopvallend en onderaan. Het is de enige handeling hier die
   niet terug te draaien is, dus hij mag niet concurreren met de knop ernaast. */
.r-delete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.r-delete__ask {
  font: inherit; font-size: 12.5px; color: var(--r-faint);
  background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline;
}
.r-delete__ask:hover { color: #A8341F; }
.r-delete__warn { font-size: 12.5px; color: var(--r-muted); flex: 1 0 100%; }
.r-delete__yes, .r-delete__no {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border-radius: var(--r-radius-btn); padding: 8px 14px;
}
/* Rood is hier de informatie én de rem: dit is de enige plek in de app waar iets
   verdwijnt. Zelfde tint als "te laat", geen nieuw signaalrood. */
.r-delete__yes { background: #A8341F; color: #fff; border: 1px solid #A8341F; }
.r-delete__yes:disabled { opacity: .5; cursor: default; }
.r-delete__no { background: transparent; color: var(--r-muted); border: 1px solid var(--r-border); }
.r-btn { font: inherit; border: 0; cursor: pointer; border-radius: var(--r-radius-btn); }
/* Uitgeschakeld moet je kúnnen zien, niet moeten raden. Naast deze stijl staat
   er altijd een zichtbare regel waaróm — een title-tooltip bestaat niet op touch. */
.r-btn:disabled,
.r-add__cta:disabled {
  cursor: not-allowed; opacity: .45;
  background: var(--r-border); color: var(--r-muted);
}

/* Uitleg bij een uitgeschakelde actie. Zichtbaar, want dit is een telefoon-app. */
.r-hint {
  font-size: 12px; color: var(--r-faint); text-align: center;
  padding-top: 10px; grid-column: 1 / -1;
}
.r-btn--advance { display: block; width: 100%; padding: 15px 20px; font-size: 15.5px; font-weight: 700; }
/* Prullenbakje rechtsboven, naast het inklappen. Klein en gedempt: het is een
   opruimhandeling, geen stap in het werk. Zelfde raakvlak van 34px als inklappen,
   want met een duim mikken op een icoon van 15px lukt niet. */
.r-btn--trash {
  flex: none; width: 34px; height: 34px; padding: 0; background: transparent;
  border: 1px solid var(--r-border); color: var(--r-faint); display: grid; place-items: center;
}
.r-btn--trash:hover { color: #A8341F; border-color: #A8341F; }

/* Inklappen staat rechtsboven in de kaart, naast de statuspil. */
.r-btn--collapse {
  flex: none; width: 34px; height: 34px; padding: 0; background: transparent;
  border: 1px solid var(--r-border); color: var(--r-muted); display: grid; place-items: center;
}

/* Wrapper: draagt de marge, zodat de uitlegregel eronder binnen hetzelfde blok
   valt en de lijst niet verspringt zodra Fase 4 de knop aanzet. */
.r-add-wrap { margin-top: 14px; }

.r-add {
  display: flex; gap: 14px; align-items: stretch;
  background: var(--r-black); color: var(--r-paper);
  border-radius: var(--r-radius-card-lg); padding: 12px;
}
.r-add__photo {
  flex: 1; height: 76px; border-radius: 12px; overflow: hidden;
  border: 1px dashed rgba(250, 247, 242, .35); color: rgba(250, 247, 242, .6);
  display: grid; place-items: center; font-size: 12px; cursor: pointer;
}
.r-add__photo img { width: 100%; height: 100%; object-fit: cover; }
.r-add__cta {
  flex: none; width: 34%; background: none; border: 0; color: inherit;
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
/* Het zwarte blok blijft staan zodat de lijst niet verspringt zodra Fase 4 hem
   aanzet — hij is alleen zichtbaar inactief. */
.r-add--disabled { opacity: .5; }
.r-add--disabled .r-add__cta:disabled { background: none; color: inherit; }

/* Verbindingsindicator: vaste balk bovenaan, alleen zichtbaar als er iets mis is.
   Statuskleur "bezig" (oker) i.p.v. rood — offline is geen fout, het is een
   toestand waarin de app gewoon doorwerkt. */
.r-netstatus {
  position: sticky; top: 0; z-index: 10;
  background: var(--r-status-bezig); color: var(--r-black);
  font-family: var(--r-font-mono); font-size: 12px; font-weight: 500;
  text-align: center; padding: 8px 12px;
}
.r-netstatus[hidden] { display: none; }

/* "Er is een nieuwe versie" — onderaan vast, want daar is de duim. Boven de
   iOS-balk blijven met env(safe-area-inset-bottom), anders staat de knop deels
   achter de streep waar je hem moet raken. */
.r-updatebar {
  position: fixed; left: 12px; right: 12px; z-index: 40;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--r-black); color: var(--r-paper);
  border-radius: var(--r-radius-card); padding: 12px 14px;
  font-size: 13.5px; box-shadow: 0 6px 20px rgba(26, 20, 17, .22);
}
.r-updatebar__btn {
  flex: none; font: inherit; font-weight: 700; cursor: pointer;
  background: var(--r-paper); color: var(--r-black);
  border: 0; border-radius: var(--r-radius-btn); padding: 9px 14px;
}
.r-updatebar__btn:disabled { opacity: .6; cursor: default; }

/* Blokkeerscherm: tenant-wissel met openstaand werk. Bewust prominent — dit is
   het enige moment waarop de app werk kan vernietigen dat nergens anders staat. */
.r-blocker {
  background: var(--r-card); border: 1px solid var(--r-border);
  border-left: var(--r-strip-w) solid var(--r-status-bezig);
  border-radius: var(--r-radius-card-lg); padding: 22px; margin-top: 16px;
}
.r-blocker__title { font-size: 20px; font-weight: 700; margin: 0 0 10px; letter-spacing: -.02em; }
.r-blocker__body { font-size: 14px; color: var(--r-muted); line-height: 1.5; margin: 0 0 12px; }
.r-blocker__confirm {
  background: var(--r-black); color: var(--r-paper);
  padding: 11px 18px; font-size: 14.5px; font-weight: 700;
}

.r-empty {
  color: var(--r-muted); font-size: 14px; text-align: center;
  padding: 40px 16px; border: 1px dashed var(--r-border);
  border-radius: var(--r-radius-card); margin-top: 8px;
}

/* Keuzeknoppen: één per toegestane vervolgstatus. Wrapt op smalle schermen. */
.r-choices { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* Inline formulier voor nieuw werk — geen prompt(), die blokkeert de pagina. */
.r-addform { display: flex; gap: 8px; margin-top: 10px; }
.r-addform__input {
  /* 16px — zie de toelichting bij .r-namebar__input: onder die maat zoomt iOS in. */
  flex: 1; min-width: 0; font: inherit; font-size: 16px;
  padding: 11px 12px; border-radius: var(--r-radius-btn);
  border: 1px solid var(--r-border); background: var(--r-card); color: var(--r-black);
}
.r-addform__save {
  flex: none; padding: 11px 18px; font-weight: 700; font-size: 14.5px;
  background: var(--r-black); color: var(--r-paper);
}
.r-addform[hidden] { display: none; }

.r-syncbar-slot { margin-top: 4px; }
.r-syncbar--failed {
  display: flex; gap: 10px; align-items: center; justify-content: center;
  color: #A8341F; font-weight: 600;
}
.r-syncbar__retry {
  font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
  padding: 5px 10px; border-radius: var(--r-radius-pill);
  border: 1px solid currentColor; background: transparent; color: inherit;
}

.r-syncbar {
  font-family: var(--r-font-mono); font-size: 11px; color: var(--r-faint);
  text-align: center; padding: 10px 0 0;
}
.r-syncbar[data-pending]:not([data-pending="0"]) { color: var(--r-status-bezig); }

/* --- Naam van de onderneming, rechtsboven in de werklijst -------------------
   Op de plek uit design/reddo-home-browser.html. Zolang de naam leeg is staat de
   invulregel hier; daarna de naam zelf. Zo verspringt er niets zodra hij invult. */
.r-topbar__business { flex: 1; display: flex; justify-content: flex-end; min-width: 0; }

.r-topbar__businessname {
  font-size: 13px; font-weight: 600; color: var(--r-black);
  border: 1.5px solid var(--r-black); border-radius: var(--r-radius-btn);
  padding: 6px 14px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Nog geen naam: dezelfde vorm als de gevulde variant, zodat er niets verspringt
   zodra hij invult. Gedempt, want het is een uitnodiging en geen waarschuwing. */
.r-topbar__businessname--empty {
  background: transparent; color: var(--r-muted);
  border-style: dashed; border-color: var(--r-border);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}

/* Alleen nog de keuzeknoppen op de landing; op de werkkaart is er sinds vandaag
   maar één knop, dus die stijl is hier weg in plaats van dood blijven staan. */
.r-choices { flex-direction: column; align-items: center; gap: 10px; }

/* Navigatie in de topbar van de schermen buiten de landing. Zonder dit is een
   geïnstalleerde PWA een doodlopend pad: er is dan geen browser-terugknop. */
.r-screennav { display: flex; gap: 6px; }

.r-screennav__link {
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  color: var(--r-muted); border: 1px solid var(--r-border);
  border-radius: var(--r-radius-btn); padding: 6px 12px;
}
/* Topbar bevat nu logo + navigatie + bedrijfsnaam; de naam krimpt, de navigatie niet. */
.r-topbar__business { flex: 1 1 auto; min-width: 0; }
.r-screennav { flex: none; }

/* --- Statusfilter op de werklijst ------------------------------------------
   Uit de mockup: een pil naast de teller. Standaard alles behalve "Opgehaald". */
.r-screenhead__right { display: flex; align-items: center; gap: 10px; position: relative; }

.r-filter { position: relative; }

.r-filter__button {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--r-border); border-radius: 999px;
  padding: 6px 12px; background: transparent;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--r-muted);
  cursor: pointer;
}

.r-filter__panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  background: var(--r-card); border: 1px solid var(--r-border);
  border-radius: var(--r-radius-card); padding: 10px 12px;
  box-shadow: 0 10px 26px rgba(26, 20, 17, .12);
  display: flex; flex-direction: column; gap: 8px; min-width: 180px;
}
.r-filter__panel[hidden] { display: none; }

/* De knop draagt nu een trechter in plaats van het woord "Filter". Rond en even hoog als
   voorheen, zodat de kop van de werklijst niet verspringt. `place-items` want er kan een
   telbolletje naast staan. */
.r-filter__icon { display: grid; place-items: center; }

/* Hoeveel statussen er aan staan, als het niet de standaard is. Het pictogram alleen
   verklaart niet waarom er kaarten ontbreken; dit getal deed dat in het oude label ook. */
.r-filter__count {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--r-black); color: #fff;
  font-family: var(--r-font-mono); font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}
/* Alleen de sortering wijkt af: geen getal, want er is niets te tellen. Wel een teken
   dat er iets is aangeraakt — anders is een omgedraaide lijst een raadsel. */
.r-filter__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--r-black);
}

.r-filter__kop {
  font-family: var(--r-font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--r-faint);
}
.r-filter__scheiding { height: 1px; background: var(--r-border); margin: 2px 0; }

/* Een sorteerregel. Als <button> en over de volle breedte: aantikken kiest hem, en de
   actieve nog eens aantikken draait de richting om. */
.r-filter__sort {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 5px 0; background: none; border: 0;
  font: inherit; font-size: 14px; color: var(--r-muted);
  text-align: left; cursor: pointer;
}
.r-filter__sort--actief { color: var(--r-black); font-weight: 700; }
.r-filter__pijl { display: grid; place-items: center; transform: rotate(0deg); }
/* Aflopend: dezelfde pijl een halve slag. Eén pictogram voor twee richtingen scheelt een
   tweede vorm die je apart moet leren herkennen. */
.r-filter__pijl--af { transform: rotate(180deg); }

.r-filter__row { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
/* Het vinkje in de kleur van de app. De standaard van de browser is systeemblauw, en blauw
   komt in dit palet nergens voor — zeven blauwe vakjes op een rij waren het enige blauw op
   het hele scherm. Zelfde reden als bij de focusring bovenaan dit bestand. */
.r-filter__row input[type='checkbox'] { accent-color: var(--r-black); width: 17px; height: 17px; }

.r-filter__reset {
  margin-top: 2px; background: transparent; border: 0; padding: 4px 0;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--r-muted);
  text-align: left; cursor: pointer; text-decoration: underline;
}


/* Voettekst op de publieke pagina's. Rustig: dit is de laatste regel van de pagina, niet
   een tweede menu. Bewust zonder links — zie de toelichting bij siteFooter(). */
.r-footer {
  /* Eén dunne regel, en dat is de hele eis. Stond op 22/24px met een randlijn erboven en
     droeg vier dingen tegelijk — dat maakte er een tweede menu van in plaats van een
     afsluiting. Geen `flex-wrap`: wat er niet op één regel past hoort er niet te staan. */
  margin-top: 20px;
  /* Tegen de onderkant: de 10px boven en de 12px onder zijn eruit. Dit is de afsluiting
     van de pagina, geen blok dat nog ademruimte onder zich nodig heeft — met die padding
     zweefde de regel een halve regelhoogte boven de bodem.

     De `env(safe-area-inset-bottom)` blijft staan, en dat is geen marge maar noodzaak: op
     een iPhone loopt de gebarenbalk over de onderste ~34px en zonder deze regel valt de
     tekst daarachter. De 0px-fallback maakt hem nul op alles zónder zo'n balk, dus daar
     staat de voettekst nu echt tegen de rand. */
  padding: 0 var(--r-pad-screen) env(safe-area-inset-bottom, 0px);
  /* En dan is er nóg iets dat de voettekst omhoog hield: `.r-screen` heeft 24px
     onderpadding. Die hoort daar voor de schermen zónder voettekst (de werklijst eindigt
     met een knop, die moet niet tegen de rand plakken), dus die blijft staan en wordt hier
     opgeheven. `--r-screen-onder` erft van `.r-screen`, dus de twee kunnen niet uit elkaar
     lopen. */
  margin-bottom: calc(-1 * var(--r-screen-onder, 0px));
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
/* De leus alleen op een breed scherm: op een telefoon is elke regel schaars, en hij staat
   bovenaan dezelfde pagina al. */
.r-footer__tag { display: none; font-size: 12px; color: var(--r-faint); }
@media (min-width: 900px) {
  .r-footer__tag { display: inline; }
}
.r-footer__name {
  font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--r-faint);
}
.r-footer__links { display: flex; gap: 14px; }
.r-footer__link { font-size: 12px; color: var(--r-muted); text-decoration: underline; }
.r-footer__link:visited { color: var(--r-muted); }
.r-footer__meta { font-family: var(--r-font-mono); font-size: 11px; color: var(--r-faint); }

@media (min-width: 900px) {
  .r-footer { padding-left: 10%; padding-right: 10%; margin-top: 56px; }
}


/* ------------------------------------------------------------- taalkeuze --
   Een kort label (`NL`) onderaan, dat naar bóven uitklapt. Zie ui/language-picker.ts.

   Hier stond het hamburgermenu rechtsboven. Dat had één ding erin en beloofde daarmee meer
   dan het gaf; bovendien is rechtsboven op de werklijst de plek van de bedrijfsnaam.

   Naar boven en niet naar beneden: dit staat in de voettekst, en onder de voettekst is
   niets — een dropdown zou half buiten beeld openen. */
.r-lang { position: relative; flex: none; }

.r-lang__button {
  padding: 3px 8px; border-radius: var(--r-radius-pill);
  border: 1px solid var(--r-border); background: transparent;
  font-family: var(--r-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: var(--r-muted); cursor: pointer;
}
.r-lang__button:hover { color: var(--r-black); border-color: var(--r-muted); }

.r-lang__panel {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 30;
  background: var(--r-card); border: 1px solid var(--r-border);
  border-radius: var(--r-radius-card); padding: 8px 12px;
  box-shadow: 0 -8px 26px rgba(26, 20, 17, .14);
  display: flex; flex-direction: column; gap: 2px; min-width: 150px;
}
.r-lang__panel[hidden] { display: none; }

.r-lang__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 7px 0; background: none; border: 0;
  font: inherit; font-size: 14.5px; color: var(--r-muted);
  text-align: left; cursor: pointer;
}
.r-lang__item--gekozen { color: var(--r-black); font-weight: 700; }
.r-lang__vink { display: grid; place-items: center; color: var(--r-black); }

/* Op de werklijst is geen voettekst; daar staat de syncbalk. De taalkiezer hangt eronder,
   rechts uitgelijnd, op dezelfde hoogte in het scherm als op de andere pagina's. */
.r-syncbar-lang {
  display: flex; justify-content: flex-end;
  padding: 0 var(--r-pad-screen) calc(10px + env(safe-area-inset-bottom, 0px));
}


/* ----------------------------------------------------------- wijzigingen --
   De geschiedenis van een klus, achter een regel die je openklapt. Zie ui/timeline.ts.

   Ingeklapt en niet meteen open: op een kaart met dertig regels geschiedenis zie je de knop
   eronder niet meer, en "wat moet ik nu doen" is een vakere vraag dan "wat is er gebeurd". */
.r-changes__toggle {
  display: flex; align-items: center; gap: 8px;
  width: 100%; margin-top: 14px; padding: 8px 0;
  background: none; border: 0; border-top: 1px solid var(--r-border);
  font: inherit; font-size: 13.5px; color: var(--r-muted);
  text-align: left; cursor: pointer;
}
.r-changes__caret { display: grid; place-items: center; transform: rotate(0deg); transition: transform .15s ease; }
.r-changes__toggle--open .r-changes__caret { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .r-changes__caret { transition: none; }
}
/* Het aantal op de regel zelf, zodat je zonder openklappen ziet of er iets te halen valt. */
.r-changes__count {
  margin-left: auto;
  font-family: var(--r-font-mono); font-size: 11px; color: var(--r-faint);
}

.r-tl { display: flex; flex-direction: column; }
.r-tl__leeg { font-size: 12.5px; color: var(--r-faint); padding: 4px 0 8px; }

.r-tl__item { border-bottom: 1px solid var(--r-border); }
.r-tl__item:last-child { border-bottom: 0; }

.r-tl__row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 0;
  background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
  color: var(--r-black);
}
.r-tl__caret { display: grid; place-items: center; color: var(--r-faint); flex: none; transition: transform .15s ease; }
.r-tl__item--open .r-tl__caret { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .r-tl__caret { transition: none; }
}

/* Wat er gebeurde en wanneer, onder elkaar: op 390px passen ze niet naast elkaar zodra er
   een datum bij staat, en afkappen zou juist de uitkomst wegnemen. */
.r-tl__tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.r-tl__wat { font-size: 14px; }
.r-tl__wanneer { font-size: 11.5px; color: var(--r-faint); }

/* Alleen zichtbaar als het versturen nog loopt of misging. "Verstuurd" is het normale geval
   en krijgt geen teken. */
.r-tl__staat {
  flex: none; margin-left: auto;
  font-family: var(--r-font-mono); font-size: 10px;
  padding: 3px 7px; border-radius: var(--r-radius-pill);
  background: var(--r-paper); color: var(--r-muted);
}
.r-tl__staat--failed { background: #F6E2DE; color: #A8341F; }

.r-tl__specs {
  display: flex; flex-direction: column; gap: 3px;
  padding: 2px 0 10px 20px;
}
.r-tl__spec { display: flex; gap: 10px; font-size: 12.5px; }
.r-tl__speclabel { flex: none; min-width: 96px; color: var(--r-faint); }
.r-tl__specvalue { color: var(--r-muted); word-break: break-word; }


/* ------------------------------------------------ hoe komt je werk binnen --
   De enige vraag bij het aanmelden, op het moment van de eerste foto. Zie
   ui/business-type.ts, inclusief waarom hij over richting gaat en niet over beroep.

   Een overlay en geen scherm: hij hoort bij het aannemen van die eerste klus, niet bij een
   registratieproces. Wie hem overslaat is meteen weer waar hij was. */
.r-biztype {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(26, 20, 17, .45);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px;
}
/* Onderaan uitgelijnd en niet gecentreerd: op een telefoon is dat waar de duim is, en het
   is dezelfde plek waar de fotomodal opent. */
@media (min-width: 600px) {
  .r-biztype { align-items: center; }
}

.r-biztype__card {
  background: var(--r-card); border-radius: var(--r-radius-card);
  padding: 22px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 18px 50px rgba(26, 20, 17, .28);
}
.r-biztype__title { font-size: 20px; font-weight: 800; margin: 0; }
.r-biztype__sub { font-size: 13.5px; color: var(--r-muted); margin: 0 0 6px; }

.r-biztype__option {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--r-border); background: var(--r-paper);
  font: inherit; text-align: left; cursor: pointer;
}
.r-biztype__option:hover { border-color: var(--r-black); }
.r-biztype__optiontitle { font-size: 16px; font-weight: 700; color: var(--r-black); }
/* De voorbeelden in kleine letters: ze zijn er om jezelf te herkennen, niet om te lezen. */
.r-biztype__optionhint { font-size: 12.5px; color: var(--r-muted); }

/* Overslaan is de uitweg, geen derde keuze — dus tekst en geen knop. */
.r-biztype__skip {
  margin-top: 4px; padding: 8px 0;
  background: none; border: 0; font: inherit; font-size: 13px;
  color: var(--r-faint); text-decoration: underline; cursor: pointer;
}