/* LuzeX RSLNT — design system.
   De tokens (kleuren, glas, radius, schaduwen) en de basisonderdelen zijn 1-op-1 overgenomen
   uit CMMNTY, dat ze op zijn beurt 1-op-1 uit ACCRD heeft (platform/frontend/styles.css in
   luzex-ACCRD), inclusief de toelichting en contrastmetingen. Pas ze daar én hier aan, zodat
   alle producten dezelfde huisstijl houden.
   Alles na het blok "RSLNT-specifiek" is eigen aan deze app, maar volgt dezelfde componenten
   (pil-knoppen, zwevende glazen balk, glazen panelen, kicker, badge). */
:root {
  color-scheme: light dark;

  /* Histor Intuitive (PPG1022-2, #cfc6bc): een warme greige met roze ondertoon, LRV 57.
     Vervangt het koele #f5f5f7. Bijkomend voordeel: witte panelen staken hier duidelijk
     tegen af (1,69:1) waar dat op het oude bijna-wit nauwelijks zichtbaar was (1,09:1). */
  --bg: #cfc6bc;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-translucent: rgba(255, 255, 255, 0.72);
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.12);
  --text: #1d1d1f;
  /* Warmer én donkerder dan de vorige koele grijzen. Noodzakelijk, niet cosmetisch: op de
     greige achtergrond haalde #6e6e73 nog maar 3,01:1 en #86868b zelfs 2,15:1. Nu 4,58:1 en
     3,30:1 op de achtergrond, en 7,73:1 / 5,57:1 op de witte panelen. */
  --text-secondary: #585249;
  --text-tertiary: #6e6760;

  /* Het logo is strikt monochroom, dus het accent is dat ook: grafiet in plaats van het
     Apple-blauw waarmee dit begon. --accent-contrast is de kleur die op een accentvlak leesbaar
     is; die draait mee in donkere modus, waar het accent juist licht wordt. */
  --accent: #1d1d1f;
  --accent-hover: #3a3a3c;
  --accent-active: #000000;
  --accent-contrast: #ffffff;
  --accent-tint: rgba(29, 29, 31, 0.07);
  --accent-ring: rgba(29, 29, 31, 0.3);

  --success: #248a3d;
  --success-tint: rgba(52, 199, 89, 0.14);
  --warning: #b25000;
  --warning-tint: rgba(255, 149, 0, 0.16);
  --danger: #d70015;
  --danger-tint: rgba(255, 59, 48, 0.12);
  /* Voor een status die klaar is maar nog geen geld heeft opgeleverd: definitief. Groen is
     bewaard voor betaald — dan pas is de cyclus rond. */
  --info: #0a63ad;
  --info-tint: rgba(10, 99, 173, 0.13);
  --neutral-tint: rgba(0, 0, 0, 0.06);
  --purple: #6e40c9;
  --purple-tint: rgba(139, 92, 246, 0.14);

  /* ---------- Liquid Glass ----------
     Het effect komt niet van het glas maar van de kleur eronder: zonder gekleurd licht
     achter het paneel is glas alleen maar grijs. Vandaar --glas-licht-*: de vlekken die
     achter de inhoud staan. De waarden hieronder staan bewust als token, zodat het
     materiaal op één plek te verstellen is en niet op veertig.

     Het dunste punt van de gradient staat hier op 0,26 en niet op de 0,20 uit het ontwerp.
     Gemeten: met 0,20 haalt --text-secondary (#585249) op glas boven een terracotta vlek
     nog 4,58:1 — net boven de norm, zonder marge. Met 0,26 is dat 4,78:1. De regel is dat
     glas dekkender wordt, niet dat tekst lichter wordt; dit is die afweging.

     Het licht zit als witte lijn BINNENIN de bovenrand (de eerste inset-schaduw), niet als
     kader eromheen. Een border-highlight zou het paneel laten zweven als een sticker. */
  --glas-bg: linear-gradient(142deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.26) 46%, rgba(255, 255, 255, 0.40));
  --glas-rand: rgba(255, 255, 255, 0.58);
  --glas-schaduw:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -18px 34px rgba(255, 255, 255, 0.20),
    /* Het ontwerp geeft 0 26px 64px. Zo'n schaduw reikt 38px bóven het paneel uit, en daar
       staan de kale labels van het periodefilter. Gemeten kost dat "Periode" 0,09 en komt het
       op 4,49:1 — net onder de norm, want --text-secondary haalt op de kale achtergrond zelf
       maar 4,58:1 en er is dus niets weg te geven. Met 30px verschuiving en 54px vervaging
       reikt de schaduw nog 24px omhoog: onder de tekst, en even zwaar onder het paneel. */
    0 30px 54px rgba(29, 29, 31, 0.20);
  --glas-blur: blur(30px) saturate(190%);

  /* Dunner glas voor kleine onderdelen (knoppen, velden, chips). Vier lagen
     backdrop-filter tegelijk in beeld is het maximum dat vloeiend blijft; kleine
     onderdelen krijgen daarom minder vervaging, niet minder glas. */
  --glas-dun-bg: linear-gradient(142deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0.34));
  --glas-dun-blur: blur(18px) saturate(170%);
  --glas-dun-schaduw: inset 0 1px 0 rgba(255, 255, 255, 0.80), 0 10px 26px rgba(29, 29, 31, 0.12);

  /* De dekkende tegenhanger: terugval zonder backdrop-filter, en de ondergrond onder
     cijfers die iemand moet lezen. Dit is de kleur die het glas gemiddeld oplevert boven
     de kale achtergrond, nagerekend en niet geschat — zo verspringt er niets. */
  --glas-vast: #e4d8cb;

  /* De glans die er in negen seconden één keer overheen loopt. Meer dan één is een casino. */
  --glas-glans: linear-gradient(112deg, transparent 26%, rgba(255, 255, 255, 0.62) 44%, transparent 62%);

  /* Het licht achter het glas. De opaciteiten zijn begrensd door de contrastmeting, niet
     door smaak: boven glas houdt --text-secondary 4,5:1 zolang terracotta onder 0,48 en
     olijf onder 0,40 blijft. Diep bruin haalt die grens al bij 0,15 en hoort daarom niet
     achter tekst — dat is de vlek voor de randen van de pagina. */
  --glas-licht-terracotta: #c98a63;
  --glas-licht-olijf: #8d9472;
  --glas-licht-zand: #e8dccc;
  --glas-licht-diep: #3b2e24;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 980px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.06);

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --sidebar-width: 260px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-elevated: #1c1c1e;
    --surface: #1c1c1e;
    --surface-translucent: rgba(28, 28, 30, 0.72);
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.14);
    --text: #f5f5f7;
    --text-secondary: #98989d;
    --text-tertiary: #6e6e73;

    /* Omgekeerd in donkere modus: op zwart is grafiet onzichtbaar, dus wordt het accent licht
       en de tekst erop donker — dezelfde omkering die het logo zelf maakt (zwarte en witte
       variant van hetzelfde merk). */
    --accent: #f5f5f7;
    --accent-hover: #ffffff;
    --accent-active: #d1d1d6;
    --accent-contrast: #1d1d1f;
    --accent-tint: rgba(245, 245, 247, 0.12);
    --accent-ring: rgba(245, 245, 247, 0.4);

    --success: #32d74b;
    --success-tint: rgba(50, 215, 75, 0.16);
    --warning: #ff9f0a;
    --warning-tint: rgba(255, 159, 10, 0.18);
    --danger: #ff453a;
    --danger-tint: rgba(255, 69, 58, 0.16);
    --info: #64b5f6;
    --info-tint: rgba(100, 181, 246, 0.18);
    --neutral-tint: rgba(255, 255, 255, 0.08);
    --purple: #bf5af2;
    --purple-tint: rgba(191, 90, 242, 0.18);

    /* Glas op zwart is een ander materiaal: het licht komt van boven in plaats van overal
       vandaan, dus veel minder wit en een zachtere vervaging. De lichte waarden werken hier
       niet — die maken een melkwitte vlek waar niets meer doorheen komt.
       Gemeten op #000 met een terracotta vlek van 0,22: --text-secondary 4,81:1. */
    --glas-bg: linear-gradient(142deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 48%, rgba(255, 255, 255, 0.11));
    --glas-rand: rgba(255, 255, 255, 0.20);
    --glas-schaduw:
      inset 0 1px 0 rgba(255, 255, 255, 0.34),
      0 22px 50px rgba(0, 0, 0, 0.30);
    --glas-blur: blur(26px) saturate(150%);

    --glas-dun-bg: linear-gradient(142deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.09));
    --glas-dun-blur: blur(16px) saturate(140%);
    --glas-dun-schaduw: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 10px 26px rgba(0, 0, 0, 0.34);

    --glas-vast: #1b1b1b;
    --glas-glans: linear-gradient(112deg, transparent 26%, rgba(255, 255, 255, 0.22) 44%, transparent 62%);

    /* Op zwart telt elke vlek zwaarder door: dezelfde meting geeft hier 0,25 voor
       terracotta en 0,27 voor olijf als bovengrens. Zand is de gevaarlijkste (0,17),
       omdat licht op licht het contrast van --text-secondary het snelst opeet. */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  }
}

/* ---------- Liquid Glass: het materiaal ----------
   Eén plek waar het glas gemaakt wordt; alles wat glas is, leent hiervan. De klassen
   staan los van de onderdelen zelf, zodat een paneel glas kan worden door het token te
   gebruiken en niet door zijn eigen kopie van vijf schaduwregels. */

.glas {
  position: relative;
  background: var(--glas-bg);
  backdrop-filter: var(--glas-blur);
  -webkit-backdrop-filter: var(--glas-blur);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--glas-schaduw);
}

.glas-dun {
  position: relative;
  background: var(--glas-dun-bg);
  backdrop-filter: var(--glas-dun-blur);
  -webkit-backdrop-filter: var(--glas-dun-blur);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--glas-dun-schaduw);
}

/* De glans loopt er één keer per negen seconden overheen. Alleen op marketingpagina's:
   in het ingelogde platform beweegt niets terwijl iemand aan het werk is. */
.glas-glans::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--glas-glans);
  background-size: 280% 100%;
  opacity: 0.55;
  animation: glas-glans 9s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

@keyframes glas-glans {
  0%, 62% { background-position: 150% 0; }
  100% { background-position: -60% 0; }
}

/* Het licht achter het glas. Zonder deze vlekken is glas grijs; met een vlek in de weg
   van lopende tekst is het onleesbaar. Daarom staan ze achter panelen en langs de randen
   van de pagina, nooit achter een alinea die zelf geen glas heeft. */
.glas-licht {
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
}

/* Terugval. Zonder deze regel wordt een paneel op oudere Android een grijze mist waar de
   tekst in verdwijnt: daar bestaat backdrop-filter niet en blijft alleen de halftransparante
   gradient over. Dekkend vlak in dezelfde kleur, dus dezelfde contrastmeting blijft gelden. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glas,
  .glas-dun {
    background: var(--glas-vast);
  }

  .glas-licht {
    display: none;
  }
}

/* Beweging is een aanbod, geen gegeven. Wie er last van heeft, krijgt hetzelfde beeld stil. */
@media (prefers-reduced-motion: reduce) {
  .glas-glans::after,
  .glas-licht {
    animation: none !important;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.006em;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}

a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-color: currentColor;
}

[hidden] {
  display: none !important;
}

/* ---------- Het licht achter het glas (zelfde vlekken als de ACCRD-landingspagina) ---------- */

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
}

body::before {
  width: 620px;
  height: 620px;
  right: -180px;
  top: -200px;
  background: var(--glas-licht-terracotta);
  opacity: 0.5;
  animation: zweef-a 17s ease-in-out infinite alternate;
}

body::after {
  width: 540px;
  height: 540px;
  left: -260px;
  bottom: -160px;
  background: var(--glas-licht-olijf);
  opacity: 0.36;
  animation: zweef-b 21s ease-in-out infinite alternate;
}

@keyframes zweef-a {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(90px, -60px, 0) scale(1.14); }
}

@keyframes zweef-b {
  0% { transform: translate3d(0, 0, 0) scale(1.08); }
  100% { transform: translate3d(110px, -70px, 0) scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
  }
}

/* ---------- Merk ---------- */

.brand-logo {
  display: block;
  width: 168px;
  aspect-ratio: 3.582;
  background-image: url("/assets/luzex-logo-zwart.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  flex-shrink: 0;
}

@media (prefers-color-scheme: dark) {
  .brand-logo {
    background-image: url("/assets/luzex-logo-wit.svg");
  }
}

.merk {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}

.merk-product {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding-left: 12px;
  border-left: 1px solid var(--border-strong);
}

/* ---------- De zwevende balk (zelfde onderdeel als op luzex.nl en ACCRD) ---------- */

.balkhouder {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 16px clamp(16px, 3vw, 24px) 0;
}

.balk {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 32px);
  padding: 8px 8px 8px 22px;
  border-radius: var(--radius-pill);
  background: var(--glas-bg);
  backdrop-filter: var(--glas-blur);
  -webkit-backdrop-filter: var(--glas-blur);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--glas-schaduw);
}

.balk-nav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.8vw, 28px);
  flex-grow: 1;
}

.balk-nav a {
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}

.balk-nav a:hover,
.balk-nav a.actief {
  border-bottom-color: currentColor;
}

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

.balk-acties .text-link {
  font-size: 14px;
}

@media (max-width: 760px) {
  .balk {
    flex-wrap: wrap;
    border-radius: 26px;
    padding: 10px 10px 10px 16px;
    gap: 8px;
  }

  .balk .brand-logo {
    width: min(34vw, 120px);
  }

  .merk-product {
    display: none;
  }

  .balk-acties {
    margin-left: auto;
  }

  /* Op een telefoon past alleen het merk plus één knop op de eerste rij. "Inloggen" staat
     ook in de hero en onder "Gratis lid worden", dus die mag hier weg. */
  .balk-inloggen {
    display: none;
  }

  .balk-nav {
    order: 3;
    width: 100%;
    justify-content: space-around;
    padding: 2px 4px 0;
  }

  .balk-nav a {
    font-size: 14px;
  }

  .balk .pil-knop {
    padding: 9px 14px;
    font-size: 13.5px;
    min-height: 0;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .balk {
    background: var(--glas-vast);
  }
}

/* ---------- Knoppen ---------- */

button {
  cursor: pointer;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  background: var(--accent);
  color: var(--accent-contrast);
  transition: background 0.15s var(--ease), transform 0.1s var(--ease), box-shadow 0.15s var(--ease);
}

button:hover {
  background: var(--accent-hover);
}

button:active {
  background: var(--accent-active);
  transform: scale(0.98);
}

button:disabled {
  opacity: 0.55;
  cursor: default;
}

button.secondary {
  background: var(--glas-dun-bg);
  backdrop-filter: var(--glas-dun-blur);
  -webkit-backdrop-filter: var(--glas-dun-blur);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--glas-dun-schaduw);
  color: var(--text);
}

button.secondary:hover {
  background: var(--border-strong);
}

button.gevaar {
  background: var(--danger);
  color: #fff;
}

.pil-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.balk .pil-knop {
  padding: 11px 22px;
}

.pil-knop-donker {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 12px 26px rgba(29, 29, 31, 0.26);
}

.pil-knop-donker:hover {
  background: var(--accent-hover);
}

.pil-knop-glas {
  background: var(--glas-dun-bg);
  backdrop-filter: var(--glas-dun-blur);
  -webkit-backdrop-filter: var(--glas-dun-blur);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--glas-dun-schaduw);
  color: var(--text);
}

.text-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: none;
  text-decoration: none;
}

.text-link:hover {
  background: none;
  text-decoration: underline;
}

/* ---------- Formulieren ---------- */

label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 16px 0 6px;
}

input, select, textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glas-rand);
  background: var(--glas-dun-bg);
  backdrop-filter: var(--glas-dun-blur);
  -webkit-backdrop-filter: var(--glas-dun-blur);
  box-shadow: var(--glas-dun-schaduw);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

textarea {
  resize: vertical;
  line-height: 1.5;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-tertiary);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  box-shadow: none;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.vinkje {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin: 16px 0 0;
  cursor: pointer;
}

.veld-hint {
  font-size: 12.5px;
  color: var(--text-tertiary);
  margin: 6px 0 0;
}

.veld-rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

@media (max-width: 640px) {
  .veld-rij {
    grid-template-columns: 1fr;
  }
}

.error {
  color: var(--danger);
  font-size: 13px;
  margin: 12px 0 0;
  min-height: 1em;
}

.success {
  color: var(--success);
  font-size: 13px;
  margin: 12px 0 0;
  min-height: 1em;
}

.melding {
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 14px;
  background: var(--info-tint);
  color: var(--text);
}

.formulier-acties {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* ---------- Pagina-opbouw ---------- */

.kolom {
  /* width: 100% is nodig: body is een flex-kolom, en daarin krimpt een blok met margin: auto
     anders tot de breedte van zijn inhoud (een directory met twee kaartjes werd smal). */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.kolom-smal {
  max-width: 760px;
}

.pagina-kop {
  padding: clamp(40px, 5vw, 72px) 0 32px;
}

.pagina-kop h1 {
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.kicker {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--glas-licht-diep);
}

@media (prefers-color-scheme: dark) {
  .kicker {
    color: var(--glas-licht-zand);
  }
}

.lead {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 56ch;
}

.subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0;
}

.panel {
  position: relative;
  background: var(--glas-bg);
  backdrop-filter: var(--glas-blur);
  -webkit-backdrop-filter: var(--glas-blur);
  border: 1px solid var(--glas-rand);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  margin-bottom: 24px;
  box-shadow: var(--glas-schaduw);
}

.panel h2 {
  font-size: 18px;
  margin-bottom: 4px;
}

.panel > .subtitle {
  margin-bottom: 18px;
}

@media (max-width: 640px) {
  .panel {
    padding: 22px 18px;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel, .kaart, input, select, textarea, button.secondary, .pil-knop-glas {
    background: var(--glas-vast);
  }
}

.leeg {
  text-align: center;
  color: var(--text-secondary);
  padding: 48px 16px;
}


/* ---------- Badges (uit CMMNTY) ---------- */

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 9px;
  background: var(--accent-tint);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.badge-succes {
  background: var(--success-tint);
  color: var(--success);
}

.badge-bezig {
  background: var(--warning-tint);
  color: var(--warning);
}

/* ---------- Auth-kaart (uit CMMNTY) ---------- */

.auth-kolom {
  display: flex;
  justify-content: center;
  padding: clamp(40px, 8vh, 96px) 16px;
}

.auth-kaart {
  width: 100%;
  max-width: 420px;
  padding: 36px 34px;
}

.auth-kaart h1 {
  font-size: 26px;
  margin-bottom: 6px;
}

.auth-kaart .subtitle {
  margin-bottom: 22px;
}

.auth-kaart button[type="submit"] {
  width: 100%;
  margin-top: 24px;
  padding: 13px;
  font-size: 15px;
  border-radius: var(--radius-pill);
}

/* =====================================================================================
   Alles hieronder is RSLNT-specifiek: een app voor één hand, op een telefoon, tussen twee
   sets door. Regel: alles wat je tijdens een training aanraakt is minstens 44px hoog
   (Apple HIG), de belangrijke knoppen 52px of meer.
   ===================================================================================== */

/* ---------- App-opbouw ---------- */

body.app {
  /* Ruimte voor de tabbalk (en de rusttimer erboven) plus de thuisbalk van de iPhone. */
  padding-bottom: calc(176px + env(safe-area-inset-bottom));
}

.app-kolom {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px;
}

.app-kop {
  padding: 26px 2px 18px;
}

.app-kop h1 {
  font-size: clamp(28px, 7vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.app-kop .subtitle {
  margin-top: 6px;
}

.app-kop .kicker {
  margin-bottom: 8px;
}

/* Op de telefoon blijft "RSLNT" naast het logo staan: dit is de app zelf, geen marketingsite. */
@media (max-width: 760px) {
  .balk {
    flex-wrap: nowrap;
    border-radius: var(--radius-pill);
    padding: 8px 8px 8px 16px;
  }

  .balk .merk-product {
    display: inline;
  }
}

.balk-acties {
  margin-left: auto;
}

.balk-acties .text-link {
  padding: 10px 8px;
}

.wachtrij-indicator {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--warning-tint);
  color: var(--warning);
  white-space: nowrap;
}

/* ---------- Tabbalk onderaan (hetzelfde glas als de balk bovenaan) ---------- */

.tabbalk {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(440px, calc(100% - 32px));
  display: flex;
  gap: 4px;
  padding: 6px;
  border-radius: var(--radius-pill);
  background: var(--glas-bg);
  backdrop-filter: var(--glas-blur);
  -webkit-backdrop-filter: var(--glas-blur);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--glas-schaduw);
}

.tabbalk a {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.tabbalk a svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tabbalk a.actief {
  background: var(--accent);
  color: var(--accent-contrast);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabbalk {
    background: var(--glas-vast);
  }
}

/* ---------- Knoppen ---------- */

.knop-groot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 14px 20px;
  border-radius: var(--radius-pill);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

a.knop-groot {
  background: var(--accent);
  color: var(--accent-contrast);
}

.knop-rij {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.gevaar-link {
  color: var(--danger);
}

/* ---------- Panelen en lijsten ---------- */

.app-kolom .panel {
  padding: 20px 18px;
  margin-bottom: 16px;
}

.panel-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.lijst {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.lijst li {
  border-bottom: 1px solid var(--border);
}

.lijst li:last-child {
  border-bottom: none;
}

.lijst-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 8px 2px;
  color: var(--text);
  text-decoration: none;
}

.lijst-rij strong {
  font-weight: 600;
}

.lijst-meta {
  font-size: 13px;
  color: var(--text-secondary);
}

.getal-groot {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.getal-label {
  font-size: 13px;
  color: var(--text-secondary);
}

.getallen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 10px 0 4px;
}

.invoer-rij {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 14px;
}

.invoer-rij input {
  font-size: 20px;
  font-weight: 700;
  min-height: 52px;
}

.invoer-rij button {
  min-height: 52px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  font-size: 15px;
}

/* ---------- Training: een kaart per oefening ---------- */

.oefening {
  scroll-margin-top: 96px;
}

.oefening-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.oefening-kop h2 {
  font-size: 19px;
  line-height: 1.25;
}

.doel {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}

.oefening-badges {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.vorige {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--text-secondary);
}

.vorige strong {
  color: var(--text);
  font-weight: 600;
}

/* Het voorstel. Kleur zegt de richting: groen omhoog, oranje terug (kniepijn),
   blauw eerste keer, paars moeilijkere variant, neutraal gelijk. */
.voorstel {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 12px 0 2px;
  padding: 11px 13px;
  border-radius: var(--radius);
  background: var(--neutral-tint);
}

.voorstel-waarde {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.voorstel-reden {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.kleur-omhoog { color: var(--success); }
.kleur-terug { color: var(--warning); }
.kleur-moeilijker { color: var(--purple); }

.voorstel-omhoog { background: var(--success-tint); }
.voorstel-omhoog .voorstel-waarde { color: var(--success); }
.voorstel-terug { background: var(--warning-tint); }
.voorstel-terug .voorstel-waarde { color: var(--warning); }
.voorstel-eerste_keer { background: var(--info-tint); }
.voorstel-eerste_keer .voorstel-waarde { color: var(--info); }
.voorstel-moeilijker { background: var(--purple-tint); }
.voorstel-moeilijker .voorstel-waarde { color: var(--purple); }

/* ---------- Training: sets ---------- */

.set {
  border-top: 1px solid var(--border);
  padding: 14px 0 12px;
  margin-top: 12px;
}

.set + .set {
  margin-top: 0;
}

.set-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
}

.set-nummer {
  font-size: 14px;
  font-weight: 700;
}

.set.opgeslagen .set-nummer::after {
  content: " ✓";
  color: var(--success);
}

.set-velden {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.set-velden.enkel {
  grid-template-columns: 1fr;
}

.veld-label {
  display: block;
  margin: 0 0 5px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: center;
}

.stepper {
  display: flex;
  align-items: stretch;
  border-radius: var(--radius);
  border: 1px solid var(--glas-rand);
  background: var(--glas-dun-bg);
  box-shadow: var(--glas-dun-schaduw);
  overflow: hidden;
}

.stepper button {
  flex: 0 0 48px;
  min-height: 54px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}

.stepper button:hover {
  background: var(--neutral-tint);
}

.stepper button:active {
  background: var(--accent-tint);
  transform: none;
}

/* Het getal zelf: groot genoeg om vanaf de bank te lezen. */
.stepper input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stepper input:focus {
  box-shadow: inset 0 0 0 2px var(--accent-ring);
}

.keuze-rij {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.keuze-rij > .veld-label {
  flex: 0 0 34px;
  margin: 0;
  text-align: left;
}

.keuzes {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.keuzes.schaal-11 {
  grid-template-columns: repeat(11, 1fr);
  gap: 3px;
}

.keuze {
  min-height: 44px;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glas-rand);
  background: var(--glas-dun-bg);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.keuzes.schaal-11 .keuze {
  font-size: 13.5px;
}

.keuze:hover {
  background: var(--neutral-tint);
}

.keuze[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

/* Kniepijn vanaf de grens (4) valt op: dat is waar de regel ingrijpt. */
.keuze.pijn-grens[aria-pressed="true"] {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.knie-knop {
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
}

.set-acties {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.set-acties .opslaan {
  flex: 1;
  min-height: 52px;
  border-radius: var(--radius-pill);
  font-size: 16px;
}

.set.opgeslagen .set-acties .opslaan {
  display: none;
}

.set-status {
  font-size: 12.5px;
  color: var(--text-tertiary);
}

.set-extra {
  margin-top: 6px;
  min-height: 44px;
}

.superset-badge {
  background: var(--purple-tint);
  color: var(--purple);
}

.notitie textarea {
  min-height: 110px;
  font-size: 16px;
}

/* ---------- Schema-editor ---------- */

.tabs {
  display: flex;
  gap: 6px;
  margin: 0 -16px 16px;
  padding: 2px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs button {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  background: var(--glas-dun-bg);
  color: var(--text);
  border: 1px solid var(--glas-rand);
}

.tabs button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

.regel {
  border-top: 1px solid var(--border);
  padding: 14px 0;
}

.regel:first-of-type {
  border-top: none;
}

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

.regel-kop select {
  flex: 1;
  min-height: 44px;
  font-weight: 600;
}

.icoon-knop {
  flex: 0 0 44px;
  min-height: 44px;
  padding: 0;
  border-radius: var(--radius-sm);
  background: var(--glas-dun-bg);
  border: 1px solid var(--glas-rand);
  color: var(--text);
  font-size: 18px;
}

.regel-velden {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.regel-velden label {
  margin: 0 0 4px;
  font-size: 11.5px;
}

.regel-velden input {
  min-height: 44px;
  padding: 8px 6px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}

.oefening-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}

.oefening-form .breed {
  grid-column: 1 / -1;
}

/* iOS zoomt in op velden met een lettergrootte onder 16px. In de sportschool wil je dat niet. */
@media (max-width: 760px) {
  input, select, textarea {
    font-size: 16px;
  }
}

.ruimte-boven {
  margin-top: 16px;
}

/* In de app nemen lege meldingen geen ruimte in: elke centimeter scherm telt. */
.app-kolom .error:empty,
.app-kolom .success:empty {
  display: none;
}

/* ---------- Training: doel, cue, wisselen ---------- */

.doel-meta {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.cue {
  margin: 8px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--border-strong);
  font-size: 13.5px;
  color: var(--text-secondary);
}

.badge-knie {
  background: var(--warning-tint);
  color: var(--warning);
}

.wissel-knop {
  display: inline-block;
  margin-top: 8px;
  min-height: 36px;
}

.wissel-lijst {
  margin-top: 10px;
}

.wissel-lijst .veld-label {
  text-align: left;
}

.wissel-lijst .knop-rij button.secondary {
  min-height: 44px;
  border-radius: var(--radius-pill);
}

.waarom {
  font-weight: 600;
  white-space: nowrap;
}

.fase-paneel p {
  margin: 0;
  font-size: 14px;
}

.fase-paneel p + p {
  margin-top: 8px;
}

.fase-deload {
  border-color: color-mix(in srgb, var(--purple) 40%, transparent);
}

/* ---------- Rusttimer (boven de tabbalk) ---------- */

.rusttimer {
  position: fixed;
  z-index: 31;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(440px, calc(100% - 32px));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 18px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: var(--shadow-lg);
}

.rusttimer.klaar {
  background: var(--success);
  color: #fff;
}

.rust-tekst {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.rust-label {
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rust-tijd {
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rusttimer button {
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--accent-contrast);
  color: var(--accent);
}

.rusttimer button.secondary {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.rusttimer.klaar button {
  background: #fff;
  color: var(--success);
}

/* ---------- Vandaag: fase van het programma ---------- */

.fase-info {
  margin-bottom: 14px;
  font-size: 14px;
}

.fase-info p {
  margin: 0 0 6px;
}

.fase-info .text-link {
  min-height: 36px;
}

.regel-velden .breed {
  grid-column: 1 / -1;
}

.regel-velden .breed input {
  text-align: left;
  font-weight: 500;
}

/* ---------- Wetenschap ---------- */

.inhoud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
}

.inhoud a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glas-rand);
  background: var(--glas-dun-bg);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

.bron-kaart {
  scroll-margin-top: 96px;
}

.wetenschap .panel h2 {
  font-size: 19px;
  line-height: 1.3;
  margin-bottom: 8px;
}

.wetenschap .panel p {
  margin: 0 0 10px;
}

.wetenschap .kicker {
  margin-bottom: 6px;
}

.in-rslnt {
  padding: 11px 13px;
  border-radius: var(--radius);
  background: var(--accent-tint);
}

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

.zekerheid-lijst,
.bronnen {
  margin: 8px 0 10px;
  padding-left: 18px;
  font-size: 14px;
}

.zekerheid-lijst {
  list-style: none;
  padding-left: 0;
}

.zekerheid-lijst li,
.bronnen li {
  margin-bottom: 8px;
}

.bronnen a {
  font-weight: 600;
}

.bewijs-meta { background: var(--success-tint); color: var(--success); }
.bewijs-studie { background: var(--info-tint); color: var(--info); }
.bewijs-consensus { background: var(--purple-tint); color: var(--purple); }
.bewijs-preprint { background: var(--warning-tint); color: var(--warning); }
.bewijs-praktijk { background: var(--neutral-tint); color: var(--text-secondary); }

.wetenschap code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--neutral-tint);
}

#andere-schemas {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-top: 6px;
}

#andere-schemas .set-extra {
  margin-top: 0;
}

/* ---------- Grafieken (grafiek.js) ----------
   Reekskleur gevalideerd met de dataviz-validator: #0a63ad op het glas (#e4d8cb) en #3987e5
   op donker (#1b1b1b) halen allebei lichtheid, chroma en contrast ≥ 3:1. */

:root {
  --grafiek-reeks: #0a63ad;
  --grafiek-band: rgba(10, 99, 173, 0.12);
  --grafiek-raster: rgba(29, 29, 31, 0.10);
  --grafiek-vlak: #e4d8cb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grafiek-reeks: #3987e5;
    --grafiek-band: rgba(57, 135, 229, 0.18);
    --grafiek-raster: rgba(255, 255, 255, 0.12);
    --grafiek-vlak: #1b1b1b;
  }
}

.grafiek {
  position: relative;
  margin-top: 8px;
  touch-action: pan-y;
}

.grafiek svg {
  display: block;
  max-width: 100%;
  height: auto;
  overflow: visible;
}

.grafiek svg:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

.grafiek-raster line {
  stroke: var(--grafiek-raster);
  stroke-width: 1;
}

.grafiek-as,
.grafiek-label,
.grafiek-waarde {
  font-size: 11.5px;
  fill: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.grafiek-label {
  font-size: 12.5px;
  fill: var(--text-secondary);
}

.grafiek-waarde {
  font-weight: 600;
  fill: var(--text-secondary);
}

.grafiek-lijn {
  fill: none;
  stroke: var(--grafiek-reeks);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.grafiek-punt,
.grafiek-eindpunt {
  fill: var(--grafiek-reeks);
  stroke: var(--grafiek-vlak);
  stroke-width: 2;
}

.grafiek-punt {
  fill-opacity: 0.45;
}

.grafiek-band {
  fill: var(--grafiek-band);
}

.grafiek-staaf {
  fill: var(--grafiek-reeks);
}

.grafiek-referentie {
  stroke: var(--text-tertiary);
  stroke-width: 1;
}

.grafiek-draad {
  stroke: var(--text-tertiary);
  stroke-width: 1;
}

.grafiek-raakvlak {
  fill: transparent;
  outline: none;
}

.grafiek-raakvlak:hover,
.grafiek-raakvlak:focus {
  fill: var(--neutral-tint);
}

.grafiek-tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  min-width: 120px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  font-size: 12.5px;
}

.grafiek-tip-rij {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.grafiek-tip-rij span:last-child {
  color: var(--text-secondary);
}

.grafiek-sleutel {
  display: inline-block;
  flex: 0 0 auto;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: var(--grafiek-reeks);
}

.grafiek-sleutel-punt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.6;
}

.grafiek-sleutel-band {
  height: 10px;
  border-radius: 2px;
  background: var(--grafiek-band);
}

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.legenda span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.grafiek-tabel {
  margin-top: 8px;
  font-size: 13px;
}

.grafiek-tabel summary {
  cursor: pointer;
  min-height: 36px;
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--text-secondary);
}

.tabel-scroll {
  overflow-x: auto;
  max-height: 320px;
}

table.tabel {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.tabel th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

.tabel td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

main.laden .grafiek {
  opacity: 0.5;
  transition: opacity 0.2s var(--ease);
}

/* ---------- Lichaam ---------- */

.waarden .lijst-rij {
  align-items: flex-start;
}

.waarde-rechts {
  font-size: 18px;
  white-space: nowrap;
}

.tempo-advies {
  margin: 10px 0 4px;
  font-size: 14px;
}

#ontbreekt {
  margin-bottom: 16px;
}

/* ---------- Herstelcheck ---------- */

.herstel-rij {
  margin-top: 12px;
}

.herstel-kop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.herstel-kop .veld-label {
  margin: 0;
  text-align: left;
}

.schaal-uitleg {
  font-size: 12px;
  color: var(--text-tertiary);
}

.signalen {
  list-style: none;
  margin: 6px 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.signaal {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--neutral-tint);
  font-size: 14px;
  line-height: 1.3;
}

.signaal-teken {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: var(--glas-vast);
}

.signaal-goed .signaal-teken {
  background: var(--success-tint);
  color: var(--success);
}

.signaal-let_op {
  background: var(--warning-tint);
}

.signaal-let_op .signaal-teken {
  color: var(--warning);
}

.getal-groot .eenheid {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ---------- Keuzeknoppen met tekst (personaliseren) ---------- */

.keuzes-tekst {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
}

.keuzes-tekst .keuze {
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.25;
  font-variant-numeric: normal;
}

.keuzes-3 {
  grid-template-columns: repeat(3, 1fr);
}

.keuzes-6 {
  grid-template-columns: repeat(6, 1fr);
}

.keuze[aria-checked="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.opmerkingen {
  display: grid;
  gap: 8px;
}

.opmerkingen li.melding {
  border-bottom: none;
}

.voorstel-regel {
  align-items: flex-start;
}

.voorstel-regel .waarom {
  flex: 0 0 auto;
  padding-top: 2px;
}

.voorstel-cue {
  font-style: italic;
}

/* Weekdoel per spiergroep in een staafgrafiek: een streep dwars door de staaf. */
.grafiek-doel {
  stroke: var(--text);
  stroke-width: 2;
  stroke-linecap: round;
}

.grafiek-sleutel-doel {
  width: 2px;
  height: 12px;
  background: var(--text);
}

/* ---------- Bibliotheek ---------- */

.bieb-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}

.bieb-filters .breed {
  grid-column: 1 / -1;
}

.pil-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.pil-filter {
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--glas-dun-bg);
  color: var(--text);
  border: 1px solid var(--glas-rand);
  font-size: 14px;
}

.pil-filter[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.bieb-aantal {
  margin: 4px 2px 0;
}

.bieb-rij {
  justify-content: flex-start;
  gap: 12px;
}

.bieb-duim {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--neutral-tint);
}

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

.bieb-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.bieb-fotos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

/* De foto's hebben een witte achtergrond; een lichte rand houdt ze ook in de donkere modus netjes. */
.bieb-fotos img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--border);
}

.bieb-uitleg {
  margin: 8px 0 0;
  padding-left: 22px;
  line-height: 1.55;
}

.bieb-uitleg li + li {
  margin-top: 6px;
}

.schema-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.schema-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  color: var(--text);
  text-decoration: none;
}

@media (max-width: 420px) {
  .schema-links {
    grid-template-columns: 1fr;
  }
}

/* Lange waarden (spiergroepen) mogen naar een volgende regel. */
.bieb-feiten .waarde-rechts {
  white-space: normal;
  text-align: right;
  min-width: 0;
}

.bieb-feiten .lijst-meta {
  flex: 0 0 auto;
}

.vraag {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ---------- Portaal en accountpagina's ---------- */

body.portaal {
  padding-bottom: calc(48px + env(safe-area-inset-bottom));
}

/* Een link die eruitziet als een knop (portaal, account). */
.knop-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  background: var(--accent);
  color: var(--accent-contrast);
}

.knop-link:hover {
  background: var(--accent-hover);
}

.knop-link.knop-groot {
  border-radius: var(--radius-pill);
}

.knop-link.secondary {
  background: var(--glas-dun-bg);
  backdrop-filter: var(--glas-dun-blur);
  -webkit-backdrop-filter: var(--glas-dun-blur);
  border: 1px solid var(--glas-rand);
  color: var(--text);
}

.knop-link.secondary:hover {
  background: var(--border-strong);
}

.portaal-held {
  padding: 24px 0 8px;
}

.portaal-held h1 {
  font-size: clamp(32px, 9vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 6px 0 14px;
}

.portaal-held .knop-rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 22px 0 28px;
}

@media (max-width: 420px) {
  .portaal-held .knop-rij {
    grid-template-columns: 1fr;
  }
}

.portaal-kaarten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

@media (max-width: 640px) {
  .portaal-kaarten {
    grid-template-columns: 1fr;
  }
}

.portaal-kaarten h2 {
  font-size: 18px;
  margin: 0 0 6px;
}

.portaal-kaarten p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

.vinkje.toestemming span {
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-secondary);
}

.vinkje.toestemming input {
  flex: 0 0 auto;
  margin-top: 3px;
}

.gevaar-zone {
  border: 1px solid var(--danger);
}

/* Voettekst op de openbare pagina's (welkom, privacy): 1-op-1 uit CMMNTY overgenomen, zodat het
   LuzeX-logo ook hier naar luzex.nl verwijst, net als in ACCRD en CMMNTY. */
.voet {
  max-width: 1200px;
  width: 100%;
  margin: 48px auto 0;
  padding: 32px 24px 48px;
}

.voet-boven {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}

.voet-merk {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.voet-tagline {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  max-width: 34ch;
}

.voet-kolom {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.voet-kop {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.voet-kolom a {
  font-size: 14px;
  color: var(--text);
}

.voet-copyright {
  margin: 20px 0 0;
  color: var(--text-tertiary);
  font-size: 12px;
}

@media (max-width: 640px) {
  .voet-boven {
    grid-template-columns: 1fr 1fr;
  }

  .voet-merk {
    grid-column: 1 / -1;
  }
}