/* Doelen: alle opmaak. Kleuren staan uitsluitend hier, als custom properties (contract paragraaf 13). */

/* ---------------------------------------------------------------- tokens */

:root {
  --blauw: #1A56FF;
  --cyaan: #00CFFF;
  --grad: linear-gradient(135deg, #1A56FF, #00CFFF);
  --goed: #16A34A;
  --fout: #DC2626;
  --let-op: #F59E0B;

  /* donker is de standaard */
  --bg: #0B0E14;
  --vlak: #0F131A;
  --kaart: #141923;
  --rand: rgba(255, 255, 255, .08);
  --tekst: #ECEFF4;
  --zacht: #C5CCD8;
  --gedempt: #8B95A8;

  /* de hero blijft in beide thema's donker */
  --hero-bg: #0B0E14;
  --hero-tekst: #ECEFF4;
  --hero-zacht: #C5CCD8;
  --hero-gedempt: #8B95A8;
  --hero-rand: rgba(255, 255, 255, .10);
  --hero-vlak: rgba(255, 255, 255, .06);
  --glow-cyaan: rgba(0, 207, 255, .22);
  --glow-blauw: rgba(26, 86, 255, .30);

  --let-op-vlak: rgba(245, 158, 11, .12);
  --goed-vlak: rgba(22, 163, 74, .14);
  --fout-vlak: rgba(220, 38, 38, .12);
  --blauw-vlak: rgba(26, 86, 255, .14);
  --spoor: rgba(255, 255, 255, .10);
  --schaduw: 0 10px 30px rgba(0, 0, 0, .35);

  /* tekstkleur bovenop het merkverloop en bovenop cyaan, in beide thema's gelijk */
  --op-merk: #FFFFFF;
  --op-cyaan: #0B0E14;

  --ronding: 14px;
  --ronding-klein: 10px;
  --pil: 999px;
  --tab-hoogte: 56px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #FFFFFF;
    --vlak: #F9F9F9;
    --kaart: #F5F7FA;
    --rand: rgba(0, 0, 0, .10);
    --tekst: #1A1A1A;
    --zacht: #444444;
    --gedempt: #555555;
    --let-op-vlak: rgba(245, 158, 11, .16);
    --goed-vlak: rgba(22, 163, 74, .12);
    --fout-vlak: rgba(220, 38, 38, .10);
    --blauw-vlak: rgba(26, 86, 255, .10);
    --spoor: rgba(0, 0, 0, .10);
    --schaduw: 0 10px 30px rgba(0, 0, 0, .10);
    color-scheme: light;
  }
}

/* de handmatige schakelaar wint altijd, in beide richtingen */
:root[data-thema="donker"] {
  --bg: #0B0E14;
  --vlak: #0F131A;
  --kaart: #141923;
  --rand: rgba(255, 255, 255, .08);
  --tekst: #ECEFF4;
  --zacht: #C5CCD8;
  --gedempt: #8B95A8;
  --let-op-vlak: rgba(245, 158, 11, .12);
  --goed-vlak: rgba(22, 163, 74, .14);
  --fout-vlak: rgba(220, 38, 38, .12);
  --blauw-vlak: rgba(26, 86, 255, .14);
  --spoor: rgba(255, 255, 255, .10);
  --schaduw: 0 10px 30px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

:root[data-thema="licht"] {
  --bg: #FFFFFF;
  --vlak: #F9F9F9;
  --kaart: #F5F7FA;
  --rand: rgba(0, 0, 0, .10);
  --tekst: #1A1A1A;
  --zacht: #444444;
  --gedempt: #555555;
  --let-op-vlak: rgba(245, 158, 11, .16);
  --goed-vlak: rgba(22, 163, 74, .12);
  --fout-vlak: rgba(220, 38, 38, .10);
  --blauw-vlak: rgba(26, 86, 255, .10);
  --spoor: rgba(0, 0, 0, .10);
  --schaduw: 0 10px 30px rgba(0, 0, 0, .10);
  color-scheme: light;
}

/* ------------------------------------------------------------------ basis */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--tekst);
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: calc(var(--tab-hoogte) + env(safe-area-inset-bottom) + 12px);
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--cyaan); }

:focus-visible {
  outline: 2px solid var(--cyaan);
  outline-offset: 2px;
  border-radius: 6px;
}

.verborgen-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.overslaan {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 60;
  background: var(--kaart);
  color: var(--tekst);
  padding: 10px 14px;
  border-radius: var(--ronding-klein);
  border: 1px solid var(--rand);
}
.overslaan:focus { left: 8px; }

.noscript {
  margin: 24px;
  padding: 16px;
  border-radius: var(--ronding);
  border: 1px solid var(--rand);
  background: var(--kaart);
}

/* ----------------------------------------------------------------- topbalk */

.topbalk {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--rand);
  padding-top: env(safe-area-inset-top);
}

.topbalk-binnen {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 14px;
}

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

.merkbalk {
  display: block;
  width: 64px;
  height: 6px;
  border-radius: var(--pil);
  background: var(--grad);
}

.merknaam { font-weight: 700; letter-spacing: .2px; }

.breednav { display: none; margin-left: auto; }

.topknoppen { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.icoonknop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--ronding-klein);
  border: 1px solid transparent;
  background: transparent;
  color: var(--zacht);
}
.icoonknop:hover { background: var(--vlak); color: var(--tekst); }
.icoonknop svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------ meldingstrook */

.melding-strook:empty { display: none; }

.weekmelding {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--blauw-vlak);
  border-bottom: 1px solid var(--rand);
  font-size: 14px;
}
.weekmelding strong { font-weight: 650; }

/* -------------------------------------------------------------------- hoofd */

.hoofd { max-width: 1080px; margin: 0 auto; }
.app { padding: 0 0 24px; }
.blok { padding: 0 14px; }

.sectiekop {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 18px 0 8px;
  background: none;
  border: 0;
  text-align: left;
  color: var(--gedempt);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.sectiekop .telling {
  margin-left: auto;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
}
.sectiekop .chevron { transition: transform 160ms ease; }
.sectiekop[aria-expanded="false"] .chevron { transform: rotate(-90deg); }
h2.sectiekop { cursor: default; }

/* ------------------------------------------------------------------- knoppen */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--ronding-klein);
  border: 1px solid var(--rand);
  background: var(--kaart);
  color: var(--tekst);
  font-weight: 600;
  font-size: 15px;
}
.knop:hover { border-color: var(--spoor); }
.knop[disabled] { opacity: .5; cursor: not-allowed; }
.knop svg { width: 18px; height: 18px; }

.knop-primair {
  background: var(--grad);
  border-color: transparent;
  color: var(--op-merk);
}
.knop-primair:hover { filter: brightness(1.06); }

.knop-stil { background: transparent; }

.knop-breed { width: 100%; }

.knop-klein { min-height: 36px; padding: 0 12px; font-size: 14px; }

.linkknop {
  background: none;
  border: 0;
  padding: 0;
  color: var(--cyaan);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.knoprij { display: flex; flex-wrap: wrap; gap: 8px; }

/* kleine hulpklassen, zodat er nergens opmaak in de javascript staat */
.marge-boven { margin-top: 14px; }
.marge-klein { margin-top: 6px; }
.sterk { color: var(--tekst); }
.klein-gedempt { font-size: 13px; color: var(--gedempt); }

/* --------------------------------------------------------------------- hero */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--hero-bg);
  color: var(--hero-tekst);
  border-bottom: 1px solid var(--hero-rand);
  padding: 18px 14px 20px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 92% 4%, var(--glow-cyaan), transparent 60%),
    radial-gradient(120% 100% at 4% 98%, var(--glow-blauw), transparent 62%);
}
.hero > * { position: relative; }

.hero-kop { display: flex; align-items: flex-start; gap: 12px; }
.hero-week { font-size: 13px; color: var(--hero-zacht); letter-spacing: .01em; }
.hero-aftellen {
  margin-top: 2px;
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -.01em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-thema { color: var(--hero-zacht); margin-left: auto; }
.hero-thema:hover { background: var(--hero-vlak); color: var(--hero-tekst); }

.hero-midden {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}

.hero-persoon { min-width: 0; flex: 1; }

.persoonrij { display: flex; align-items: center; gap: 8px; }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--pil);
  font-size: 13px;
  font-weight: 700;
  color: var(--op-merk);
  flex: 0 0 auto;
}
.avatar-georg { background: var(--blauw); }
.avatar-christiaan { background: var(--cyaan); color: var(--op-cyaan); }
.avatar-klein { width: 22px; height: 22px; font-size: 11px; }

.persoonnaam { font-weight: 700; font-size: 17px; }

.wisselknop {
  min-height: 32px;
  padding: 0 10px;
  border-radius: var(--pil);
  border: 1px solid var(--hero-rand);
  background: var(--hero-vlak);
  color: var(--hero-zacht);
  font-size: 13px;
  font-weight: 600;
}
.wisselknop:hover { color: var(--hero-tekst); }

.hero-feiten {
  margin-top: 8px;
  font-size: 13px;
  color: var(--hero-zacht);
  display: grid;
  gap: 3px;
}
.hero-feiten .nadruk { color: var(--hero-tekst); font-weight: 650; }

.hero-knoppen { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.hero-knoppen .knop {
  background: var(--hero-vlak);
  border-color: var(--hero-rand);
  color: var(--hero-tekst);
}
.hero-knoppen .knop-primair { background: var(--grad); border-color: transparent; }

/* ---------------------------------------------------------------------- ring */

.ring { position: relative; flex: 0 0 auto; line-height: 0; }
.ring svg { display: block; }
.ring-spoor { stroke: var(--spoor); }
.ring-boog {
  stroke: url(#merkgradient);
  stroke-linecap: round;
  transition: stroke-dashoffset 320ms ease;
}
.ring-pct {
  fill: currentColor;
  font-weight: 750;
  font-size: 22px;
  text-anchor: middle;
}
.ring-onder {
  fill: var(--hero-gedempt);
  font-size: 11px;
  text-anchor: middle;
  font-weight: 600;
}
.ring-klein .ring-pct { font-size: 18px; }
.ring-klein .ring-onder { font-size: 10px; }

/* --------------------------------------------------------------------- pillen */

.pil {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--pil);
  border: 1px solid var(--rand);
  background: var(--vlak);
  color: var(--zacht);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.pil-merk { border-color: transparent; background: var(--blauw-vlak); color: var(--cyaan); }
.pil-goed { border-color: transparent; background: var(--goed-vlak); color: var(--goed); }
.pil-let-op { border-color: transparent; background: var(--let-op-vlak); color: var(--let-op); }
.pil-fout { border-color: transparent; background: var(--fout-vlak); color: var(--fout); }

.pilrij { display: flex; flex-wrap: wrap; gap: 6px; }

/* --------------------------------------------------------------------- banner */

.banner {
  display: grid;
  gap: 10px;
  margin: 14px 14px 0;
  padding: 12px 14px;
  border-radius: var(--ronding);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--let-op);
  background: var(--let-op-vlak);
}
.banner-titel { font-weight: 700; font-size: 15px; }
.banner-tekst { font-size: 14px; color: var(--zacht); }

/* ------------------------------------------------------------------- doelkaart */

.doel {
  position: relative;
  margin-top: 10px;
  padding: 14px;
  border-radius: var(--ronding);
  border: 1px solid var(--rand);
  background: var(--kaart);
  overflow: hidden;
}
/* het hoofddoel krijgt een rand in het merkverloop */
.doel-hoofddoel {
  padding: 16px 14px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--kaart), var(--kaart)) padding-box,
    var(--grad) border-box;
}
.doel-hoofddoel .doel-titel { font-size: 19px; }

.doel-top { display: flex; align-items: flex-start; gap: 12px; }

.vink {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: -6px 0 0 -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: var(--pil);
}
.cirkel {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--pil);
  border: 2px solid var(--gedempt);
  transition: background 140ms ease, border-color 140ms ease;
}
.cirkel svg { width: 16px; height: 16px; color: var(--op-merk); }
.cirkel .vinkje {
  opacity: 0;
  transform: scale(.6);
  transition: opacity 140ms ease 30ms, transform 140ms ease 30ms;
}
.doel.af .cirkel, .doel.is-klaar .cirkel {
  background: var(--grad);
  border-color: transparent;
}
.doel.af .vinkje, .doel.is-klaar .vinkje { opacity: 1; transform: none; }

.doel-tekst { flex: 1; min-width: 0; }

.doel-titel {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.01em;
  text-decoration: line-through;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  transition: opacity 220ms ease, text-decoration-color 220ms ease;
}
.doel.af .doel-titel, .doel.is-klaar .doel-titel {
  opacity: .55;
  text-decoration-color: currentColor;
}

.doel-meta {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.doel-toelichting { margin-top: 8px; font-size: 14px; color: var(--zacht); }
.doel-klaarals {
  margin-top: 8px;
  font-size: 13px;
  color: var(--gedempt);
  border-left: 2px solid var(--rand);
  padding-left: 10px;
}
.doel-hint { margin-top: 8px; font-size: 13px; color: var(--cyaan); font-weight: 600; }

.kopieer {
  flex: 0 0 auto;
  min-width: 40px;
  height: 40px;
  margin: -4px -4px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: var(--ronding-klein);
  border: 1px solid var(--rand);
  background: transparent;
  color: var(--gedempt);
  font-size: 13px;
  font-weight: 600;
}
.kopieer:hover { color: var(--tekst); }
.kopieer svg { width: 16px; height: 16px; }
.kopieer.gelukt { color: var(--goed); border-color: var(--goed); }

/* dezelfde kopieerknop, maar dan als gewone knop in een knoprij */
.kopieer.knop {
  margin: 0;
  height: auto;
  min-height: 44px;
  color: var(--tekst);
  background: var(--kaart);
}
.kopieer.knop-klein { min-height: 36px; font-size: 14px; }
.kopieer.knop-primair { color: var(--op-merk); background: var(--grad); border-color: transparent; }
.kopieer.knop.gelukt { color: var(--goed); }
.kopieer.knop-primair.gelukt { color: var(--op-merk); }

/* teller */

.teller {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.teller-min {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--ronding-klein);
  border: 1px solid var(--rand);
  background: var(--vlak);
  color: var(--zacht);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.teller-waarde {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--tekst);
  text-align: center;
  border-radius: var(--ronding-klein);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.teller-waarde .getal { font-size: 24px; font-weight: 750; letter-spacing: -.02em; }
.teller-waarde .rest { font-size: 13px; color: var(--gedempt); display: block; margin-top: -2px; }
.teller-plus {
  flex: 0 0 47%;
  height: 56px;
  border-radius: var(--ronding-klein);
  border: 0;
  background: var(--grad);
  color: var(--op-merk);
  font-size: 22px;
  font-weight: 750;
  line-height: 1;
}
.teller-plus:active { filter: brightness(.92); }
.teller-waarde.gedempt .getal { color: var(--gedempt); }

.exact {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
}
.exact input {
  flex: 1 1 90px;
  min-width: 80px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--ronding-klein);
  border: 1px solid var(--rand);
  background: var(--vlak);
}

/* crm-regel */

.crm-rij {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.crm-stand { font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
.crm-stand .rest { font-size: 13px; font-weight: 600; color: var(--gedempt); }
.crm-stand.gedempt { color: var(--gedempt); }

/* voortgangsbalk */

.balk {
  position: relative;
  height: 6px;
  margin-top: 12px;
  border-radius: var(--pil);
  background: var(--spoor);
  overflow: hidden;
}
.balk > i {
  display: block;
  height: 100%;
  border-radius: var(--pil);
  background: var(--grad);
  transition: width 220ms ease;
}
.balk-vol > i { background: var(--goed); }

.doel-voet {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 13px;
  color: var(--gedempt);
}

.doel.klapt-in {
  max-height: 0 !important;
  opacity: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  transition: max-height 200ms ease, opacity 160ms ease, margin 200ms ease, padding 200ms ease;
}

/* --------------------------------------------------------------- niet doen */

.nietdoen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nietdoen .pil {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--gedempt);
  text-decoration: line-through;
  text-decoration-color: var(--rand);
}

/* ------------------------------------------------------------------ lege staat */

.leeg {
  margin-top: 10px;
  padding: 18px 16px;
  border-radius: var(--ronding);
  border: 1px dashed var(--rand);
  background: var(--vlak);
  color: var(--gedempt);
  font-size: 14px;
  text-align: center;
}
.leeg strong { display: block; color: var(--zacht); font-size: 15px; margin-bottom: 4px; }

/* ------------------------------------------------------------------------ team */

.segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-top: 14px;
  border-radius: var(--pil);
  border: 1px solid var(--rand);
  background: var(--vlak);
}
.segmented button {
  flex: 1;
  min-height: 38px;
  border: 0;
  border-radius: var(--pil);
  background: transparent;
  color: var(--gedempt);
  font-size: 14px;
  font-weight: 650;
}
.segmented button[aria-pressed="true"] {
  background: var(--kaart);
  color: var(--tekst);
  box-shadow: var(--schaduw);
}

.teamringen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.teamring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px;
  border-radius: var(--ronding);
  border: 1px solid var(--rand);
  background: var(--kaart);
  text-align: center;
}
.teamring .ring-onder { fill: var(--gedempt); }
.teamring .naam { font-weight: 700; font-size: 15px; }
.teamring .onder { font-size: 12px; color: var(--gedempt); }

.teamkolommen { display: grid; gap: 4px; }
.teamkolom[hidden] { display: none; }

.feed { margin-top: 10px; display: grid; gap: 2px; }
.feedregel {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--rand);
  font-size: 14px;
}
.feedregel:last-child { border-bottom: 0; }
.feedregel .wanneer { margin-left: auto; flex: 0 0 auto; font-size: 12px; color: var(--gedempt); }
.feedstip {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: var(--pil);
  background: var(--gedempt);
  transform: translateY(-2px);
}
.feedstip-georg { background: var(--blauw); }
.feedstip-christiaan { background: var(--cyaan); }

/* --------------------------------------------------------------------- archief */

.tellers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.tegel {
  padding: 14px;
  border-radius: var(--ronding);
  border: 1px solid var(--rand);
  background: var(--kaart);
}
.tegel .cijfer {
  font-size: 30px;
  font-weight: 780;
  letter-spacing: -.03em;
  line-height: 1.1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tegel .label { margin-top: 2px; font-size: 13px; color: var(--gedempt); }
.tegel .extra { margin-top: 6px; font-size: 12px; color: var(--zacht); }

.filters { display: grid; gap: 8px; margin-top: 16px; }
.filters .rij { display: flex; gap: 8px; }
.veld {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--ronding-klein);
  border: 1px solid var(--rand);
  background: var(--vlak);
  color: var(--tekst);
}
select.veld { appearance: none; padding-right: 30px; }

.archiefweek {
  margin-top: 10px;
  border-radius: var(--ronding);
  border: 1px solid var(--rand);
  background: var(--kaart);
  overflow: hidden;
}
.archiefkop {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  background: none;
  border: 0;
  text-align: left;
  color: var(--tekst);
}
.archiefkop .weeknaam { font-weight: 700; font-size: 15px; }
.archiefkop .weekdatum { font-size: 12px; color: var(--gedempt); }
.archiefkop .scores { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.archiefbody { padding: 0 14px 14px; }

.archiefdoel {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--rand);
  font-size: 14px;
}
.archiefdoel .wanneer { margin-left: auto; flex: 0 0 auto; font-size: 12px; color: var(--gedempt); }
.archiefdoel.niet-gehaald { opacity: .58; }
.archiefdoel .heen { font-size: 12px; color: var(--gedempt); }
.geen-doelen {
  padding: 12px 0;
  color: var(--gedempt);
  font-size: 14px;
  border-top: 1px solid var(--rand);
}

/* ---------------------------------------------------------------------- cijfers */

.klanttegel {
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--ronding);
  border: 1px solid var(--rand);
  background: var(--kaart);
}
.klanttegel .groot {
  font-size: 24px;
  font-weight: 760;
  letter-spacing: -.02em;
}
.klanttegel .groot em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.klantbalk { display: flex; gap: 6px; margin-top: 12px; }
.klantvak {
  flex: 1;
  height: 10px;
  border-radius: var(--pil);
  background: var(--spoor);
}
.klantvak.vol { background: var(--grad); }
.klantvak.trial { background: var(--let-op); opacity: .8; }

.sparkgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.sparkkaart {
  padding: 12px;
  border-radius: var(--ronding);
  border: 1px solid var(--rand);
  background: var(--kaart);
}
.sparkkaart .label { font-size: 12px; color: var(--gedempt); font-weight: 600; }
.sparkkaart .laatste { font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
.sparkkaart svg { display: block; width: 100%; height: 44px; margin-top: 6px; }
.sparklijn { fill: none; stroke: url(#merkgradient-plat); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sparkstip { fill: var(--cyaan); }
.sparkleeg { font-size: 12px; color: var(--gedempt); }

.tabelwikkel { overflow-x: auto; margin-top: 10px; -webkit-overflow-scrolling: touch; }
table.cijfers {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
}
table.cijfers th, table.cijfers td {
  padding: 9px 10px;
  text-align: right;
  border-bottom: 1px solid var(--rand);
  white-space: nowrap;
}
table.cijfers th { color: var(--gedempt); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
table.cijfers th:first-child, table.cijfers td:first-child { text-align: left; }
table.cijfers tbody tr:last-child td { border-bottom: 0; }
table.cijfers td.leegwaarde { color: var(--gedempt); }

.ritme { margin-top: 10px; display: grid; gap: 8px; }
.ritmeregel { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.ritmeregel .week { flex: 0 0 76px; color: var(--gedempt); }
.ritmeregel .balk { flex: 1; margin-top: 0; }
.ritmeregel .cijfer { flex: 0 0 62px; text-align: right; color: var(--zacht); }

/* ---------------------------------------------------------------------- wizard */

.stappen { display: flex; gap: 6px; margin-top: 14px; }
.stap {
  flex: 1;
  height: 6px;
  border-radius: var(--pil);
  background: var(--spoor);
}
.stap.actief { background: var(--grad); }
.stap.gedaan { background: var(--goed); }

.staplabel { margin-top: 10px; font-size: 12px; color: var(--gedempt); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.staptitel { margin-top: 4px; font-size: 20px; font-weight: 740; letter-spacing: -.02em; }
.stapuitleg { margin-top: 6px; font-size: 14px; color: var(--zacht); }

.keuzekaart {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--ronding);
  border: 1px solid var(--rand);
  background: var(--kaart);
}
.keuzekaart .titel { font-weight: 650; font-size: 15px; }
.keuzekaart .onder { margin-top: 4px; font-size: 13px; color: var(--gedempt); }
.keuze3 { display: flex; gap: 6px; margin-top: 10px; }
.keuze3 button {
  flex: 1;
  min-height: 44px;
  border-radius: var(--ronding-klein);
  border: 1px solid var(--rand);
  background: var(--vlak);
  color: var(--zacht);
  font-size: 14px;
  font-weight: 650;
}
.keuze3 button[aria-pressed="true"] { border-color: transparent; background: var(--grad); color: var(--op-merk); }

.vraag { margin-top: 14px; }
.vraag label { display: block; font-size: 14px; font-weight: 650; margin-bottom: 6px; }
.vraag textarea {
  width: 100%;
  min-height: 76px;
  padding: 10px 12px;
  border-radius: var(--ronding-klein);
  border: 1px solid var(--rand);
  background: var(--vlak);
  color: var(--tekst);
  resize: vertical;
}
.vorigeanders {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--ronding-klein);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--cyaan);
  background: var(--vlak);
  font-size: 13px;
  color: var(--zacht);
}

.dagenkiezer { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.dagenkiezer button {
  flex: 1 0 40px;
  min-height: 44px;
  border-radius: var(--ronding-klein);
  border: 1px solid var(--rand);
  background: var(--vlak);
  color: var(--zacht);
  font-weight: 650;
}
.dagenkiezer button[aria-pressed="true"] { border-color: transparent; background: var(--grad); color: var(--op-merk); }

.brief {
  margin-top: 12px;
  padding: 12px;
  max-height: 46vh;
  overflow: auto;
  border-radius: var(--ronding);
  border: 1px solid var(--rand);
  background: var(--vlak);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.wizardvoet {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rand);
}
.wizardvoet .knop { flex: 1; }

/* ----------------------------------------------------------------------- login */

.login {
  max-width: 380px;
  margin: 0 auto;
  padding: 32px 16px 40px;
}
.login h1 { font-size: 26px; font-weight: 780; letter-spacing: -.02em; margin-top: 14px; }
.login p.uitleg { margin-top: 6px; color: var(--zacht); font-size: 14px; }
.login label { display: block; margin: 18px 0 6px; font-size: 14px; font-weight: 650; }
.login input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border-radius: var(--ronding-klein);
  border: 1px solid var(--rand);
  background: var(--vlak);
  color: var(--tekst);
}
.wieknoppen { display: flex; gap: 8px; }
.wieknoppen button {
  flex: 1;
  min-height: 48px;
  border-radius: var(--ronding-klein);
  border: 1px solid var(--rand);
  background: var(--vlak);
  color: var(--zacht);
  font-weight: 650;
}
.wieknoppen button[aria-pressed="true"] { border-color: transparent; background: var(--grad); color: var(--op-merk); }
.loginfout {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: var(--ronding-klein);
  background: var(--fout-vlak);
  color: var(--fout);
  font-size: 14px;
  font-weight: 600;
}

/* ---------------------------------------------------------------------- tabbalk */

.tabbalk {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  height: calc(var(--tab-hoogte) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--vlak);
  border-top: 1px solid var(--rand);
}
.tabbalk a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: var(--tab-hoogte);
  color: var(--gedempt);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
}
.tabbalk a svg { width: 22px; height: 22px; }
.tabbalk a[aria-current="page"] { color: var(--cyaan); }
body:not(.ingelogd) .tabbalk { display: none; }
body:not(.ingelogd) { padding-bottom: 24px; }

/* ------------------------------------------------------------------------ toast */

.toasts {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tab-hoogte) + env(safe-area-inset-bottom) + 12px);
  z-index: 50;
  width: min(94vw, 460px);
  display: grid;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--ronding);
  border: 1px solid var(--rand);
  background: var(--kaart);
  box-shadow: var(--schaduw);
  font-size: 14px;
  pointer-events: auto;
  animation: opkomen 180ms ease;
}
.toast .tekst { flex: 1; min-width: 0; }
.toast-fout { border-left: 4px solid var(--fout); }
.toast-goed { border-left: 4px solid var(--goed); }

@keyframes opkomen {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------- skelet */

.skelet { padding: 14px; display: grid; gap: 10px; }
.skelet-hero { height: 168px; border-radius: var(--ronding); background: var(--vlak); }
.skelet-kaart { height: 92px; border-radius: var(--ronding); background: var(--vlak); }
.wachttekst { padding: 0 14px; color: var(--gedempt); font-size: 14px; }

/* ------------------------------------------------------------------------ breed */

@media (min-width: 860px) {
  body { padding-bottom: 40px; }
  .tabbalk { display: none; }
  .breednav { display: flex; gap: 4px; margin: 0 auto; }
  .breednav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--pil);
    color: var(--gedempt);
    text-decoration: none;
    font-size: 14px;
    font-weight: 650;
  }
  .breednav a svg { width: 18px; height: 18px; }
  .breednav a:hover { background: var(--vlak); color: var(--tekst); }
  .breednav a[aria-current="page"] { background: var(--blauw-vlak); color: var(--cyaan); }
  .toasts { bottom: 20px; }

  .hero { padding: 26px 24px 28px; border-radius: 0; }
  .blok { padding: 0 24px; }
  .banner { margin: 18px 24px 0; }

  .teller-plus { flex: 0 0 180px; }
  .tellers { grid-template-columns: repeat(4, 1fr); }
  .sparkgrid { grid-template-columns: repeat(4, 1fr); }

  .teamkolommen { grid-template-columns: 1fr 1fr; gap: 24px; }
  .teamkolom[hidden] { display: block; }
  .segmented { display: none; }
  .teamringen { grid-template-columns: 1fr 1fr; }
}

/* -------------------------------------------------------- minder beweging */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}