/* Gedeelde merk-tokens (fase 1 visuele eenwording): de kleuren die de hele site samen
   gebruikt (de Svelte-schermen via apps/web/src/app.css, en de coordinatorplanner via
   apps/web/public/coordinator/index.html) — geladen als losse stylesheet op beide plekken
   (<link rel="stylesheet" href="/tokens.css">), zodat er een enkele bron is in plaats van
   twee met de hand gelijk te houden kopieen.

   Semantische kleuren (ok/waarschuwing/fout/reserve/extern) staan hier bewust NIET in: dat
   zijn statusindicatoren, geen merkkleur, en blijven lokaal in elk bestand gedefinieerd. */
:root {
  --primair: #1D5EA8;
  --primair-donker: #123F7A;
  --primair-zacht: #E7F0FB;
  --achtergrond: #F5F8FC;
  --kaart: #FFFFFF;
  --tekst: #16212C;
  --tekst-zacht: #5B6B7A;
  --rand: #DCE4EC;
}

/* Woordmerk "Fluitplanner": echte tekst in Figtree 800, "Fluit" donker en "planner" in de hoofdkleur (op het blauwe merkvlak van het inlogscherm
   alles wit). Het lettertype wordt lokaal geserveerd (public/fonts/, via scripts/sync-figtree.mjs uit @fontsource/figtree): de Content Security
   Policy staat geen fonts van derden toe en er gaat geen verkeer naar Google. Gebruik: <span class="merk-woord">Fluit<span>planner</span></span> */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/figtree-800.woff2') format('woff2');
}
.merk-woord { font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 800; font-size: 1.3rem; line-height: 1; letter-spacing: -0.01em; color: var(--primair-donker); white-space: nowrap; }
.merk-woord > span { color: var(--primair); }
.merk-woord--wit, .merk-woord--wit > span { color: #fff; }

/* Informatieteken (i): de uitleg bij een kop of veld staat achter een klein (i) dat je aantikt, in plaats van als vaste tekst op het scherm.
   Eén uiterlijk voor de Svelte-schermen (src/lib/InfoTeken.svelte) en de planner (infoTeken() in coordinator/index.html).
   Het tikgebied is op een telefoon (smal scherm of een vinger als aanwijzer) 44px via een onzichtbaar vlak rond het (i), zodat het (i)
   zelf klein en rustig blijft (16px, grijs; pas bij aanwijzen of openen in de hoofdkleur). Het tekstvlak is position: fixed: tabellen met overflow en dialogen knippen het dus niet af. */
.info-teken {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 16px; height: 16px; min-width: 0; min-height: 0; margin: 0 0 0 .35em; padding: 0; vertical-align: middle;
  border: 1px solid var(--tekst-zacht); border-radius: 50%; background: transparent; color: var(--tekst-zacht); opacity: .75;
  font: 600 .65rem/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-style: italic; text-transform: none; letter-spacing: 0; cursor: pointer;
}
.info-teken:hover, .info-teken[aria-expanded="true"] { background: var(--primair-zacht); border-color: var(--primair); color: var(--primair); opacity: 1; }
.info-teken:focus-visible { outline: 2px solid var(--primair); outline-offset: 2px; }
@media (max-width: 640px), (pointer: coarse) {
  .info-teken::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
}
.info-vlak {
  position: fixed; z-index: 1000; box-sizing: border-box; width: max-content; max-width: min(320px, calc(100vw - 32px)); overflow-y: auto;
  padding: 10px 12px; background: var(--kaart); color: var(--tekst); border: 1px solid var(--rand); border-radius: 8px; box-shadow: 0 6px 20px rgba(20, 32, 43, .15);
  font: 400 .875rem/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-style: normal; text-align: left; text-transform: none; letter-spacing: 0; white-space: pre-line;
}
.info-vlak[hidden] { display: none; }