/* ═══════════════════════════════════════════════════════════════════════
   Airco Innovatie OS — één stijl voor alle apps.

   Mex, 02-09-2026: "de spacing klopt hier en daar niet."

   Dat kwam ergens vandaan. Elke app-pagina had zijn eigen kopie van dezelfde
   kleuren en maten in zijn eigen <style>, en zodra je er in één iets aan
   verandert lopen ze uit elkaar. Vier kopieën van dezelfde waarheid is geen
   stijl maar vier stijlen die toevallig op elkaar lijken.

   Dus staat het hier één keer. Elke pagina laadt dit bestand vóór zijn eigen
   regels; wat écht bij die pagina hoort mag daar blijven staan.

   DE RUIMTEMAAT
   Ruimte is een schaal, geen los getal per plek. Alles is een veelvoud van 4:
   4, 8, 12, 16, 20, 24, 32, 40, 56. Wie een tussenmaat nodig heeft, heeft
   meestal de verkeerde maat te pakken. Daardoor staat gelijksoortige inhoud
   overal even ver uit elkaar, en dát is wat je ziet als spacing "klopt".
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── huisstijl Airco Innovatie ─────────────────────────────────────────
     Kleuren van aircoinnovatie.nl: diepblauw, het groen van de CTA en het
     oranje uit het logo. Koppen in Poppins, lopende tekst in Montserrat. */
  --font-kop:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-tekst:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --ground:#F3F6F9; --surface:#FFFFFF;
  --fill:rgba(12,79,130,.055); --fill-2:rgba(12,79,130,.10);
  --line:rgba(12,79,130,.13); --line-soft:rgba(12,79,130,.07);
  /* ── inkt ──────────────────────────────────────────────────────────────
     --ink-3 stond op #7E8F9C. Nagemeten: 3,34:1 op wit en 3,08:1 op de
     achtergrond, waar 4,5:1 de ondergrens is voor tekst tot 17pt. Dat is geen
     detail — het is de kleur van élke onderregel in de app: "Stap voor stap na
     de schouw", "stap 1 van 9", het e-mailadres onder een naam. Nu #5F707D:
     dezelfde leikleur, en 5,12 op wit / 4,72 op de achtergrond / 4,68 op een
     kaart. Getoetst op alle drie de ondergronden, niet alleen op wit. */
  --ink:#1F2A33; --ink-2:#4A5A67; --ink-3:#5F707D;

  /* ── de huisstijlkleuren ───────────────────────────────────────────────
     Deze blijven precies wat ze waren: dit is het blauw, groen en oranje van
     aircoinnovatie.nl en daar komt niets aan. Ze zijn bedoeld om mee te VULLEN
     — een bolletje, een balkje, een vlak.

     Wat er wél bij komt: een variant om mee te SCHRIJVEN. Diezelfde tint als
     kleine tekst haalt de contrasteis niet, en dat los je op door de rol te
     splitsen, niet door de kleur van het bedrijf te veranderen. Vandaar
     --green-ink en --orange-ink voor tekst, en --green-cta voor een groen vlak
     waar witte letters op staan. Alle drie nagemeten op de ondergrond waar ze
     werkelijk op landen. */
  --blue:#1478BC; --blue-deep:#0C4F82; --blue-tint:rgba(20,120,188,.10);
  --green:#67A53F; --green-deep:#4A7A2B; --green-tint:rgba(103,165,63,.13);
  --green-ink:#456F27;      /* tekst op --green-tint → 4,83:1 */
  --green-cta:#4E7A2D;      /* witte tekst hierop     → 5,07:1 */
  --orange:#FB8E28; --orange-deep:#C4690E; --orange-tint:rgba(251,142,40,.14);
  --orange-ink:#96500A;     /* tekst op --orange-tint → 5,02:1 */
  --rood:#C4453B; --rood-deep:#933028; --rood-tint:rgba(196,69,59,.11);

  /* ── de kleur die ÓP een gevuld vlak ligt ──────────────────────────────
     Overal in de app stond hard `color:#fff` op een blauw, groen of oranje
     vlak. In de lichte modus klopt dat. In de donkere modus niet: daar worden
     de huisstijlkleuren juist lichter — --blue-deep gaat van #0C4F82 naar
     #8CC6EF — en dan is het wit op lichtblauw. Nagemeten 1,84:1, waar 4,5 de
     eis is. Dat gold voor twaalf plekken tegelijk: het actieve filter, de
     bolletjes bij meldingen, het pictogram van de actieve app, de knoppen in
     de schouw.

     Eén token lost ze alle twaalf op, want hij draait mee met het palet: wit
     op donker blauw, bijna-zwart op licht blauw. */
  --op-vlak:#FFFFFF;
  --glass:rgba(243,246,249,.74);
  --shadow-s:0 1px 2px rgba(12,44,74,.05);
  --shadow-m:0 1px 2px rgba(12,44,74,.05), 0 10px 30px -18px rgba(12,44,74,.35);
  --shadow-l:0 1px 3px rgba(12,44,74,.07), 0 22px 48px -26px rgba(12,44,74,.45);
  --r-lg:22px; --r-md:16px; --r-sm:11px; --r-cta:10px;
  --ease:cubic-bezier(.32,.72,0,1);
  --zij:248px;

  /* ── de ruimtemaat ───────────────────────────────────────────────────── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:56px;

  /* Zijmarge van een scherm. Op een telefoon smaller, en dat is één plek —
     niet een @media-regel per pagina. */
  --kant:20px;
  /* Hoogte van een tikdoel. Mike staat buiten met handschoenen aan. */
  --raak:56px;
  /* Breedte van een leeskolom. Alles wat je leest is even breed. */
  --kolom:620px;
}

@media(max-width:420px){ :root{ --kant:16px; } }

@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0B1219; --surface:#16202A;
  --fill:rgba(255,255,255,.06); --fill-2:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.11); --line-soft:rgba(255,255,255,.06);
  /* Donker is geen omkering maar een eigen palet. --ink-3 haalt hier 4,93 op
     een kaart en 5,63 op de achtergrond en mag dus blijven; de schrijfvarianten
     draaien om — op een donkere ondergrond moet tekst juist lichter worden. */
  --ink:#E9F0F6; --ink-2:#AEC0CD; --ink-3:#7C8F9E;
  --blue:#54A9E4; --blue-deep:#8CC6EF; --blue-tint:rgba(84,169,228,.16);
  --green:#8FCB63; --green-deep:#AEDD8D; --green-tint:rgba(143,203,99,.17);
  --green-ink:#AEDD8D; --green-cta:#3E6423;
  --orange:#FBA84F; --orange-deep:#FCC68C; --orange-tint:rgba(251,168,79,.17);
  --orange-ink:#FCC68C;
  --rood:#E4796E; --rood-deep:#F2A79E; --rood-tint:rgba(228,121,110,.16);
  --op-vlak:#0B1219;   /* 7,3 tot 10,3:1 op de lichte varianten hierboven */
  --glass:rgba(11,18,25,.72);
  --shadow-s:0 1px 2px rgba(0,0,0,.4);
  --shadow-m:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
  --shadow-l:0 1px 3px rgba(0,0,0,.5), 0 22px 48px -26px rgba(0,0,0,.9);
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* ── de balk bovenaan elke app ─────────────────────────────────────────────
   Mike, 20:35: "hoe ga ik terug?"

   Dat was een terechte vraag: in een app zonder kop weet je niet waar je bent
   en niet hoe je eruit komt. Elke app krijgt dezelfde balk: links terug, in het
   midden waar je bent, rechts wat je hier kunt doen. Altijd op dezelfde plek,
   ook als de inhoud eronder verschilt. */
.appkop{
  position:sticky;top:0;z-index:20;
  background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line-soft);
  /* De inzet hoort BOVEN, niet onder. Hier stond hem als derde waarde in een
     driewaardige padding, en dat is de onderkant — de balk kreeg dus ruimte aan
     de verkeerde kant en de klok van de telefoon liep dwars door de titel.
     Werkt alleen in het bovenste document; binnen een venster geeft iOS altijd
     0 terug. Daarom regelt de schil het óók, zie os.html. */
  padding:calc(var(--s3) + env(safe-area-inset-top)) var(--kant) var(--s3);
}
.appkop-in{
  max-width:var(--kolom);margin:0 auto;
  display:flex;align-items:center;gap:var(--s3);min-height:40px;
}
.appkop h1,.appkop .waar{
  margin:0;font-family:var(--font-kop);font-size:16px;font-weight:600;
  letter-spacing:-.02em;line-height:1.25;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.appkop .waar small{
  display:block;font-family:var(--font-tekst);font-size:12px;font-weight:500;
  color:var(--ink-3);letter-spacing:0;line-height:1.3;
}
/* 44 bij 44. Stond op 38, en dit is de terugknop die in élke app linksboven
   staat — de meest gebruikte knop van het hele OS, aangetikt door iemand die
   buiten staat met handschoenen aan. De cirkel zelf blijft optisch 38 (groter
   ziet er log uit naast de titel); het tikgebied groeit eromheen. */
.rond{
  position:relative;
  width:38px;height:38px;flex:none;border:0;border-radius:50%;cursor:pointer;
  background:var(--fill);color:var(--ink-2);
  display:grid;place-items:center;-webkit-tap-highlight-color:transparent;
  transition:background .18s var(--ease), transform .16s var(--ease);
}
.rond::after{
  content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:44px;height:44px;border-radius:50%;
}
.rond:hover{background:var(--fill-2)}
.rond:active{transform:scale(.93)}
.rond svg{width:18px;height:18px}
.rond[hidden]{display:none}

/* ── het werkblad ─────────────────────────────────────────────────────────
   Eén maat voor de leeskolom en één voor de zijmarge, zodat de tekst in elke
   app op dezelfde lijn begint. */
.blad-in{max-width:var(--kolom);width:100%;margin:0 auto;padding:var(--s6) var(--kant) var(--s9)}

/* ── typografie ───────────────────────────────────────────────────────────
   Marges hangen aan de kop, niet aan wat eronder staat. Zo is de afstand tussen
   twee blokken altijd dezelfde, ongeacht wat er toevallig volgt. */
.titel{
  margin:0 0 var(--s2);font-family:var(--font-kop);
  font-size:27px;font-weight:600;letter-spacing:-.025em;line-height:1.18;
}
.hulp{margin:0 0 var(--s6);font-size:14.5px;color:var(--ink-2);line-height:1.5}
.sectiekop{
  font-family:var(--font-kop);font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);
  margin:var(--s7) 0 var(--s3);
}
.sectiekop:first-child{margin-top:0}

/* ── knoppen en keuzes ────────────────────────────────────────────────────── */
button{font:inherit;-webkit-tap-highlight-color:transparent}

.keuzes{display:flex;flex-direction:column;gap:var(--s2)}
.keuze{
  display:flex;align-items:center;gap:var(--s3);width:100%;
  min-height:var(--raak);padding:var(--s3) var(--s4);text-align:left;
  background:var(--surface);border:1.5px solid var(--line-soft);border-radius:14px;
  color:var(--ink);font:inherit;cursor:pointer;
  transition:border-color .18s var(--ease), background .18s var(--ease), transform .16s var(--ease);
}
.keuze:active{transform:scale(.985);background:var(--fill)}
.keuze.aan{border-color:var(--blue);background:var(--blue-tint)}
.keuze .titel-r{font-size:16px;font-weight:600;letter-spacing:-.015em;display:block;overflow-wrap:anywhere}
.keuze .bij{font-size:13px;color:var(--ink-3);display:block;margin-top:1px;line-height:1.4}
.keuze .rechts{margin-left:auto;font-size:14px;color:var(--ink-3);white-space:nowrap;flex:none}
.keuze .vink{
  margin-left:auto;flex:none;width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--line);display:grid;place-items:center;
  font-size:12px;color:transparent;
}
.keuze.aan .vink{background:var(--blue);border-color:var(--blue);color:#fff}

.erbij{
  width:100%;min-height:var(--raak);border:1.5px dashed var(--line);border-radius:14px;
  background:transparent;color:var(--blue-deep);font:inherit;font-size:15.5px;font-weight:600;
  cursor:pointer;
}
.erbij:active{transform:scale(.99);background:var(--fill)}

/* ── kaarten ──────────────────────────────────────────────────────────────── */
.kaart{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:var(--s4);margin-bottom:var(--s3);
}
.kaart:last-child{margin-bottom:0}
.kaart-kop{
  display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3);
}
.kaart-kop b{font-family:var(--font-kop);font-size:14px;font-weight:600;letter-spacing:-.01em}
.kaart-kop .bij{font-size:12.5px;color:var(--ink-3);margin-left:auto}

/* ── meldingen ────────────────────────────────────────────────────────────── */
.melding{
  display:flex;gap:var(--s2);align-items:flex-start;padding:var(--s3) var(--s4);
  border-radius:12px;font-size:14px;line-height:1.5;margin-bottom:var(--s2);
}
.melding .ic{
  flex:none;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;color:var(--op-vlak);margin-top:1px;
}
/* Het groene bolletje was --green met wit erop: 2,99:1. Hetzelfde groen een
   slag dieper haalt 5,07 en is naast de tint niet van de huisstijl te
   onderscheiden. */
.melding.goed .ic{background:var(--green-cta)}
/* De tekstkleur is de schrijfvariant, niet de vulkleur: --orange-deep op de
   oranje tint haalde 3,22:1 en --green-deep op de groene 4,18:1. Het bolletje
   ernaast houdt wél de volle huisstijlkleur — dat is een vlak en geen letter. */
.melding.let{background:var(--orange-tint);color:var(--orange-ink)}
.melding.let .ic{background:var(--orange)}
.melding.goed{background:var(--green-tint);color:var(--green-ink)}
.melding.goed .ic{background:var(--green)}
.melding.info{background:var(--blue-tint);color:var(--blue-deep)}
.melding.info .ic{background:var(--blue)}
.melding.mis{background:var(--rood-tint);color:var(--rood-deep)}
.melding.mis .ic{background:var(--rood)}

/* ── de focusring ──────────────────────────────────────────────────────────
   Wie met een toetsenbord werkt moet kunnen zien waar hij is. Knoppen kregen
   nog de ring van de browser, maar élk invoerveld in deze app zette hem uit en
   gaf er alleen een blauwe rand voor terug — een kleurverschil van 1,5 pixel,
   en dat is precies wat je niet ziet als je kleurenblind bent of het scherm in
   de zon staat.

   Dus hier één ring voor alles, in plaats van per pagina iets anders. Op
   :focus-visible, dus hij verschijnt bij het toetsenbord en niet bij een muis-
   klik. `outline` en niet `box-shadow`: een outline volgt de vorm van de knop,
   overleeft `overflow:hidden`, en blijft staan in de hoogcontrastmodus van
   Windows. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2.5px solid var(--blue);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
/* Binnen een rij tegen de rand zou een offset-ring afgesneden worden. */
.rond:focus-visible,.pas:focus-visible{outline-offset:3px;border-radius:50%}

/* ── de systeeminstellingen van de gebruiker ───────────────────────────────
   Drie schakelaars die iemand op zijn telefoon kan omzetten. Ze staan hier
   onderaan en niet per pagina, want ze gelden voor alles. */

/* Minder beweging. Niet "geen terugkoppeling": de overgang wordt een korte
   overvloeiing in plaats van een verschuiving, zodat je nog steeds ziet dát er
   iets veranderde — alleen zonder dat het scherm beweegt. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.12s!important;transition-property:opacity,background-color,border-color,color!important;
    scroll-behavior:auto!important;
  }
  .blad,.sluier{transition:opacity .12s linear!important;transform:none!important}
}

/* Minder doorschijnendheid. De balk bovenaan is matglas; wie dat uitzet krijgt
   een dichte balk in plaats van een vage. */
@media(prefers-reduced-transparency:reduce){
  .appkop{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* En als de browser geen matglas kan, ook niet stiekem doorschijnend blijven. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .appkop{background:var(--surface)}
}

/* Meer contrast. Randen worden echte randen in plaats van een hint. */
@media(prefers-contrast:more){
  :root{
    --line:rgba(12,79,130,.42); --line-soft:rgba(12,79,130,.26);
    --ink-2:#33414D; --ink-3:#44535F;
  }
  .kaart,.keuze,.erbij{border-width:1.5px}
}