/* Planner: donker liquid glass.
   Gloedrecept: zie de classes .gloed-tegel, .gloed-rij, .gloed-kolom en .gloed-chip.
   Regel: nooit glas op glas. Een vak dat alleen groepeert krijgt geen eigen glas. */

/* Geist, lokaal meegeleverd (licentie OFL, zie static/fonts). */
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/geist-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/geist-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/geist-latin-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/static/fonts/geist-latin-700-normal.woff2) format('woff2');
}

:root {
  --pagina: oklch(0.1 0 0);
  --tekst: oklch(0.96 0 0);
  --tekst-zacht: oklch(0.82 0 0);
  --tekst-dim: oklch(0.78 0 0);
  --glas-vulling: oklch(1 0 0 / 0.06);
  --glas-rand: oklch(1 0 0 / 0.12);
  --donker: oklch(0.15 0 0);

  --st-op_schema: oklch(0.8 0.17 155);
  --st-achter: oklch(0.78 0.17 60);
  --st-wacht: oklch(0.74 0.15 245);
  --st-klaar: oklch(0.76 0.12 300);

  --kleur: oklch(0.68 0.19 255);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* color-scheme: dark maakt ook het standaardvlak van de browser donker (anders wit tijdens een paginawissel). */
html { background: var(--pagina); color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Geist', system-ui, sans-serif;
  color: var(--tekst);
  -webkit-font-smoothing: antialiased;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/* De achtergrond is een eigen vaste laag. Met een vaste achtergrond (attachment fixed) tekent de browser hem bij
   elk scrollmoment opnieuw; een fixed laag wordt een keer getekend en blijft staan.
   De pagina-kleur zelf staat op html. De inhoud ligt erboven (z-index -1 is onder body). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 650px at 88% -10%, oklch(0.85 0 0 / 0.55), transparent 60%),
    radial-gradient(min(640px, 48vw) min(420px, 48vh) at -5% 105%, oklch(0.4 0.13 25 / 0.25), transparent 55%),
    var(--pagina);
}
body::-webkit-scrollbar, *::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid oklch(0.96 0 0);
  outline-offset: 2px;
}
h1, h2, p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
button, input { font: inherit; }

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

/* ---------- Glas en gloed ---------- */
.glas {
  background-color: var(--glas-vulling);
  border: 1px solid var(--glas-rand);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.06), 0 12px 32px -16px oklch(0 0 0 / 0.6);
}
/* Echte blur (backdrop-filter) staat ALLEEN op elementen waar inhoud onderdoor schuift: de zwevende
   menupil, open menu's en popovers (.statusmenu, .acties-menu) en eventuele meldingen of een vaste kop.
   Nooit op gewone kaarten, tegels, rijen of kolommen (te zwaar, en achter hen ligt alleen de zachte
   achtergrond, dus de blur is daar niet te zien) en nooit op iets wat animeert. De glaslook van de
   kaarten komt van de doorschijnende vulling, de lichte rand, de inset-lichtrand en de gloed. */

/* Gloedrecept, een keer vastgelegd. De kleur komt uit --kleur. */
.gloed-tegel {
  background-image: radial-gradient(140% 130% at 0% 0%, color-mix(in oklch, var(--kleur) 28%, transparent), transparent 58%);
}
.gloed-rij {
  background-image:
    radial-gradient(70% 120% at 0% 0%, color-mix(in oklch, var(--kleur) 28%, transparent), transparent 70%),
    radial-gradient(50% 100% at 100% 100%, color-mix(in oklch, var(--kleur) 12%, transparent), transparent 70%);
}
.gloed-kolom {
  background-image: radial-gradient(560px 380px at 50% 0%, color-mix(in oklch, var(--kleur) 30%, transparent), transparent 72%);
}
.gloed-chip {
  background-image: radial-gradient(220px 120px at 0% 0%, color-mix(in oklch, var(--kleur) 20%, transparent), transparent 60%);
}
/* Op de pc is een rij breed en laag (.gloed-rij). Op de telefoon is het een tegel (.gloed-tegel). */
@media (max-width: 899px) {
  .rij > .vlak.gloed-rij { background-image: radial-gradient(140% 130% at 0% 0%, color-mix(in oklch, var(--kleur) 22%, transparent), transparent 58%); }
}
/* Gloedrand van een rij op de pc (variant C, gekozen in #6): zachte afloop en iets verder dan het oude recept. */
@media (min-width: 900px) {
  .rij > .vlak.gloed-tegel, .rij > .vlak.gloed-rij { background-image:
    radial-gradient(85% 150% at 0% 0%, color-mix(in oklch, var(--kleur) 28.0%, transparent) 0%, color-mix(in oklch, var(--kleur) 22.4%, transparent) 13%, color-mix(in oklch, var(--kleur) 16.0%, transparent) 26%, color-mix(in oklch, var(--kleur) 10.1%, transparent) 38%, color-mix(in oklch, var(--kleur) 5.3%, transparent) 51%, color-mix(in oklch, var(--kleur) 2.2%, transparent) 64%, color-mix(in oklch, var(--kleur) 0.6%, transparent) 75%, color-mix(in oklch, var(--kleur) 0.0%, transparent) 85%),
    radial-gradient(60% 130% at 100% 100%, color-mix(in oklch, var(--kleur) 12.0%, transparent) 0%, color-mix(in oklch, var(--kleur) 9.6%, transparent) 13%, color-mix(in oklch, var(--kleur) 6.8%, transparent) 26%, color-mix(in oklch, var(--kleur) 4.3%, transparent) 38%, color-mix(in oklch, var(--kleur) 2.3%, transparent) 51%, color-mix(in oklch, var(--kleur) 1.0%, transparent) 64%, color-mix(in oklch, var(--kleur) 0.2%, transparent) 75%, color-mix(in oklch, var(--kleur) 0.0%, transparent) 85%); }
}

/* ---------- Opbouw ---------- */
/* Veilige randen (iPhone met statusbalk, Dynamic Island en thuisbalk, of liggend). Zonder zulke randen zijn ze 0 en
   verandert er niets. De achtergrond (body::before) loopt wel helemaal door tot achter de statusbalk. */
.app { min-height: 100vh; display: flex; gap: 16px; align-items: flex-start;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
/* Menubalk en inhoud staan samen in een gecentreerde schil, zodat ze tegen elkaar aan blijven. */
.schil { flex: 1; min-width: 0; display: flex; gap: 16px; align-items: flex-start; max-width: calc(1360px + 84px + 16px); margin-inline: auto; }
.inhoud { flex: 1; min-width: 0; max-width: 1360px; display: flex; flex-direction: column; gap: 18px; padding: 4px 4px 16px; }

/* Menubalk pc */
.nav-pc {
  flex: 0 0 84px; width: 84px;
  /* Blijft vast staan terwijl de inhoud scrolt. Nooit hoger dan het venster: bij een laag venster scrolt
     de balk zelf, zodat Uitloggen bereikbaar blijft. */
  position: sticky; top: 16px; align-self: flex-start;
  height: calc(100vh - 32px); height: calc(100dvh - 32px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  border-radius: 20px; padding: 14px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.logo { width: 36px; height: 36px; margin-bottom: 14px; display: block; flex: none; }
.nav-vulling { flex: 1; }
.nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 58px; width: 100%; padding: 6px 2px; border-radius: 14px; border: 1px solid transparent;
  font-size: 12px; text-align: center; color: oklch(0.88 0 0);
}
.nav-item.later { color: oklch(0.78 0 0); }
.nav-item:hover { background: oklch(1 0 0 / 0.06); }
.nav-item[aria-current="page"] { color: var(--donker); font-weight: 600; }
/* De witte pil van het actieve item is een eigen element achter het label (zodat hij bij een paginawissel
   kan schuiven, zie "Paginaovergangen"). Het label ligt er altijd boven. */
.nav-item, .pil-item { position: relative; }
.menu-pilvlak { position: absolute; inset: -1px; z-index: 0; border-radius: inherit; background: oklch(0.96 0 0); pointer-events: none; }
.menu-label { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.later-woord { font-size: 12px; color: oklch(0.84 0 0); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; background: oklch(0.72 0.19 15); color: var(--donker);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}
.avatar.klein { width: 22px; height: 22px; font-size: 12px; }

/* Menupil telefoon */
.nav-pil { display: none; }
@media (max-width: 899px) {
  body::before {
    background:
      radial-gradient(900px 520px at 90% -8%, oklch(0.85 0 0 / 0.55), transparent 60%),
      var(--pagina);
  }
  .nav-pc { display: none; }
  .app { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    calc(108px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .inhoud { padding: 0; gap: 14px; }
  .nav-pil {
    display: flex; position: fixed; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom)); z-index: 20;
    height: 68px; align-items: center; justify-content: space-around; gap: 0; padding: 0 4px;
    border-radius: 999px;
    -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
    background-image: radial-gradient(260px 120px at 100% 60%, oklch(0.62 0.15 25 / 0.35), transparent 60%);
    background-color: oklch(1 0 0 / 0.08);
    border-color: oklch(1 0 0 / 0.14);
  }
  .pil-item {
    flex: 1 1 auto; min-width: 0; padding: 0 5px; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; border-radius: 999px; border: 1px solid transparent; font-size: 12px; color: oklch(0.88 0 0);
  }
  .pil-item.later { color: oklch(0.8 0 0); }
  .pil-item .later-woord { font-size: 12px; line-height: 1; margin-top: -2px; }
  .pil-item[aria-current="page"] { color: var(--donker); font-weight: 600; }
  .pil-item .menu-label { gap: 3px; }
  .nav-pil .pil-uit { flex: 1 1 auto; }
}

/* ---------- Gedeelde onderdelen ---------- */
.kop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.kop h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
.onderregel { margin-top: 6px; font-size: 14px; color: var(--tekst-dim); }
@media (max-width: 899px) {
  .kop { align-items: center; flex-wrap: wrap; }
  .kop h1 { font-size: 28px; }
  .onderregel { font-size: 12px; margin-top: 2px; }
}

.knop-wit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px;
  border: 0; border-radius: 999px; background: oklch(0.96 0 0); color: var(--donker);
  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.knop-wit.klein { height: 36px; padding: 0 14px; font-size: 14px; }
.knop-stil {
  height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent;
  color: oklch(0.88 0 0); font-size: 14px; cursor: pointer;
}
.knop-vlak {
  display: flex; align-items: center; gap: 8px; min-height: 44px; width: 100%; padding: 0 12px;
  border-radius: 12px; border: 0; background: oklch(1 0 0 / 0.08); color: oklch(0.94 0 0);
  font-size: 14px; font-weight: 600; cursor: pointer;
}

.formulier {
  border-radius: 18px; padding: 16px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 20px;
}
.formulier .veld { flex: 1 1 240px; }
.veld { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--tekst-zacht); }
.veld input {
  height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid oklch(1 0 0 / 0.2);
  background: oklch(0.1 0 0 / 0.5); color: var(--tekst); font-size: 16px; color-scheme: dark;
}
.formulier-knoppen { display: flex; gap: 8px; align-items: center; }
.fout { font-size: 13px; color: oklch(0.85 0.12 50); }
.hulp { flex-basis: 100%; font-size: 12px; color: var(--tekst-dim); }

.kleurkiezer { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; }
.kleurkiezer legend { font-size: 13px; color: var(--tekst-zacht); padding: 0; margin-bottom: 6px; float: left; width: 100%; }
.kleurkeuze { position: relative; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.kleurkeuze input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.kleurkeuze span:first-of-type { width: 24px; height: 24px; border-radius: 50%; display: block; }
.kleurkeuze input:checked + span { box-shadow: 0 0 0 2px oklch(0.1 0 0), 0 0 0 4px oklch(0.96 0 0); }
.kleurkeuze input:focus-visible + span { outline: 2px solid oklch(0.96 0 0); outline-offset: 4px; }
@media (max-width: 899px) { .kleurkeuze { width: 44px; height: 44px; } }

.stip { flex: none; width: 12px; height: 12px; border-radius: 50%; display: block; }
.stip.groot { width: 16px; height: 16px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; white-space: nowrap; color: oklch(0.9 0 0); background: oklch(1 0 0 / 0.1);
}
.chip.verlopen { font-weight: 600; color: oklch(0.82 0.16 60); background: oklch(0.78 0.17 60 / 0.2); }

.statuslabel, .statusknop {
  --st: var(--st-op_schema);
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 7px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--st); background: color-mix(in oklch, var(--st) 20%, transparent);
}
.st-op_schema { --st: var(--st-op_schema); }
.st-achter { --st: var(--st-achter); }
.st-wacht { --st: var(--st-wacht); }
.st-klaar { --st: var(--st-klaar); }

.balk { display: block; height: 6px; border-radius: 999px; background: oklch(1 0 0 / 0.14); overflow: hidden; }
/* De voortgang is een volle balk die met transform wordt ingekort (--p is het percentage): zo loopt hij
   vloeiend door zonder dat de breedte verandert (alleen transform en opacity animeren). */
.balk > span { display: block; width: 100%; height: 100%; border-radius: 999px; background: var(--kleur);
  transform: scaleX(calc(var(--p, 0) / 100)); transform-origin: 0 50%; }
.balk.smal { height: 5px; }
.teller { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: oklch(0.92 0 0); }

.leeg { color: var(--tekst-zacht); font-size: 15px; padding: 24px 4px; }
.leeg.klein { font-size: 13px; padding: 4px 2px; }

/* ---------- Projecten ---------- */
.lijst { display: flex; flex-direction: column; gap: 8px; }
.lijstkop, .rij {
  display: grid;
  grid-template-columns: 14px minmax(100px, 1fr) 150px minmax(140px, 1.5fr) 150px 110px;
  gap: 14px; align-items: center;
}
.lijstkop { padding: 6px 20px; font-size: 12px; color: oklch(0.8 0 0); margin-bottom: 2px; }
.rij { position: relative; isolation: isolate; border: 1px solid transparent; padding: 16px 18px; border-radius: 14px; }
.rij:hover > .vlak { border-color: oklch(1 0 0 / 0.22); }
.r-naam { font-size: 15px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.r-volgende { font-size: 14px; line-height: 1.3; min-width: 0; }
.r-andere { display: block; font-size: 12px; color: oklch(0.8 0 0); }
.r-voortgang { display: flex; align-items: center; gap: 8px; }
.r-voortgang .balk { flex: 1; }
.r-voortgang .teller { font-size: 12px; font-weight: 400; color: oklch(0.9 0 0); }
.r-ring { display: none; }

.loopt-achter {
  border: 1.5px solid oklch(0.78 0.17 60 / 0.85);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.06), 0 0 24px oklch(0.78 0.17 60 / 0.25);
}

@media (max-width: 899px) {
  .lijstkop { display: none; }
  .lijst { gap: 10px; }
  .rij {
    grid-template-columns: 12px 1fr 48px; gap: 6px 10px; padding: 12px 14px; border-radius: 18px;
    grid-template-areas: "stip naam ring" ". status ring" ". volgende ring" ". datum ring";
    align-items: center;
  }
  .rij .stip { grid-area: stip; width: 11px; height: 11px; }
  .r-naam { grid-area: naam; font-size: 16px; }
  .r-status { grid-area: status; justify-self: start; }
  .r-volgende { grid-area: volgende; }
  .r-datum { grid-area: datum; }
  .r-voortgang { display: none; }
  .r-ring { grid-area: ring; display: block; position: relative; width: 48px; height: 48px; align-self: center; }
  .r-ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .r-datum .chip { padding: 0; background: none; font-size: 12px; color: oklch(0.85 0 0); }
  .r-datum .chip.verlopen { background: none; }
  .loopt-achter { box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.06), 0 0 24px oklch(0.78 0.17 60 / 0.25); }
}

/* ---------- Projectbord ---------- */
.bord { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.bord-kop { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
/* Onzichtbaar vlak achter de kop: hier groeit de tegel van het dashboard of de rij uit Projecten naartoe. */
.kop-vlak { position: absolute; inset: 0; pointer-events: none; }
.bord-titel { display: flex; flex-direction: column; gap: 6px; flex: 1 1 320px; min-width: 0; }
.terug { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-size: 13px; color: oklch(0.85 0 0); align-self: flex-start; }
.terug:hover { color: var(--tekst); }
.titelrij { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.titelrij h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.statuswissel { position: relative; }
.statusknop { min-height: 36px; padding: 0 10px; border: 0; font-size: 13px; cursor: pointer; }
.statusmenu, .acties-menu {
  position: absolute; z-index: 15; top: calc(100% + 6px); left: 0; min-width: 220px; padding: 6px; border-radius: 14px;
  background: oklch(0.2 0 0 / 0.94); border: 1px solid oklch(1 0 0 / 0.16);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 16px 40px -12px oklch(0 0 0 / 0.8);
}
.menu-optie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 40px; padding: 0 12px;
  border: 0; border-radius: 10px; background: transparent; color: var(--tekst); font-size: 14px; cursor: pointer; text-align: left;
}
.menu-optie:hover { background: oklch(1 0 0 / 0.1); }
.menu-auto { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; font-size: 13px; color: var(--st-achter); border-top: 1px solid oklch(1 0 0 / 0.1); margin-top: 4px; }
.menu-auto span { color: var(--tekst-zacht); }

.bord-voortgang { flex: 0 1 220px; min-width: 160px; }
.voortgangtekst { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.voortgangtekst span:first-child { color: var(--tekst-zacht); }
.voortgangtekst span:last-child { font-variant-numeric: tabular-nums; }

.kolommen-wrap { overflow-x: auto; padding: 4px 0; }
.kolommen { display: flex; gap: 16px; align-items: flex-start; }
.kolom {
  position: relative; flex: 1 1 0; min-width: 290px; border-radius: 16px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.kolom-kop-blok { display: flex; flex-direction: column; gap: 8px; }
.open-lijst, .klaarblok { display: flex; flex-direction: column; gap: 10px; }
.open-lijst:not(:has(.stap)), .klaarblok:not(:has(button)) { display: none; }
.kolom-kop { display: flex; align-items: center; gap: 8px; padding: 2px 2px 0; }
.kolom-kop h2 { font-size: 16px; font-weight: 600; flex: 1; overflow-wrap: anywhere; }

.stap { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid oklch(1 0 0 / 0.1); }
.stap.volgende { border-color: oklch(1 0 0 / 0.32); }
.stap-label { font-size: 12px; font-weight: 600; color: oklch(0.92 0 0); letter-spacing: 0.02em; }
.stap-rij { display: flex; align-items: flex-start; gap: 10px; }
.stap-rij form { flex: none; display: flex; }
.stap-tekst { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; padding-top: 1px; overflow-wrap: anywhere; }
.stap.afgerond .stap-tekst { text-decoration: line-through; color: oklch(0.8 0 0); }

.vink {
  flex: none; width: 32px; height: 32px; margin: -4px; padding: 0; border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--donker);
}
.vak { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid oklch(0.78 0 0); }
.vak.aan { background: oklch(0.96 0 0); border-color: oklch(0.96 0 0); }
.vink:hover .vak { border-color: oklch(0.96 0 0); }

.klapknop {
  display: flex; align-items: center; gap: 8px; min-height: 44px; width: 100%; padding: 0 12px; border-radius: 12px; border: 0;
  background: oklch(1 0 0 / 0.05); color: oklch(0.88 0 0); font-size: 13px; cursor: pointer; text-align: left;
}
.klapknop svg:first-child { color: var(--st-op_schema); }
.klapknop span:first-of-type { flex: 1; }
.klapknop .pijl { display: flex; transition: transform 0.15s; }
.klapknop[aria-expanded="true"] .pijl { transform: rotate(180deg); }
.klaar-lijst { display: flex; flex-direction: column; gap: 8px; }

.stap-formulier { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.stap-formulier .veld { width: 100%; }

.tabs { display: none; }
@media (max-width: 899px) {
  .titelrij h1 { font-size: 28px; }
  .statusknop { min-height: 44px; padding: 0 12px; }
  .onderdeel-knop-pc { display: none; }
  .bord { gap: 12px; }
  .bord-kop { gap: 10px; }
  .terug { min-height: 44px; padding: 0 14px 0 8px; border-radius: 999px; border: 1px solid oklch(1 0 0 / 0.16); background: oklch(1 0 0 / 0.07); font-size: 14px; }
  .bord-voortgang { flex: 1 1 100%; }
  .tabs { display: flex; gap: 6px; align-items: stretch; }
  .tab {
    position: relative; isolation: isolate;
    flex: 1 1 auto; min-width: 0; min-height: 56px; padding: 6px 4px; border-radius: 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    color: oklch(0.94 0 0); border: 1px solid oklch(1 0 0 / 0.12); cursor: pointer;
    background-color: var(--glas-vulling);
    background-image: radial-gradient(160px 90px at 50% 0%, color-mix(in oklch, var(--kleur) 35%, transparent), transparent 70%);
  }
  .tab-naam { font-size: 13px; font-weight: 600; line-height: 1.1; }
  .tab-teller { font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; }
  .tab[aria-current="true"] { background: transparent; background-image: none; color: var(--donker); border-color: var(--kleur); }
  /* De gevulde achtergrond van het gekozen tabblad is een eigen element (net als de menupil), zodat hij bij
     een paginawissel kan meeglijden (view-transition-name actieve-tab). Per pagina staat er maar een. */
  .tab-vlak { position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--kleur); pointer-events: none;
    view-transition-name: actieve-tab; }
  .tab.tab-plus {
    flex: none; min-width: 44px; padding: 6px 10px; font-size: 13px; font-weight: 600;
    background-image: none; background-color: oklch(1 0 0 / 0.08);
  }
  .kolommen-wrap { overflow: visible; padding: 0; }
  .kolommen { display: block; }
  .kolom { display: none; min-width: 0; }
  .kolom.gekozen { display: flex; }
  .vink { width: 44px; height: 44px; margin: -10px; }
  .stap-rij { gap: 12px; }
  .stap-tekst { font-size: 15px; padding-top: 2px; }
  .stap-label { font-size: 12px; }
  .knop-vlak { min-height: 48px; justify-content: center; background: oklch(0.96 0 0); color: var(--donker); }
}
@media (min-width: 900px) {
  .tab-plus { display: none; }
}

/* ---------- Menu's en kleine icoonknoppen ---------- */
.acties { position: relative; z-index: 3; flex: none; }
.acties-menu { left: auto; right: 0; min-width: 190px; }
.acties-menu form { display: block; }
.acties-menu.menu-links { right: auto; left: 0; }
.statusmenu { transform-origin: 0 0; }
.acties-menu { transform-origin: 100% 0; }
.acties-menu.menu-links { transform-origin: 0 0; }
.archief-balk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 18px; border-radius: 14px; font-size: 14px; }
.archief-balk form { display: flex; }
.icoonknop {
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: oklch(1 0 0 / 0.08); color: oklch(0.92 0 0);
}
.icoonknop:hover { background: oklch(1 0 0 / 0.16); }
:is(.tegel, .nu-eerst, .kolom, .bord-kop):has(.acties-menu:not([hidden])) { position: relative; z-index: 12; }
.knop-rand {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px;
  border: 1px solid oklch(1 0 0 / 0.26); border-radius: 999px; background: transparent;
  color: oklch(0.94 0 0); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.knop-rand.klein { height: 36px; padding: 0 14px; }
.knop-rand:hover { background: oklch(1 0 0 / 0.08); }
.kop-knoppen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.tip { font-size: 13px; color: var(--tekst-zacht); padding: 2px 4px; }

/* Bewerken en hernoemen */
.stap-onder { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.stap-acties { display: flex; align-items: center; gap: 2px; margin: -4px -4px -4px 0; }
.stap-acties form { display: flex; }
.stap-bewerk, .hernoem-formulier { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.stap-bewerk .veld, .hernoem-formulier .veld { width: 100%; }
.stap.afgerond .icoonknop { flex: none; margin: -4px -4px -4px 0; }

/* ---------- Gearchiveerd ---------- */
.archief-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 18px; border-radius: 14px; }
.archief-rij .r-naam { flex: 1 1 160px; }
.archief-acties { display: flex; gap: 8px; margin-left: auto; }
.archief-acties form { display: flex; }

/* ---------- Dashboard ---------- */
.gloed-groot {
  background-image: radial-gradient(85% 120% at 0% 0%, color-mix(in oklch, var(--kleur) 28%, transparent), transparent 58%);
}
.gloed-tegel.gedimd {
  background-image: radial-gradient(140% 130% at 0% 0%, color-mix(in oklch, var(--kleur) 10%, transparent), transparent 58%);
}
/* Bovenbalk in de projectkleur, als bovenste achtergrondlaag van de kaart zelf.
   Zo valt hij binnen de afgeronde hoeken en de rand, zoals in het gekozen ontwerp. */
.nu-eerst > .vlak.gloed-groot, .daarna-tegel > .vlak.gloed-tegel, .lopend-tegel > .vlak.gloed-tegel {
  --balk: 6px;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-position: 0 0, 0 0;
  background-size: 100% var(--balk), 100% 100%;
}
.nu-eerst > .vlak.gloed-groot { --balk: 8px; }
.nu-eerst > .vlak.gloed-groot, .daarna-tegel > .vlak.gloed-tegel, .lopend-tegel > .vlak.gloed-tegel {
  --balklaag: linear-gradient(var(--kleur), var(--kleur));
}
.nu-eerst > .vlak.gloed-groot {
  background-image: var(--balklaag), radial-gradient(85% 120% at 0% 0%, color-mix(in oklch, var(--kleur) 34%, transparent), transparent 58%);
}
.daarna-tegel > .vlak.gloed-tegel, .lopend-tegel > .vlak.gloed-tegel {
  background-image: var(--balklaag), radial-gradient(140% 130% at 0% 0%, color-mix(in oklch, var(--kleur) 28%, transparent), transparent 58%);
}
.lopend-tegel > .vlak.gloed-tegel.gedimd {
  background-image: var(--balklaag), radial-gradient(140% 130% at 0% 0%, color-mix(in oklch, var(--kleur) 10%, transparent), transparent 58%);
}
.dash-kop { align-items: flex-end; }
.tellers { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.teller-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 8px; border-radius: 999px;
  white-space: nowrap; font-size: 13px; min-width: 0;
  background: color-mix(in oklch, var(--st) 14%, transparent);
}
.teller-chip:not(.loopt-achter) { border: 1px solid color-mix(in oklch, var(--st) 50%, transparent); }
.teller-icoon {
  flex: none; display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center;
  color: var(--st); background: color-mix(in oklch, var(--st) 24%, transparent);
}
.teller-label { color: oklch(0.92 0 0); }
.teller-aantal { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }

.hoofdrij { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.nu-eerst { isolation: isolate; border: 1px solid transparent; }
.nu-eerst, .alles-af {
  position: relative; flex: 2 1 460px; min-width: 0; border-radius: 24px; padding: 36px 32px 32px;
  display: flex; flex-direction: column; gap: 18px;
}
.alles-af h2 { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.hulp-tekst { font-size: 14px; color: var(--tekst-zacht); max-width: 520px; line-height: 1.45; }
.ne-kop { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.ne-label { font-size: 13px; font-weight: 600; padding: 4px 14px; border-radius: 999px; background: oklch(1 0 0 / 0.1); border: 1px solid oklch(1 0 0 / 0.18); }
.ne-naam { font-size: 18px; font-weight: 600; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ne-stap { font-size: 44px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; max-width: 560px; overflow-wrap: anywhere; }
.ne-aftel { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.verlopen.ne-aftel, .verlopen.dt-aftel, .verlopen.lt-datum { color: oklch(0.82 0.16 60); }
.ne-regel { font-size: 14px; color: oklch(0.85 0 0); }
.ne-voet { margin-top: auto; padding-top: 6px; display: flex; }
.knop-wit.groot { height: 48px; padding: 0 24px; font-size: 15px; }

/* Een tegel is een vlak met een uitgerekte link: de hele tegel opent het projectbord. */
.tegel { position: relative; isolation: isolate; border: 1px solid transparent; border-radius: 20px; }
/* Het glas van een projecttegel (of rij) is een eigen vlak achter de tekst, zonder tekst erin. Alleen dat
   vlak krijgt bij een paginawissel de view-transition-name (zie hieronder), zodat het kan groeien tot de
   kop van het projectbord zonder dat tekst uitrekt. */
.vlak { position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none; }
.tegel-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.daarna { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.daarna h2, .sectiekop { font-size: 18px; font-weight: 600; padding: 0 4px; }
.daarna h2 { color: oklch(0.88 0 0); }
.sectiekop { margin-bottom: 12px; }
.daarna-tegel { flex: 1; padding: 24px 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.dt-kop { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.dt-naam { font-size: 16px; font-weight: 600; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.dt-aftel { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.dt-stap { font-size: 15px; }
.zacht { color: oklch(0.82 0 0); }

.lopend-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.lopend-raster > li { display: flex; min-width: 0; }
.lopend-tegel { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 14px 14px; border-radius: 18px; }
.lt-kop { display: flex; align-items: center; gap: 8px; align-self: stretch; }
.lt-naam { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.lt-stap {
  font-size: 13px; line-height: 1.3; min-height: 34px; color: oklch(0.92 0 0);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lt-voet { display: flex; align-items: center; justify-content: space-between; gap: 8px; align-self: stretch; margin-top: auto; }
.lt-datum { font-size: 12px; color: oklch(0.85 0 0); min-width: 0; }
.ring { position: relative; flex: none; display: inline-block; }
.ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }

.leeg-scherm {
  max-width: 560px; width: 100%; margin: 24px auto 0; padding: 48px 28px; border-radius: 24px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
}
.leeg-tekst { font-size: 20px; line-height: 1.35; }
.leeg-tekst strong { font-weight: 700; }

@media (max-width: 1100px) {
  .lopend-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .dash-kop { flex-direction: column; align-items: stretch; gap: 12px; }
  .tellers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 2px; }
  .teller-chip { padding: 0 10px 0 8px; gap: 6px; }
  .nu-eerst, .alles-af { flex: none; width: 100%; padding: 26px 20px 20px; gap: 10px; border-radius: 24px; }
  .alles-af h2 { font-size: 26px; }
  .ne-label { font-size: 12px; padding: 3px 12px; }
  .ne-naam { font-size: 16px; }
  .ne-stap { font-size: 28px; }
  .ne-aftel { font-size: 24px; }
  .ne-regel { font-size: 13px; }
  .ne-voet .knop-wit { flex: 1; }
  .daarna { flex: none; width: 100%; gap: 8px; }
  .daarna-tegel { padding: 18px 16px 14px; gap: 4px; flex: none; }
  .dt-naam { font-size: 15px; }
  .dt-aftel { font-size: 22px; }
  .dt-stap { font-size: 14px; }
  .lopend-raster {
    display: flex; gap: 8px; overflow-x: auto; margin: -20px -16px; padding: 20px 16px; align-items: stretch;
    scroll-snap-type: x proximity;
  }
  .lopend-raster > li { flex: 0 0 168px; scroll-snap-align: start; }
  .icoonknop { width: 44px; height: 44px; }
  .acties .icoonknop { margin: -8px -8px -8px 0; }
  .stap-acties { margin: -6px -8px -6px 0; }
  .menu-optie { min-height: 44px; }
  .knop-rand { height: 44px; }
  .kop-knoppen { width: 100%; }
  .leeg-scherm { padding: 36px 20px; margin-top: 8px; }
  .leeg-tekst { font-size: 18px; }
}

/* Naamregels in tegels: breek op woordgrens, en houd ruimte voor de naam. */
.ne-naam, .dt-naam, .lt-naam { overflow-wrap: break-word; }
.lt-kop { gap: 6px; }
.lt-kop .icoonknop { width: 26px; height: 26px; }
@media (max-width: 899px) {
  .ne-naam { flex: 1 1 110px; }
  .lopend-raster > li { flex: 0 0 192px; }
  .lt-kop .icoonknop { width: 44px; height: 44px; margin: -10px -10px -10px 0; }
}

/* Nu eerst op de telefoon: het menuknopje staat rechtsboven in de eerste regel. */
@media (max-width: 899px) {
  .nu-eerst .ne-kop { padding-right: 36px; min-height: 26px; }
  .nu-eerst .ne-kop > .acties { position: absolute; top: 17px; right: 12px; }
  .nu-eerst .ne-kop > .acties .icoonknop { margin: 0; }
}

/* ---------- Deze week ---------- */
.deze-week { margin-top: 28px; }
.week-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 20px; margin: 0 4px 12px; }
.week-kop h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 12px; color: oklch(0.86 0 0); list-style: none; }
.legenda li { display: inline-flex; align-items: center; gap: 7px; }
.stip.klein { width: 9px; height: 9px; }
.stip-gloed { background: oklch(0.68 0.19 255); box-shadow: 0 0 8px oklch(0.68 0.19 255 / 0.7); }
.week-leeg { font-size: 14px; color: var(--tekst-zacht); padding: 8px 4px; }
.week-leeg a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Het vak groepeert alleen: geen eigen glas, want de kolommen zijn al glas. */
.week-vak { overflow-x: auto; margin: -24px -4px; padding: 24px 4px; }
.week-rij { min-width: 1040px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.week-kolom {
  display: flex; flex-direction: column; gap: 8px; min-height: 210px; padding: 8px; border-radius: 16px; box-sizing: border-box; min-width: 0;
}
.week-kolom.te-laat {
  background-image: radial-gradient(240px 200px at 50% 0%, oklch(0.78 0.17 60 / 0.22), transparent 65%);
}
.week-kolom.is-vandaag { border: 1.5px solid oklch(0.96 0 0); }
.week-kolom.is-voorbij { background-color: oklch(1 0 0 / 0.02); }
.wk-kop { display: flex; flex-direction: column; gap: 3px; padding: 2px 2px 4px; }
.wk-label { font-size: 15px; font-weight: 600; margin: 0; line-height: inherit; }
.wk-sub { font-size: 12px; color: oklch(0.8 0 0); }
.te-laat .wk-label { color: oklch(0.82 0.16 60); }
.wk-vandaag {
  align-self: flex-start; font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 999px;
  background: oklch(0.96 0 0); color: var(--donker);
}
.wk-leeg { font-size: 12px; color: oklch(0.78 0 0); padding: 2px; }
.week-chip {
  display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 12px; text-decoration: none; color: var(--tekst);
  border: 1px solid oklch(1 0 0 / 0.14); min-width: 0;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.06), 0 0 18px color-mix(in oklch, var(--kleur) 22%, transparent);
}
.week-chip:hover { border-color: oklch(1 0 0 / 0.3); }
.wc-wie { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.wc-wie .stip { flex: 0 0 auto; margin-top: 3px; }
.wc-wie .stip { box-shadow: 0 0 8px color-mix(in oklch, var(--kleur) 70%, transparent); }
.wc-naam {
  font-size: 12px; color: oklch(0.88 0 0); line-height: 1.2; min-width: 0;
  /* Breekt tussen woorden (bij de komma of spatie). Een lang woord eventueel met streepje, nooit zonder.
     Past het niet in twee regels, dan volgt een afkapping met een weglatingsteken (de volledige tekst staat in title). */
  hyphens: auto; overflow-wrap: normal; word-break: normal;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wc-stap { font-size: 13px; font-weight: 600; line-height: 1.3; hyphens: auto; overflow-wrap: break-word; }
.wc-datum { font-size: 12px; color: oklch(0.82 0.16 60); }
@media (max-width: 899px) {
  .deze-week { margin-top: 24px; }
  .week-vak { margin: -24px -16px; padding: 24px 16px; }
  .week-rij { min-width: 0; width: max-content; display: flex; gap: 8px; align-items: flex-start; }
  .week-kolom { flex: 0 0 140px; min-height: 150px; padding: 10px; }
  .week-chip { min-height: 44px; padding: 9px 10px; }
  /* Voorbije dagen zijn leeg (hun stappen staan onder Te laat): op de telefoon niet tonen,
     zodat Te laat en Vandaag altijd naast elkaar vooraan staan. Op de pc blijven ze gedimd staan. */
  .week-kolom.is-voorbij { display: none; }
}

/* ---------- Inloggen, rollen ---------- */
.inlogkaart {
  width: 100%; max-width: 400px; margin: 12vh auto 0; padding: 32px 28px; border-radius: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.inlogkaart .logo { margin-bottom: 0; }
.inlogkaart h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.inlogformulier { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.inlogformulier .knop-wit { width: 100%; }
.inlogformulier .fout { font-size: 14px; }
@media (max-width: 899px) { .inlogkaart { margin-top: 8vh; padding: 28px 20px; } }

.infobalk {
  align-self: flex-start; padding: 8px 14px; border-radius: 999px; font-size: 13px; color: var(--tekst-zacht);
  background: oklch(1 0 0 / 0.06); border: 1px solid var(--glas-rand);
}
@media (max-width: 899px) { .infobalk { font-size: 12px; } }

/* Knoppen in het menu die er als menu-items uitzien */
.nav-uit, .pil-uit { display: flex; }
.nav-uit { width: 100%; }
.pil-uit { flex: 1; min-width: 0; }
button.nav-item, button.pil-item { background: transparent; cursor: pointer; }

/* Afvinkvakje van een kijker: alleen zichtbare status, niet klikbaar */
.vink.statisch { cursor: default; }
.vink.statisch:hover .vak { border-color: oklch(0.78 0 0); }
.vink.statisch .vak.aan, .vink.statisch:hover .vak.aan { border-color: oklch(0.96 0 0); }

/* ---------- Paginaovergangen (cross-document View Transitions) ----------
   Werkt in Chrome en Edge vanaf 126 en in Safari vanaf 18.2. Firefox kent het nog niet en toont gewoon een
   paginawissel (niets gaat stuk). Er is geen JavaScript voor nodig om de overgang te starten, dus de
   CSP (script-src 'self') blijft zoals ze is.
   Bronnen: developer.chrome.com/docs/web-platform/view-transitions/cross-document en
   jakearchibald.com/2024/view-transitions-handling-aspect-ratio-changes */
@view-transition { navigation: auto; }

/* Standaard: een korte cross-fade van de hele pagina. */
::view-transition-group(*) { animation-duration: 220ms; }

/* Actieve menu-item: de witte pil schuift naar zijn nieuwe plek, met een lichte overshoot ("Uitbundig").
   Alleen de pil (een leeg vlak) heeft deze naam, de labels hebben een eigen vaste naam en liggen erboven,
   dus icoon en tekst rekken niet uit. Beide menu's (pc en telefoon) gebruiken dezelfde naam; er is er
   altijd maar een zichtbaar. */
.menu-pilvlak { view-transition-name: actief-menu; view-transition-class: menu-pil; }
.menu-label { view-transition-class: menu-label; }
::view-transition-group(actief-menu) {
  animation-duration: 380ms;
  animation-timing-function: cubic-bezier(.34, 1.3, .64, 1);
}
/* De oude en de nieuwe pil zijn even groot en even wit: alleen de nieuwe tonen, zonder fade. */
::view-transition-old(actief-menu), ::view-transition-new(actief-menu) {
  animation: none; mix-blend-mode: normal; height: 100%;
}
::view-transition-old(actief-menu):not(:only-child) { display: none; }
/* Komt of gaat de pil alleen (pagina zonder actief item): gewoon in- of uitfaden. */
::view-transition-old(actief-menu):only-child { animation: vt-uit 220ms both; }
::view-transition-new(actief-menu):only-child { animation: vt-in 220ms both; }
@keyframes vt-uit { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* Project: het glasvlak van de tegel (of rij) groeit uit tot de kop van het projectbord, en andersom.
   De naam project-<id> staat op het bord vast op .kop-vlak. Op het dashboard en in Projecten zet app.js
   hem vlak voor de navigatie op het vlak waarop geklikt is, zodat een project dat tweemaal op een pagina
   staat nooit twee keer dezelfde naam heeft. Het vlak bevat geen tekst. De tekst doet mee met de
   cross-fade van de hele pagina en wordt dus niet uitgerekt. */
.vlak, .kop-vlak { view-transition-class: project; }
::view-transition-group(*.project) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(.34, 1.2, .64, 1);
}
/* Standaard houdt het beeld zijn verhouding aan; het vlak moet de hele groep vullen. */
::view-transition-old(*.project), ::view-transition-new(*.project) {
  height: 100%; width: 100%; object-fit: fill; overflow: clip;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Tabs op de telefoon: de gevulde achtergrond glijdt mee naar het nieuwe tabblad. De oude en de nieuwe
   achtergrond hebben een eigen kleur en lopen in elkaar over, dus de kleur glijdt mee. */
::view-transition-group(actieve-tab) {
  animation-duration: 340ms;
  animation-timing-function: cubic-bezier(.34, 1.3, .64, 1);
}
::view-transition-old(actieve-tab), ::view-transition-new(actieve-tab) { height: 100%; width: 100%; object-fit: fill; }

/* ---------- Animaties (animaties.js) ----------
   Regels: alleen transform en opacity animeren, nooit backdrop-filter op iets wat beweegt, will-change
   alleen tijdens een animatie (dat zet animaties.js), alles rustiger bij prefers-reduced-motion.
   Voor kijkers (body[data-kijker]) gelden alleen de navigatie- en menu-animaties. */

/* Knoppen: indrukken naar 0.94, verend terug met een kleine overshoot, een lichtgolf vanaf het tikpunt
   (.rip, door animaties.js) en op de pc een gloed die de muis volgt (--mx en --my). De uitgerekte
   tegel-link blijft buiten schot: een transform zou zijn klikvlak over de hele tegel laten krimpen. */
body:not([data-kijker]) :is(.knop-wit, .knop-rand, .knop-vlak):not(.tegel-link) {
  position: relative; isolation: isolate; overflow: hidden; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform 260ms cubic-bezier(.3, 1.8, .5, 1), background-color 150ms;
}
body:not([data-kijker]) :is(.knop-wit, .knop-rand, .knop-vlak):not(.tegel-link):active {
  transform: scale(0.94); transition-duration: 100ms, 150ms; transition-timing-function: ease-out;
}
.rip { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, oklch(1 0 0 / 0.55), transparent 65%); }
.knop-wit .rip { background: radial-gradient(circle, oklch(0.1 0 0 / 0.3), transparent 65%); }
@media (hover: hover) and (pointer: fine) {
  body:not([data-kijker]) :is(.knop-wit, .knop-rand, .knop-vlak):not(.tegel-link)::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
    transition: opacity 150ms;
    background: radial-gradient(110px circle at var(--mx, 30%) var(--my, 0%), var(--gloed, oklch(1 0 0 / 0.3)), transparent 70%);
  }
  body:not([data-kijker]) .knop-wit:not(.tegel-link)::before { --gloed: oklch(0.72 0.03 25 / 0.55); }
  body:not([data-kijker]) :is(.knop-wit, .knop-rand, .knop-vlak):not(.tegel-link):hover::before { opacity: 1; }
}

/* Afvinken en verwijderen: het kaartje gaat weg (vervagen, licht kleiner, iets omhoog) tijdens de swap-delay van
   HTMX (class htmx-swapping). Bij afvinken wacht hij 70 ms, zodat het vinkje eerst te zien is. */
.stap.htmx-swapping { opacity: 0; transform: translateY(-6px) scale(0.96); pointer-events: none;
  transition: opacity 200ms ease-out, transform 200ms ease-out; }
.stap.pop-bezig.htmx-swapping { transition-delay: 70ms; }
/* Tegel, rij of kolom die wordt verwijderd of gearchiveerd (animaties.js zet de class vlak voor de swap). */
.uitloop { opacity: 0; transform: scale(0.96); pointer-events: none; transition: opacity 220ms ease-out, transform 220ms ease-out; }

.deeltje { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; pointer-events: none; z-index: 3; }
.rol { display: inline-block; position: relative; clip-path: inset(0); }
.rol-oud { position: absolute; left: 0; top: 0; white-space: nowrap; }
.rol-nieuw { display: inline-block; }
/* Lichtgolf en nagloed over een kolom die helemaal af is: een eigen laag met afgeronde hoeken. */
.golf-laag { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 4; }
.golf { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, oklch(1 0 0 / 0.22) 50%, transparent 70%); }
.nagloed { position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(90% 80% at 50% 100%, color-mix(in oklch, var(--kleur) 75%, transparent), transparent 78%); }

/* Menu's: de drie puntjes draaien 90 graden. Een menu dat beweegt heeft geen blur (de vulling is bijna dicht). */
.icoonknop[aria-haspopup="true"] svg { transition: transform 250ms cubic-bezier(.34, 1.56, .64, 1); }
.icoonknop[aria-haspopup="true"][aria-expanded="true"] svg { transform: rotate(90deg); }
.menu-beweegt { -webkit-backdrop-filter: none; backdrop-filter: none; }

@media (prefers-reduced-motion: reduce) {
  body:not([data-kijker]) :is(.knop-wit, .knop-rand, .knop-vlak):not(.tegel-link) { transition: background-color 150ms; }
  body:not([data-kijker]) :is(.knop-wit, .knop-rand, .knop-vlak):not(.tegel-link):active { transform: none; }
  .stap.htmx-swapping, .uitloop { transform: none; transition: opacity 120ms linear; }
  .stap.pop-bezig.htmx-swapping { transition-delay: 0s; }
  .icoonknop[aria-haspopup="true"] svg { transition: none; }
  .icoonknop[aria-haspopup="true"][aria-expanded="true"] svg { transform: none; }
}

/* Programmatische focus (animaties.js, na een wissel): koppen krijgen geen focusrand, ze zijn geen bedieningselement. */
h1[tabindex="-1"]:focus, .kolom-kop h2[tabindex="-1"]:focus { outline: none; }

/* Korte melding (bijvoorbeeld: het project bestaat niet meer). Vlak, zonder blur. */
.melding-toast { position: fixed; left: 50%; bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px)); transform: translateX(-50%); z-index: 50; max-width: calc(100vw - 32px);
  padding: 12px 18px; border-radius: 12px; border: 1px solid oklch(1 0 0 / 0.2); background: oklch(0.26 0.01 260 / 0.97);
  color: oklch(0.96 0 0); font-size: 14px; text-align: center; }

/* ---------- Agenda ---------- */
.ag-kop { align-items: center; }
.ag-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.ag-bladeren { display: flex; align-items: center; gap: 6px; }
.ag-pijl {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1px solid oklch(1 0 0 / 0.14); background: oklch(1 0 0 / 0.08); color: var(--tekst);
}
.ag-pijl:hover { background: oklch(1 0 0 / 0.16); }
.ag-weektitel { font-size: 15px; font-weight: 600; padding: 0 6px; white-space: nowrap; }
.ag-vandaag { text-decoration: none; }

.afspraak-formulier { border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.af-kop { font-size: 16px; font-weight: 600; }
.af-velden { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 20px; }
.af-velden .veld { flex: 1 1 150px; min-width: 0; }
.af-velden .af-titel { flex: 2 1 280px; }
.af-velden .hulp, .af-velden .af-fout { flex-basis: 100%; }
.af-annuleer { display: inline-flex; align-items: center; }
.af-weg { display: flex; }
.veld input[aria-invalid="true"] { border-color: oklch(0.85 0.12 50); }

/* Afspraak: een neutraal glazen blok met een klokje. Kleur is er alleen voor stappen uit projecten. */
.ag-afspraak {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 5px 6px; border-radius: 10px; overflow: hidden;
  color: oklch(0.94 0 0); background: oklch(1 0 0 / 0.09); border: 1px solid oklch(1 0 0 / 0.14);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.06);
}
a.ag-afspraak:hover { border-color: oklch(1 0 0 / 0.3); }
.aa-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; font-size: 13px; min-width: 0; }
.aa-rij svg { flex: none; }
.aa-tijd { font-weight: 600; font-variant-numeric: tabular-nums; }
.aa-titel { min-width: 0; overflow-wrap: break-word; }
.aa-eind { font-size: 12px; color: oklch(0.88 0 0); font-variant-numeric: tabular-nums; }
.ag-afspraak:not(.in-raster) { min-height: 44px; justify-content: center; padding: 6px 12px; border-radius: 12px; }
.ag-afspraak.in-raster {
  position: absolute; top: calc(var(--top) * var(--uur) / 60 * 1px + 1px);
  height: max(26px, calc(var(--lengte) * var(--uur) / 60 * 1px - 2px));
  left: calc(var(--kol) / var(--kols) * 100% + 1px); width: calc(100% / var(--kols) - 2px);
}

.ag-uurlabels { position: relative; height: calc(var(--uren) * var(--uur) * 1px + 16px); }
.ag-uurlabels span {
  position: absolute; right: 6px; top: calc(var(--i) * var(--uur) * 1px); height: 16px; line-height: 16px;
  font-size: 12px; color: oklch(0.82 0 0); font-variant-numeric: tabular-nums;
}
.ag-uurkolom {
  position: relative; height: calc(var(--uren) * var(--uur) * 1px); margin: 8px 0; border-radius: 12px; min-width: 0;
  border: 1px solid oklch(1 0 0 / 0.06);
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--uur) * 1px - 1px),
      oklch(1 0 0 / 0.06) calc(var(--uur) * 1px - 1px), oklch(1 0 0 / 0.06) calc(var(--uur) * 1px)),
    oklch(1 0 0 / 0.03);
}
.ag-uurkolom.is-vandaag { border: 1.5px solid oklch(0.96 0 0 / 0.5); background-color: oklch(1 0 0 / 0.07); }

/* Pc: weekoverzicht links, zijvakken rechts (onder het overzicht als het smal wordt). */
.ag-tel { display: none; }
.ag-pc { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.ag-raster { flex: 4 1 640px; min-width: 0; border-radius: 20px; padding: 14px 12px 0; }
.ag-legenda { padding: 0 4px; }
.ag-binnen { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; --uur: 56; }
.ag-rij { display: grid; grid-template-columns: 38px repeat(7, minmax(0, 1fr)); gap: 4px; align-items: stretch; }
.ag-uren { align-items: start; }
.ag-dagkop {
  display: flex; flex-direction: column; gap: 3px; padding: 8px; border-radius: 12px; min-height: 58px; min-width: 0;
  background: oklch(1 0 0 / 0.05); border: 1px solid oklch(1 0 0 / 0.1);
}
.ag-dagkop.is-vandaag { border: 1.5px solid oklch(0.96 0 0); }
.ag-label { font-size: 15px; font-weight: 600; }
.ag-rijkop { margin: 0; padding: 8px 2px 0; border-top: 1px solid oklch(1 0 0 / 0.06); font-size: 12px; font-weight: 600; color: oklch(0.88 0 0); }
.ag-cel { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 40px; padding-bottom: 6px; }

.ag-zij { flex: 1 1 230px; max-width: 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ag-vak { border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ag-vakkop { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.ag-telaat { background-image: radial-gradient(300px 160px at 0% 0%, oklch(0.78 0.17 60 / 0.16), transparent 65%); }
.ag-telaat .ag-vakkop { color: oklch(0.82 0.16 60); }
.ag-maand { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.mc-dag { font-size: 12px; color: oklch(0.82 0 0); padding-bottom: 4px; }
.mc { position: relative; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 10px; }
a.mc:hover { background: oklch(1 0 0 / 0.1); }
.mc.in-week { background: oklch(1 0 0 / 0.08); }
.mc-n {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-top: -4px;
  border-radius: 50%; font-size: 12px; font-variant-numeric: tabular-nums; color: oklch(0.9 0 0);
}
.mc-n.vandaag { background: oklch(0.96 0 0); color: var(--donker); font-weight: 700; }
.mc-n.los { margin: 0; width: 14px; height: 14px; }
.mc-stip {
  position: absolute; bottom: 1px; left: 50%; margin-left: -3px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--stip); box-shadow: 0 0 6px color-mix(in oklch, var(--stip) 70%, transparent);
}
.mc-stip.los { position: static; margin: 0; display: inline-block; }
.ag-maandlegenda { font-size: 12px; padding-top: 4px; }

@media (min-width: 900px) and (max-width: 1099px) {
  .ag-raster { flex: 1 1 100%; }
  .ag-zij { flex: 1 1 100%; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

/* Telefoon: dagstrook, een kaart voor de gekozen dag en daaronder de volgende dag. */
@media (max-width: 899px) {
  .ag-pc { display: none; }
  .ag-tel { display: flex; flex-direction: column; gap: 12px; }
  .ag-kop { gap: 10px; }
  .ag-titel { flex: 1; min-width: 0; }
  .ag-nieuw { order: 2; width: 48px; height: 48px; padding: 0; }
  .ag-knoptekst { display: none; }
  .ag-nav { order: 3; flex: 1 1 100%; margin-left: 0; flex-wrap: nowrap; justify-content: space-between; }
  .ag-bladeren { flex: 1; min-width: 0; }
  .ag-weektitel { flex: 1; min-width: 0; text-align: center; white-space: normal; font-size: 14px; line-height: 1.25; padding: 0 2px; }
  .ag-vandaag { flex: none; padding: 0 14px; }
  .ag-strook { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
  .ag-stripdag { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; min-height: 68px; color: oklch(0.9 0 0); }
  .sd-naam { font-size: 12px; line-height: 14px; color: oklch(0.82 0 0); }
  .sd-cirkel {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
    font-size: 16px; font-variant-numeric: tabular-nums; color: oklch(0.94 0 0);
    background: oklch(1 0 0 / 0.07); border: 1px solid oklch(1 0 0 / 0.12);
  }
  .sd-cirkel.is-vandaag { border-color: oklch(0.96 0 0 / 0.7); }
  .ag-stripdag[aria-current="true"] .sd-cirkel { background: oklch(0.96 0 0); border-color: oklch(0.96 0 0); color: var(--donker); font-weight: 700; }
  .sd-stip { width: 6px; height: 6px; border-radius: 50%; background: var(--stip, transparent);
    box-shadow: 0 0 6px color-mix(in oklch, var(--stip, transparent) 70%, transparent); }
  .ag-telaat-balk {
    display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border-radius: 18px; font-size: 13px; line-height: 1.3;
    background-image: radial-gradient(300px 120px at 0% 50%, oklch(0.78 0.17 60 / 0.16), transparent 65%);
  }
  .ag-telaat-balk svg { flex: none; color: oklch(0.82 0.16 60); }
  .ag-telaat-balk strong { color: oklch(0.82 0.16 60); font-weight: 600; }
  .ag-telaat-balk > span { min-width: 0; overflow-wrap: anywhere; }
  .ag-dagkaart { border-radius: 20px; padding: 12px 12px 4px; display: flex; flex-direction: column; gap: 8px; }
  .ag-dagkaart-kop { display: flex; align-items: center; gap: 10px; min-height: 28px; }
  .ag-dagkaart-kop h2 { font-size: 16px; font-weight: 600; flex: 1; }
  .ag-dagchips { display: flex; flex-direction: column; gap: 8px; }
  .ag-leegtekst { padding-bottom: 8px; }
  .ag-uren-tel { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px; align-items: start; --uur: 28; }
  .ag-volgende { display: flex; flex-direction: column; gap: 8px; }
  .ag-volgende h2 { margin-left: 4px; font-size: 16px; font-weight: 600; }
  .afspraak-formulier { padding: 14px; }
}

/* Herhalende afspraak: klein herhaal-icoon achter de titel, en de tekst (elke werkdag) onder de titel. */
.aa-herhaal { display: inline-flex; flex: none; color: oklch(0.88 0 0); }
.af-weg { flex-wrap: wrap; gap: 8px; }
.af-weg form { display: flex; }
.veld select {
  height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid oklch(1 0 0 / 0.2);
  background: oklch(0.1 0 0 / 0.5); color: var(--tekst); font-size: 16px; color-scheme: dark;
}
.veld select[aria-invalid="true"] { border-color: oklch(0.85 0.12 50); }
.af-velden .veld:not(.af-titel) { max-width: 260px; }
@media (max-width: 899px) { .af-velden .veld:not(.af-titel) { max-width: none; } }

/* Titel in een blok van het uurraster: nooit midden in een woord afgekapt. Past hij niet naast de tijd, dan komt hij
   op een eigen regel; past hij daar ook niet, dan een weglatingsteken (de volle titel staat in title en aria-label).
   Korte blokken hebben maar een regel. */
.ag-afspraak.in-raster { padding: 4px 6px; height: max(28px, calc(var(--lengte) * var(--uur) / 60 * 1px - 2px)); }
.ag-afspraak.in-raster .aa-titel { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.ag-afspraak.in-raster.kort .aa-rij { flex-wrap: nowrap; }
.ag-afspraak.in-raster.kort .aa-titel { flex: 1 1 0; }
@media (max-width: 899px) {
  .ag-uren-tel .ag-afspraak.in-raster.halfkort .aa-rij { flex-wrap: nowrap; }
  .ag-uren-tel .ag-afspraak.in-raster.halfkort .aa-titel { flex: 1 1 0; }
}
.aa-tijd { white-space: nowrap; }
/* Drie of meer afspraken tegelijk: te smal om naast elkaar te staan. Ze liggen dan over elkaar met een rand van
   14px van de vorige zichtbaar, de latere bovenop (een later begin ligt lager, zodat de tekst vrij blijft). */
.ag-afspraak.in-raster.dicht {
  left: calc(var(--kol) * 14px + 1px); width: calc(100% - (var(--kols) - 1) * 14px - 2px); z-index: calc(var(--kol) + 1);
}
/* Twee naast elkaar en kort: alleen de tijd, het klokje past niet. */
.ag-afspraak.in-raster.kort.smal .aa-rij svg { display: none; }
/* In een dichte kolom één regel met alleen de titel (de tijd staat in title en aria-label), zodat blokken die kort
   na elkaar beginnen elkaars tekst niet raken. */
.ag-afspraak.in-raster.dicht .aa-rij { flex-wrap: nowrap; }
.ag-afspraak.in-raster.dicht .aa-rij svg, .ag-afspraak.in-raster.dicht .aa-tijd, .ag-afspraak.in-raster.dicht .aa-herhaal { display: none; }
.ag-afspraak.in-raster.dicht .aa-titel { flex: 1 1 0; }
/* Projectnaam boven een deadline in het weekoverzicht: een regel met weglatingsteken (de volle naam staat in title),
   nooit midden in een woord weggeknipt. */
.ag-cel .wc-naam { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; line-clamp: unset; }
.ag-cel .wc-wie .wc-naam { flex: 1 1 0; }