.card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 16px;
  background:
    radial-gradient(170px 170px at 12% 18%, rgba(184,144,80,0.30), rgba(184,144,80,0) 70%),
    radial-gradient(200px 200px at 86% 78%, rgba(58,85,120,0.38), rgba(58,85,120,0) 72%),
    linear-gradient(160deg, var(--c1) 0%, var(--c2) 45%, var(--c1) 100%);
  background-size: 200% 200%, 230% 230%, 220% 220%;
  animation: gpools 17s ease-in-out infinite;
  box-shadow: 0 12px 28px var(--shadow);
  margin-bottom: 14px;
}
.card-title { font-size: 22px; margin-bottom: 6px; }

/* Hero-kaart op Home: exact dezelfde gelaagde opbouw als het origineel (sheen-sweep,
   vervagende gloed-blob, donker verloop voor leesbaarheid, dunne rand). */
.hero-card { position: relative; border-radius: 14px; overflow: hidden; margin-bottom: 14px; min-height: 186px; box-shadow: 0 16px 34px var(--shadow); }
.hero-sheen { position: absolute; top: 0; bottom: 0; left: 0; width: 70px; pointer-events: none; z-index: 3; background: linear-gradient(90deg, rgba(237,232,223,0) 0%, rgba(237,232,223,0.13) 50%, rgba(237,232,223,0) 100%); animation: sheen 7s ease-in-out infinite; }
.hero-glow-pro, .hero-glow-basic { position: absolute; inset: -30%; filter: blur(34px); }
.hero-glow-pro { display: none; background: linear-gradient(100deg,#0C1829 0%,#3A5578 25%,#B89050 55%,#EDE8DF 80%,#0C1829 100%); background-size: 220% 220%; opacity: .6; animation: drift 11s ease-in-out infinite, gshift 8s ease-in-out infinite; }
.hero-glow-basic { background: linear-gradient(90deg,#B89050 0%,#EDE8DF 12.5%,#B89050 25%,#EDE8DF 37.5%,#B89050 50%,#EDE8DF 62.5%,#B89050 75%,#EDE8DF 87.5%,#B89050 100%); background-size: 220% 220%; filter: blur(40px); opacity: .3; animation: drift 14s ease-in-out infinite, gshift 9s ease-in-out infinite; }
[data-tier="pro"] .hero-glow-pro , [data-tier="max"] .hero-glow-pro { display: block; }
[data-tier="pro"] .hero-glow-basic , [data-tier="max"] .hero-glow-basic { display: none; }
.hero-fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,11,13,0.45) 0%, rgba(10,11,13,0.88) 70%, #0A0B0D 100%); }
.hero-border { position: absolute; inset: 0; border-radius: 14px; border: 1px solid var(--line2); pointer-events: none; }
.hero-content { position: relative; padding: 18px; }

/* Premium-taal: elke kaart wordt sneller/onrustiger en krijgt een gouden randgloed
   plus een lichtsweep, exact zoals [data-tier="premium"] [data-card] in het origineel. */
[data-tier="pro"] .card, [data-tier="max"] .card,
[data-tier="pro"] .tile , [data-tier="max"] .tile {
  animation: gpools 11s ease-in-out infinite, edgeglow 7s ease-in-out infinite, cardglow 9s ease-in-out infinite;
}
[data-tier="pro"] .card::after, [data-tier="max"] .card::after,
[data-tier="pro"] .tile::after , [data-tier="max"] .tile::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(237,232,223,0) 0%, rgba(237,232,223,0.09) 50%, rgba(237,232,223,0) 100%);
  animation: gscan 6.5s ease-in-out infinite;
}

/* Handmatige premium-preview: voor kaarten die de Pro-uitstraling altijd moeten laten zien
   (vergelijkscherm, Pro-locked tegels) ongeacht de huidige tier van de gebruiker. */
.tier-card { animation: gpools 11s ease-in-out infinite, edgeglow 7s ease-in-out infinite, cardglow 9s ease-in-out infinite; }
.tier-card::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(237,232,223,0) 0%, rgba(237,232,223,0.09) 50%, rgba(237,232,223,0) 100%);
  animation: gscan 6.5s ease-in-out infinite;
}

.pill-row { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg2);
  border-radius: 4px;
  padding: 8px 12px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pill.active { border-color: var(--gold); background: rgba(184,144,80,0.12); color: var(--gsoft); }
.pill .lock { opacity: .8; }

.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.tile {
  position: relative; overflow: hidden; text-align: left; border: 1px solid var(--line); border-radius: 14px;
  padding: 15px 14px 16px;
  background:
    radial-gradient(170px 170px at 12% 18%, rgba(184,144,80,0.30), rgba(184,144,80,0) 70%),
    radial-gradient(200px 200px at 86% 78%, rgba(58,85,120,0.38), rgba(58,85,120,0) 72%),
    linear-gradient(160deg, var(--c1) 0%, var(--c2) 45%, var(--c1) 100%);
  background-size: 200% 200%, 230% 230%, 220% 220%;
  animation: gpools 17s ease-in-out infinite;
  cursor: pointer; box-shadow: 0 10px 24px var(--shadow); min-height: 120px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
}
.tile-title { font-family: var(--font-display); font-size: 18px; line-height: 1.1; }
.tile-stat {
  font-family: var(--font-display); font-size: 27px;
  background-image: linear-gradient(90deg,
    var(--gold) 0%,
    var(--gold) calc(var(--goud-deel) * 50%),
    var(--fg) 50%,
    var(--gold) calc(100% - var(--goud-deel) * 50%),
    var(--gold) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: gshift 8s ease-in-out infinite;
}
.tile-note { font-size: 11.5px; color: var(--fg2); margin-top: 4px; }

.stat-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(184,144,80,0.1); }
.stat-row:last-child { border-bottom: 0; }
.stat-row .k { font-size: 13px; color: var(--fg2); }
.stat-row .v { font-family: var(--font-display); font-size: 20px; }

.badge {
  font-family: var(--font-label); font-weight: 700; font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 4px 8px; border-radius: 3px; display: inline-flex; align-items: center; gap: 4px;
}
.badge-free { color: var(--fg2); border: 1px solid var(--line); }
.badge-pro {
  color: #0C1829;
  background: linear-gradient(115deg, var(--gold) 0%, var(--gsoft) 50%, var(--gold) 100%);
  background-size: 220% 220%; animation: gflow 8s linear infinite;
}
.badge-elite { color: var(--gsoft); border: 1px solid var(--gold); background: rgba(184,144,80,0.1); }

/* Max moet in een lijst meteen te onderscheiden zijn van Pro. Pro is de gouden verloopbadge
   die de app al gebruikte; Max is voller en donkerder omrand, zodat hij zwaarder oogt zonder
   een nieuwe kleur te introduceren. Het palet blijft ivoor, navy en goud. */
.badge-max {
  color: var(--ivoor, #EDE8DF);
  background: var(--navy, #0C1829);
  border: 1px solid var(--gold);
  box-shadow: inset 0 0 0 1px rgba(184,144,80,0.25);
}

.lock-badge {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(10,11,13,0.7); border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}

.list-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 0; border-bottom: 1px solid rgba(184,144,80,0.1); cursor: pointer;
}
.list-row:last-child { border-bottom: 0; }

.field { margin-bottom: 14px; }
.field label { display: block; font-family: var(--font-label); font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg2); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 6px;
  padding: 12px; color: var(--fg); font-size: 15px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); }

.checkbox-row { display: flex; align-items: flex-start; gap: 10px; }
.checkbox-row input[type="checkbox"] { width: 20px; height: 20px; flex: none; accent-color: var(--gold); margin-top: 2px; }

/* Instapeis / doorschuifcriterium blocking callout */
.callout {
  border: 1px solid var(--gold); border-radius: 12px; padding: 16px; margin-bottom: 14px;
  background: rgba(184,144,80,0.08);
}
.callout .eyebrow { color: var(--gsoft); }
.callout p { font-size: 14px; line-height: 1.6; color: var(--fg); margin: 8px 0 0; }

/* Skill ladder */
.ladder-step {
  display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 8px; cursor: pointer;
}
.ladder-step.done { border-color: var(--ok); background: rgba(110,155,110,0.08); }
.ladder-step.locked { opacity: .45; cursor: not-allowed; }
.ladder-step .step-num {
  width: 28px; height: 28px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 14px; border: 1px solid var(--line);
}
.ladder-step.done .step-num { background: var(--ok); border-color: var(--ok); color: #0A0B0D; }

/* Timer */
.timer-ring-wrap { display: flex; align-items: center; justify-content: center; padding: 20px 0; }
.timer-big { font-family: var(--font-display); font-size: 64px; text-align: center; line-height: 1; }
.timer-phase-label { text-align: center; margin-top: 4px; }
.timer-phase-label.werk { color: var(--gsoft); }
.timer-phase-label.rust { color: var(--ok); }
/* Elke voortgangsbalk in het origineel gebruikt exact dezelfde schuivende
   navy-staalblauw-goud-ivoor diagonaal (gslide), nooit een vlakke goudbalk. */
.progress-bar { height: 5px; border-radius: 3px; background: rgba(184,144,80,0.1); overflow: hidden; }
.progress-bar .fill {
  height: 100%;
  background: linear-gradient(90deg,#0C1829 0%,#3A5578 7.5%,#B89050 12.5%,#3A5578 17.5%,#0C1829 25%,#3A5578 32.5%,#B89050 37.5%,#3A5578 42.5%,#0C1829 50%,#3A5578 57.5%,#B89050 62.5%,#3A5578 67.5%,#0C1829 75%,#3A5578 82.5%,#B89050 87.5%,#3A5578 92.5%,#0C1829 100%);
  background-size: 200% 100%;
  animation: gslide 11s linear infinite;
  transition: width 240ms ease;
}
.progress-bar.slow .fill { animation-duration: 14s; }

/* Verticale scheidingslijnen tussen kerncijfers (bijv. Streak/kg/Volgende), ook
   animerend in het origineel (gflowv), niet statisch. */
.stat-divider {
  width: 1px;
  background: linear-gradient(180deg, var(--eb) 0%, var(--fg) 25%, var(--eb) 50%, var(--fg) 75%, var(--eb) 100%);
  background-size: 100% 200%;
  animation: gflowv 9s linear infinite;
}

/* Bottom sheet / modal */
.sheet-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.6); z-index: 20;
  display: flex; align-items: flex-end;
}
.sheet {
  width: 100%; background: linear-gradient(160deg, var(--c1) 0%, var(--c2) 100%);
  border-top: 1px solid var(--line2); border-radius: 20px 20px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0));
}
.sheet h3 { font-size: 24px; margin-bottom: 8px; }
.sheet p { font-size: 14px; color: var(--fg2); line-height: 1.6; margin: 0 0 16px; }

.modal-center { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,0.6); }
.modal-box { width: 100%; max-width: 340px; background: linear-gradient(160deg, var(--c1) 0%, var(--c2) 100%); border: 1px solid var(--line2); border-radius: 16px; padding: 20px; }

/* Camera scanner */
.scan-view { position: absolute; inset: 0; background: #000; z-index: 25; display: flex; flex-direction: column; }
.scan-video-wrap { position: relative; flex: 1; overflow: hidden; background: #050608; }
.scan-video-wrap video, .scan-video-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-reticle { position: absolute; inset: 40px; border-radius: 18px; pointer-events: none; }
.scan-reticle::before, .scan-reticle::after {
  content: ""; position: absolute; width: 28px; height: 28px; border-color: var(--gold); border-style: solid;
}
.scan-corner { position: absolute; width: 26px; height: 26px; border-color: var(--gold); border-style: solid; border-width: 0; }
.scan-corner.tl { top: 40px; left: 40px; border-top-width: 3px; border-left-width: 3px; }
.scan-corner.tr { top: 40px; right: 40px; border-top-width: 3px; border-right-width: 3px; }
.scan-corner.bl { bottom: 40px; left: 40px; border-bottom-width: 3px; border-left-width: 3px; }
.scan-corner.br { bottom: 40px; right: 40px; border-bottom-width: 3px; border-right-width: 3px; }
.scan-footer { flex: none; padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0)); text-align: center; background: #000; }
.scan-shoot {
  width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--gold);
  background: radial-gradient(circle, var(--gsoft), var(--gold)); margin: 0 auto 10px; cursor: pointer;
}
.scan-close { position: absolute; top: 14px; left: 14px; z-index: 2; color: var(--fg); background: rgba(0,0,0,0.5); border: 0; border-radius: 6px; padding: 8px 12px; font-family: var(--font-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; cursor: pointer; }
.scan-label { position: absolute; top: 14px; right: 14px; z-index: 2; color: var(--gsoft); font-family: var(--font-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; background: rgba(0,0,0,0.5); padding: 8px 12px; border-radius: 6px; }
.scan-hint { color: var(--fg2); font-size: 13px; margin: 0 0 14px; }

/* Aftellen bij de bodyscan. Groot en midden in beeld, want de gebruiker staat op twee
   meter afstand en moet het getal kunnen lezen zonder naar de telefoon te lopen. */
.aftel-getal {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 140px; line-height: 1;
  color: var(--gsoft); text-shadow: 0 4px 30px rgba(0,0,0,0.7);
  pointer-events: none;
}
.aftel-getal.tik { animation: aftel-puls 0.9s ease-out; }
@keyframes aftel-puls {
  0%   { transform: scale(1.25); opacity: 0.35; }
  30%  { transform: scale(1);    opacity: 1; }
  100% { transform: scale(1);    opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .aftel-getal.tik { animation: none; }
}
.ai-note { font-size: 11.5px; color: var(--fg3); font-style: italic; margin-top: 8px; }

.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--gold); animation: spin 0.8s linear infinite; margin: 0 auto; }

.disabled-text { pointer-events: none; opacity: .6; }

/* ---------------------------------------------------------------------------
   Splashscherm, 1:1 overgenomen uit het Claude Design-canvas
   (GORRE App.dc.html, het blok achter <sc-if value="{{ isSplash }}">).
   Maten, kleuren, blur, opacity, animatieduur en letterspatiëring zijn letterlijk
   die van het canvas; er is niets naar eigen inzicht aangepast.

   Eén bewuste afwijking: de logomask wijst naar het gecorrigeerde lockup uit
   01.context/logo/ in plaats van naar GORRE_logo_lockup_transparant.png uit het
   canvas. Die canvas-PNG bevat nog de oude, te brede G die op 31 juli 2026 is
   vervangen. Zie CLAUDE.md, kopje "Logo's": die oude vorm is geen geldige bron meer.
   --------------------------------------------------------------------------- */
.splash-overlay {
  position: absolute; inset: 0; z-index: 20;
  background: #07090D;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px;
}
.splash-aurora {
  position: absolute; inset: -25%;
  background: linear-gradient(100deg, #0C1829 0%, #3A5578 25%, #B89050 55%, #EDE8DF 80%, #0C1829 100%);
  background-size: 200% 200%;
  filter: blur(58px);
  opacity: .5;
  animation: drift 12s ease-in-out infinite, gshift 9s ease-in-out infinite;
}
.splash-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(70% 55% at 50% 45%, rgba(7,9,13,0.1) 0%, rgba(7,9,13,0.86) 70%);
}
.splash-logo {
  position: relative;
  width: 210px; height: 147px;
  background: linear-gradient(115deg, #B89050 0%, #EDE8DF 50%, #B89050 100%);
  background-size: 250% 250%;
  animation: gshift 7s ease-in-out infinite;
  -webkit-mask-image: url('../assets/logos/gorre-lockup-mono-wit.svg');
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
  mask-image: url('../assets/logos/gorre-lockup-mono-wit.svg');
  mask-repeat: no-repeat; mask-position: center; mask-size: contain;
}
.splash-tagline {
  position: relative;
  font-family: var(--font-body); font-weight: 300;
  font-size: 14px; line-height: 1.6;
  color: var(--fg2); text-align: center;
  max-width: 250px; margin: 26px 0 34px;
}
.splash-btn {
  position: relative;
  width: 100%; max-width: 280px;
  border-radius: 3px;
  font-family: var(--font-label); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
}
.splash-btn-primary {
  border: 0; padding: 15px; font-size: 13.5px;
  color: #0C1829;
  background: linear-gradient(115deg, #B89050 0%, #D8B685 50%, #B89050 100%);
  background-size: 220% 220%;
  animation: gshift 7s ease-in-out infinite;
  box-shadow: 0 10px 26px rgba(184,144,80,0.3);
}
.splash-btn-ghost {
  margin-top: 12px;
  border: 1px solid rgba(184,144,80,0.45); padding: 14px; font-size: 13px;
  background: transparent;
  color: var(--gsoft);
}

/* Taalkeuze: compact raster in plaats van veertien volle regels onder elkaar.
   Drie kolommen op telefoonbreedte, zodat de hele lijst in één blik past en er
   niet gescrold hoeft te worden om je taal te vinden. */
.taal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}
.taal-optie {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-height: 52px;
  padding: 9px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  color: var(--fg);
  font-family: var(--font-body); font-weight: 500; font-size: 13.5px;
  line-height: 1.25; text-align: center;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.taal-optie:hover { border-color: var(--line2); }
.taal-optie.active {
  border-color: var(--gold);
  background: rgba(184, 144, 80, 0.12);
  color: var(--fg);
}
.taal-optie .taal-hint {
  font-family: var(--font-label); font-weight: 600;
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gsoft);
}


/* Spierkaart. Twee lagen op elkaar: de anatomische tekening als plaat, daarboven de
   klikbare zonevlakken. Ze delen hetzelfde raster van 1024 bij 1536, dus `inset: 0` op
   een even brede SVG is genoeg om ze te laten samenvallen.

   De vlakken zijn knoppen, dus ze moeten er ook als knop uitzien: een cursor, een hover
   en een zichtbare focusring voor wie met het toetsenbord werkt. */
.spierkaart { position: relative; width: 100%; display: block; }
.spierkaart-plaat { width: 100%; display: block; user-select: none; }
.spierkaart-vlakken { position: absolute; inset: 0; width: 100%; height: 100%; }
.spierzone { cursor: pointer; transition: opacity 0.15s ease; }
.spierzone:hover { opacity: 0.82; }
.spierzone:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.spierzone.actief { filter: brightness(1.12); }

/* De blessuregids laat het aangedane vlak rustig aan en uit gaan, zodat je in één oogopslag
   ziet waar de klacht zit. Rustig is hier het woord dat telt: twee seconden per cyclus en
   nooit helemaal uit. Een snel knipperend rood vlak op een scherm over pijn leest als een
   alarm, en dat is precies de toon die deze gids niet moet hebben.

   Het vlak blijft ook stilstaand zichtbaar, want de kleur zegt al waar het zit. De beweging
   is de extra, niet de boodschap. Daarom volgt hij wél de bewegingsvoorkeur, anders dan de
   oefeningtekeningen waar de beweging de uitleg zelf is. */
@keyframes blessure-knippert {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
.spierzone.knippert { animation: blessure-knippert 2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .spierzone { transition: none; }
}

/* De rij van de gekozen scan in de historie. Goud aan de rand en niet als vulling: de
   kaart ernaast gebruikt kleur al om iets anders te zeggen. */
.scan-rij.actief { border-color: var(--gold); }

/* Badge en viering. De animatie is kort en eenmalig: een badge die blijft bewegen leidt
   af van de tekst eronder. */
.badge-svg { display: block; margin: 0 auto; }
.vier-badge { animation: badge-op 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes badge-op {
  0%   { transform: scale(0.5) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(1.06) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .vier-badge { animation: none; }
}

/* BMI. De balk is opzettelijk rustig: vier tinten van dezelfde navy, oplopend in dekking,
   en niet rood-oranje-groen. Een stoplichtbalk maakt van een getal een oordeel, en dat is
   precies wat BMI niet kan dragen (zie de toelichting in js/bmi.js). Het enige wat er echt
   uitspringt is de gouden streep: jouw waarde. */
.bmi-getal {
  font-family: var(--font-display), sans-serif;
  font-size: 44px; line-height: 1; color: var(--fg); margin: 6px 0 14px;
}
.bmi-balk {
  position: relative; display: flex; height: 12px; border-radius: 6px; overflow: visible;
}
.bmi-vak { height: 12px; }
.bmi-vak:first-child { border-radius: 6px 0 0 6px; }
.bmi-vak:last-child { border-radius: 0 6px 6px 0; }
/* Ivoortinten en geen navytinten: de kaart eronder is zelf navy, dus navy op navy is
   onzichtbaar. Precies dezelfde fout zat eerder in de spierkaart. */
.bmi-vak-0 { background: rgba(237,232,223,0.10); }
.bmi-vak-1 { background: rgba(237,232,223,0.28); }
.bmi-vak-2 { background: rgba(237,232,223,0.17); }
.bmi-vak-3 { background: rgba(237,232,223,0.09); }
.bmi-streep {
  position: absolute; top: -5px; bottom: -5px; width: 3px; border-radius: 2px;
  background: var(--gold); transform: translateX(-50%);
}
/* Het label hangt onder de streep en mag buiten de balk vallen; daarom `overflow: visible`
   op de balk zelf. */
.bmi-streep > span {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 5px; white-space: nowrap;
  font-family: var(--font-label), sans-serif; font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gsoft);
}
.bmi-schaal {
  position: relative; height: 13px; margin-top: 22px;
  font-size: 10px; color: var(--fg3);
}
.bmi-schaal > span { position: absolute; top: 0; }

/* Achievements als chips. Niet-behaald is gedimd en niet verborgen: zien wat er nog ligt
   motiveert meer dan een lege lijst. */
.achv-chip {
  display: inline-block; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 11.5px; color: var(--fg3);
}
.achv-chip.behaald { border-color: var(--gold); color: var(--gsoft); background: rgba(184,144,80,0.10); }

/* Achievements als badges. Een raster met vaste kolommen in plaats van flex-wrap, zodat de
   schilden onder elkaar uitlijnen ook als de ene naam twee regels nodig heeft en de andere
   één. `auto-fill` met een minimum van 76px geeft vier kolommen op een telefoon en meer op
   een breder scherm, zonder mediaquery. */
.badge-raster {
  display: grid; gap: 12px 6px;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
}
/* WAR30 heeft er maar drie en ze zijn groter, dus die krijgen bredere kolommen. Met het
   gewone raster zouden ze links samendrommen met een gat ernaast. */
.badge-raster-groot { grid-template-columns: repeat(3, 1fr); gap: 12px 10px; }
.badge-tegel {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: 0; padding: 2px 0; color: inherit; font: inherit;
  cursor: default;
}
.badge-tegel.behaald { cursor: pointer; }
.badge-tegel .badge-svg { transition: transform 0.15s ease; }
.badge-tegel.behaald:hover .badge-svg { transform: translateY(-2px); }
.badge-tegel:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
.badge-naam {
  font-size: 10px; line-height: 1.3; text-align: center; color: var(--fg3);
  hyphens: auto; overflow-wrap: anywhere;
}
.badge-tegel.behaald .badge-naam { color: var(--gsoft); }
@media (prefers-reduced-motion: reduce) {
  .badge-tegel .badge-svg { transition: none; }
  .badge-tegel.behaald:hover .badge-svg { transform: none; }
}

/* Uitleg bij een oefening. Dichtgeklapt tot je hem nodig hebt: midden in een set wil je
   het aantal reps zien, geen lap tekst. */
.uitleg {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
  background: rgba(255,255,255,0.02);
}
.uitleg > summary {
  cursor: pointer; list-style: none; font-family: var(--font-label); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; color: var(--gsoft);
}
.uitleg > summary::-webkit-details-marker { display: none; }
.uitleg > summary::after { content: " +"; }
.uitleg[open] > summary::after { content: " –"; }
.patroon-svg { display: block; }

/* ---------------------------------------------------------------------------
   Documenten om af te drukken (Pro). Op het scherm leesbaar in de app-stijl, op
   papier ivoor met zwarte tekst: een donker scherm printen kost een halve cartridge
   en leest slechter dan gewoon papier.
   --------------------------------------------------------------------------- */
.document { font-size: 13.5px; line-height: 1.65; color: var(--fg2); }
.document header { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 18px; }
.doc-merk { font-family: var(--font-label); letter-spacing: 0.22em; font-size: 11px; color: var(--gsoft); }
.document h1 { font-family: var(--font-display); font-size: 30px; color: var(--fg); margin: 6px 0 4px; }
.doc-onderkop { font-family: var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; color: var(--gsoft); margin: 0; }
.document h2 { font-family: var(--font-display); font-size: 21px; color: var(--fg); margin: 22px 0 8px; }
.document h3 { font-size: 15px; color: var(--fg); margin: 16px 0 6px; }
.document h4 { font-size: 13.5px; color: var(--fg); margin: 12px 0 4px; }
.document ul, .document ol { margin: 6px 0 10px; padding-left: 20px; }
.document table { width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: 12.5px; }
.document th { text-align: left; font-family: var(--font-label); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gsoft); padding: 4px 6px; }
.document td { padding: 5px 6px; border-top: 1px solid var(--line); }
.doc-meta { font-size: 12px; color: var(--fg3); }
.doc-voet { margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11px; color: var(--fg3); }

@media print {
  /* Alleen het document op papier: geen navigatie, geen knoppen, geen telefoonrand. */
  body { background: #fff; }
  #phone, #app-view { position: static; height: auto; overflow: visible; box-shadow: none; border: 0; background: #fff; }
  .niet-printen, #nav-root, .statusbar, .nav { display: none !important; }
  .screen { padding: 0; }
  .document { color: #111; font-size: 11pt; }
  .document h1, .document h2, .document h3, .document h4 { color: #000; }
  .doc-merk, .doc-onderkop, .document th { color: #8a6a33; }
  .document td { border-top: 1px solid #ddd; }
  /* Een sessie of een recept niet over twee pagina's breken. */
  .doc-week, .doc-stap, .doc-recept { break-inside: avoid; }
  .doc-voet { border-top: 1px solid #ddd; color: #555; }
}

/* Filterrijen in de oefeningenbibliotheek. Zevenentwintig spiergroepen die afbreken over
   negen regels duwen de lijst zelf van het scherm af; je zag de filters wel en de
   oefeningen niet. Eén rij die zijwaarts scrolt houdt allebei in beeld. De scrollbalk gaat
   weg omdat hij op mobiel toch niets toevoegt en op desktop de rij hoger maakt. */
.filterrij {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 8px;
  padding-bottom: 2px;
}
.filterrij::-webkit-scrollbar { display: none; }
.filterrij .pill { flex: none; }

/* Genummerde lijst voor warming-up- en cooling-downstappen. Grote raakvlakken en veel
   ruimte tussen de regels, want je leest dit terwijl je al beweegt en niet stilzit. */
.opsomming {
  margin: 0;
  padding-left: 22px;
  font-size: 14px;
  color: var(--fg2);
  line-height: 1.7;
}
.opsomming li { margin-bottom: 10px; }
.opsomming li::marker { color: var(--gsoft); font-family: var(--font-display); }

/* De macro-donutring bij Voeding. Geen stoplicht: drie tinten uit het eigen palet naast
   elkaar, en het getal in het midden is wat je at, niet een cijfer dat je krijgt. */
.macro-blok { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.macro-ring-wrap { position: relative; flex: none; width: 120px; height: 120px; }
.macro-ring-midden {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.macro-kcal { font-family: var(--font-display); font-size: 27px; line-height: 1; }
.macro-kcal-label {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: .12em;
  font-size: 10px; color: var(--fg3); margin-top: 3px;
}
.macro-lijst { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 9px; }
.macro-rij { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.macro-stip { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.macro-naam { flex: 1; color: var(--fg2); }
.macro-gram { font-variant-numeric: tabular-nums; white-space: nowrap; }
.macro-doel {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: .08em;
  font-size: 10.5px; color: var(--fg3); text-align: right; white-space: nowrap;
}
/* Op een smal scherm mag de doelkolom wegvallen voordat de gram-waarde gaat afbreken:
   "43 g" over twee regels leest als een fout. Het doel staat er toch al onder, bij
   Je dagdoelen. */
@media (max-width: 380px) { .macro-doel { display: none; } }
.macro-noot { font-size: 12px; color: var(--fg3); line-height: 1.6; margin: 12px 0 0; }

/* De melding als het opslaan mislukt. Onderin, boven de navigatiebalk, en hij blijft staan
   tot het weer lukt. Bewust geen modal: die zou je midden in een workout blokkeren. */
.opslagmelding {
  position: fixed;
  left: 12px; right: 12px; bottom: calc(var(--nav-hoogte, 64px) + 10px);
  z-index: 60;
  display: none;
  align-items: center; gap: 12px;
  padding: 13px 15px;
  border: 1px solid rgba(184, 144, 80, 0.55);
  border-radius: 10px;
  background: #14213A;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.opslagmelding.zichtbaar { display: flex; }
.opslagmelding.gelukt { border-color: rgba(184, 144, 80, 0.3); }
.opslagmelding strong {
  display: block;
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: .1em;
  font-size: 11.5px; color: var(--gold); margin-bottom: 4px;
}
.opslagmelding p { margin: 0; font-size: 12.5px; color: var(--fg2); line-height: 1.55; }
.opslagmelding span { font-size: 13px; color: var(--fg2); }
.opslagmelding button {
  flex: none;
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: .09em;
  font-size: 11.5px;
  padding: 9px 13px;
  color: var(--bg); background: var(--gold);
  border: 0; border-radius: 7px; cursor: pointer;
}
.opslagmelding button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

/* De omdraaiknop bij de camera. Rechtsboven in het beeld, waar hij niet over de
   uitlijnhoeken of de aftelteller valt. Groot genoeg raakvlak voor een duim: 44 px is
   het minimum dat Apple aanhoudt en dat haalt hij met de padding erbij. */
.cam-wissel {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(237, 232, 223, 0.35);
  border-radius: 50%;
  background: rgba(10, 11, 13, 0.55);
  backdrop-filter: blur(6px);
  color: var(--fg);
  cursor: pointer;
}
.cam-wissel[hidden] { display: none; }
.cam-wissel:disabled { opacity: .45; }
.cam-wissel:active { background: rgba(10, 11, 13, 0.8); }
.cam-wissel:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Account-scherm. */
.account-cijfers { display: flex; gap: 26px; margin-top: 14px; }
.account-cijfers div { display: flex; flex-direction: column; }
.account-cijfers strong { font-family: var(--font-display); font-size: 30px; line-height: 1; }
.account-cijfers span {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: .12em;
  font-size: 10.5px; color: var(--fg3); margin-top: 4px;
}
.veld-hint { font-size: 11.5px; color: var(--fg3); margin: 6px 0 0; line-height: 1.5; }
.account-fout {
  font-size: 13px; line-height: 1.6; margin: 0 0 14px; padding: 10px 12px;
  border: 1px solid rgba(200, 90, 80, 0.4); border-radius: 8px;
  background: rgba(200, 90, 80, 0.08); color: var(--fg);
}

/* Het keuzescherm Basic/Pro aan het begin. Drie kolommen: wat het is, wat Basic geeft,
   wat Pro geeft. Bewust een tabel en geen twee losse kaarten, want de vraag die iemand
   hier stelt is "wat is het verschil" en niet "wat zit er in elk pakket". */
.plan-koppen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.plan-kop {
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.plan-kop--pro { border-color: var(--gold); }
.plan-kop strong { font-family: var(--font-display); font-size: 30px; line-height: 1.1; }
.plan-sub {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: .1em;
  font-size: 10px; color: var(--fg3);
}
.plan-regel {
  display: grid; grid-template-columns: 1fr 74px 74px; align-items: center;
  gap: 8px; padding: 9px 0; border-top: 1px solid var(--line);
}
.plan-regel:first-child { border-top: 0; }
.plan-wat { font-size: 13px; color: var(--fg2); }
.plan-waarde {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: .06em;
  font-size: 10.5px; color: var(--fg3); text-align: center;
}
.plan-waarde--pro { color: var(--gsoft); }

/* ---------------------------------------------------------------- juridische documenten
   Lopende tekst in plaats van een scherm vol kaarten. Deze documenten worden gelezen,
   niet bediend, dus telt regellengte en rust zwaarder dan compactheid. */
.doc-inhoud { font-size: 14px; line-height: 1.75; color: var(--fg2); padding-bottom: 40px; }
.doc-inhoud h2 { font-family: var(--font-display); font-size: 24px; color: var(--fg);
  margin: 26px 0 10px; letter-spacing: .4px; }
.doc-inhoud h3 { font-size: 16px; font-weight: 600; color: var(--fg); margin: 26px 0 8px; }
.doc-inhoud h4 { font-size: 14.5px; font-weight: 600; color: var(--fg); margin: 18px 0 6px; }
.doc-inhoud p { margin: 0 0 12px; }
.doc-inhoud ul { margin: 0 0 14px; padding-left: 20px; }
.doc-inhoud li { margin-bottom: 6px; }
.doc-inhoud strong { color: var(--fg); font-weight: 600; }
.doc-inhoud a { color: var(--gsoft); }
.doc-inhoud code { font-size: 12.5px; background: rgba(255,255,255,0.06);
  padding: 1px 5px; border-radius: 3px; }
/* Een blockquote draagt hier de waarschuwingen ("dit is een concept", "nog te regelen"),
   dus die moet opvallen zonder te schreeuwen: een gouden streep, geen rood vlak. */
.doc-inhoud blockquote { margin: 0 0 14px; padding: 10px 0 10px 14px;
  border-left: 2px solid var(--gsoft); color: var(--fg); font-size: 13.5px; }
/* Tabellen krijgen hun eigen scroller: een prijstabel mag nooit de hele pagina laten schuiven. */
.doc-tabel { overflow-x: auto; margin: 0 0 16px; }
.doc-inhoud table { border-collapse: collapse; width: 100%; font-size: 13px; }
.doc-inhoud th, .doc-inhoud td { text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--line); vertical-align: top; }
.doc-inhoud th { font-family: var(--font-label); font-size: 11.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--fg3); white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Blessuregids

   **Geen stoplicht.** De ernst wordt getoond met drie tinten van één kleur, precies zoals de
   BMI-balk in `js/bmi.js` (zie de regel in CLAUDE.md: geen rood en groen, alleen tinten van
   één kleur). Rood voor "ernstig" en groen voor "licht" zou hier bovendien iets beloven wat
   de gids niet kan waarmaken: een lichte klacht op een verkeerd moment is niet groen. Het
   woord staat er altijd naast, dus de stip is versiering en nooit de enige drager van de
   informatie. */
.ernst-stip {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none;
  border: 1px solid var(--gold); vertical-align: middle;
}
.ernst-licht { background: transparent; }
.ernst-matig { background: rgba(184,144,80,0.55); }
.ernst-ernstig { background: var(--gold); }

/* De alarmsignalen. Dit is het enige blok in de gids dat visueel uit de kaartenrij springt,
   en dat is de bedoeling: hier staat wanneer zelfzorg ophoudt. `--danger` bestond al in
   `tokens.css` en wordt ook gebruikt voor "wis alles"; er komt dus geen nieuwe kleur bij. */
.alarm-card {
  border-color: rgba(192,90,69,0.5);
  background: rgba(192,90,69,0.07);
}
.alarm-card .eyebrow { color: var(--danger); }
.alarm-card .opsomming li::marker { color: var(--danger); }

/* ---------------------------------------------------------------------------
   Level, XP en de ranglijst

   Eén kleurfamilie, net als overal buiten de spierkaart: goud op navy. Geen medaillekleuren
   voor de top drie — dat is een stoplicht met een ander gezicht, en het zegt niets over hoe
   ver iemand van je af staat. Wie bovenaan staat, staat bovenaan; dat is genoeg. */
.xp-balk {
  height: 8px; border-radius: 4px; background: rgba(184,144,80,0.14);
  overflow: hidden; border: 1px solid rgba(184,144,80,0.22);
}
.xp-vulling {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gsoft));
  transition: width .4s ease;
}
.xp-onder {
  display: flex; justify-content: space-between; gap: 10px; margin-top: 8px;
  font-family: var(--font-label); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fg3);
}

.xp-delen { margin-top: 10px; }
.xp-deel {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid rgba(184,144,80,0.1); font-size: 13.5px; color: var(--fg2);
}
.xp-deel:last-child { border-bottom: 0; }
.xp-deel strong { font-family: var(--font-display); font-size: 17px; color: var(--fg); }

.rang-rij {
  display: flex; align-items: center; gap: 12px; padding: 11px 10px;
  border-bottom: 1px solid rgba(184,144,80,0.1); border-radius: 8px;
}
.rang-rij:last-child { border-bottom: 0; }
/* De eigen regel licht op, ook als hij op plek 4.812 staat. Dat is het enige wat op deze
   lijst een andere achtergrond krijgt. */
.rang-ik { background: rgba(184,144,80,0.12); border: 1px solid rgba(184,144,80,0.35); }
.rang-nr {
  font-family: var(--font-display); font-size: 16px; color: var(--gsoft);
  min-width: 34px; text-align: right; flex: none;
}
/* Het leaguesymbool in een ranglijstrij. Vaste breedte, zodat de namen onder elkaar
   uitlijnen ook als het ene symbool breder tekent dan het andere. */
.rang-league { flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.rang-league svg { display: block; }
.rang-naam { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rang-waarde { font-family: var(--font-display); font-size: 16px; flex: none; }
.rang-scheiding { text-align: center; color: var(--fg3); padding: 6px 0; letter-spacing: .3em; }

/* De vier getallen bovenaan een recept: kcal, minuten, porties, eiwit. Ze staan vóór de
   ingrediënten omdat dat de vraag is waarmee iemand een recept opent: kan ik dit vanavond
   maken. De rest leest hij pas als het antwoord ja is. */
.recept-feiten {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin: 4px 0 14px; text-align: center;
}
.recept-feiten div {
  padding: 10px 4px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(12,24,41,0.35);
}
.recept-feiten strong {
  display: block; font-family: var(--font-display); font-size: 21px; color: var(--gsoft); line-height: 1.1;
}
.recept-feiten span {
  display: block; font-family: var(--font-label); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg3); margin-top: 3px;
}

/* Drie kolommen op het abonnementsscherm, sinds Max erbij kwam (18 augustus 2026).

   Op 375 pixels moeten drie prijzen naast elkaar passen zonder dat er iets afbreekt. Daarom
   krijgen de koppen hier een kleinere prijs en de tabel drie smallere waardekolommen. Pro
   houdt de gouden rand: dat is de laag waar de meeste mensen op horen te landen, en Max
   staat ernaast in plaats van in het midden. */
.plan-koppen--drie { grid-template-columns: repeat(3, 1fr); gap: 7px; }
.plan-koppen--drie .plan-kop { padding: 10px 8px; }
.plan-koppen--drie .plan-kop strong { font-size: 21px; }
.plan-koppen--drie .plan-kop .eyebrow { font-size: 10px; }
.plan-koppen--drie .plan-sub { font-size: 9px; }
.plan-kop--max { border-color: rgba(184,144,80,0.45); }

.plan-regel { grid-template-columns: 1fr 52px 52px 52px; gap: 5px; }
.plan-wat { font-size: 12.5px; }
.plan-waarde { font-size: 10px; }

/* ---------------------------------------------------------------------------
   Before en after (js/screens/voortgang.js)

   De standaardweergave zet de twee foto's naast elkaar, allebei helemaal zichtbaar. Dat is
   precies wat de oude schuifbalk niet kon: daar zag je van beide altijd maar een stuk. */
.vg-naast { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vg-naast figure { margin: 0; }
.vg-naast figcaption {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: .08em;
  font-size: 9.5px; color: var(--fg3); margin-top: 6px; text-align: center;
}
.vg-vak {
  position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: #0e1520;
}
.vg-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vg-leeg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 0 14px; font-size: 12px; color: var(--fg3); line-height: 1.5;
}
.vg-laag { position: absolute; inset: 0; }
.vg-wissel { aspect-ratio: 3 / 4; }
/* De verticale lijn op de schuifstand. Zonder die lijn raad je waar de grens ligt. */
.vg-lijn {
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gold);
  box-shadow: 0 0 8px rgba(184,144,80,0.6); pointer-events: none; transform: translateX(-1px);
}
.vg-regelaar { width: 100%; margin-top: 10px; accent-color: var(--gold); }
.vg-onderschrift {
  display: flex; justify-content: space-between; gap: 10px; margin-top: 6px;
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: .08em;
  font-size: 9.5px; color: var(--fg3);
}

.vg-kiezers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vg-kiezers label {
  display: block; font-family: var(--font-label); font-weight: 600; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg2);
}
.vg-kiezers select {
  width: 100%; margin-top: 6px; background: rgba(255,255,255,0.03);
  border: 1px solid var(--line); border-radius: 6px; padding: 9px; color: var(--fg); font-size: 14px;
}

.vg-maat {
  display: grid; grid-template-columns: 1fr auto 52px; align-items: baseline; gap: 8px;
  padding: 9px 0; border-bottom: 1px solid rgba(184,144,80,0.1); font-size: 13.5px; color: var(--fg2);
}
.vg-maat:last-child { border-bottom: 0; }
.vg-waarden { font-size: 12px; color: var(--fg3); }
.vg-maat strong { font-family: var(--font-display); font-size: 18px; color: var(--gsoft); text-align: right; }
.vg-maat .vg-gelijk { color: var(--fg3); }
.vg-geen { grid-column: 2 / -1; font-size: 11.5px; color: var(--fg3); text-align: right; }

/* Het kleine tweeluik op Profiel, dat naar het volledige scherm leidt. */
.vg-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }

/* ---------------------------------------------------------------------------
   De twaalf GORRÉ Leagues (js/leagues.js)

   Het symbool staat links van het level, want dat is wat je als eerste ziet. De maat komt
   van de aanroeper mee, dus hier staat alleen de omgeving: de schaduw, de uitlijning en het
   overzicht.

   **De slagschaduw staat hier en niet in de SVG.** In het ontwerpcanvas zat hij aan de
   tekening vast; hier ligt hij op een kaart met een eigen achtergrond, en dan hoort de
   schaduw bij de plek en niet bij het symbool. */
.league-kop { display: flex; align-items: center; gap: 14px; }
.league-teken { flex: none; line-height: 0; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.65)); }
.league-teken svg { display: block; }

/* **De leaguesymbolen bewegen standaard, ook met "beweging verminderen" aan.** Dezelfde
   regel als bij de oefeningtekeningen, en om dezelfde reden.

   Eerst stond hier het omgekeerde, met de redenering dat beweging bij een oefening de uitleg
   is en bij een badge sier. Dat klopt niet: vanaf league 7 ís de beweging de beloning. Wie
   die instelling aan heeft zou na een jaar trainen zijn eerste levende symbool halen en een
   stilstaand plaatje zien, zonder te weten dat er iets te zien viel. Precies de klacht die
   Patje op 17 augustus 2026 al maakte over de step-jack.

   De knop bij Instellingen die dit stil kon zetten is er op 20 augustus 2026 uit gehaald:
   de tekeningen, de leaguesymbolen en het knipperende vlak in de blessuregids bewegen nu
   altijd. `--play` staat in de SVG's uit het canvas op elke `animation-play-state` en blijft
   daarom staan; hij is alleen niet meer om te zetten. */
.league-teken { --play: running; }

.league-lijst { margin-top: 12px; }
.league-rij {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 8px; border-top: 1px solid rgba(184,144,80,0.12); border-radius: 8px;
}
.league-rij:first-child { border-top: 0; }
/* De league waar je zelf in zit licht op. Eén regel op de hele lijst, net als je eigen regel
   op de ranglijst. */
.league-rij--ik { background: rgba(184,144,80,0.10); border: 1px solid rgba(184,144,80,0.35); }
.league-naam { display: flex; align-items: center; gap: 10px; min-width: 0; }
.league-nr {
  font-family: var(--font-display); font-size: 17px; color: var(--gsoft);
  min-width: 26px; text-align: right; flex: none;
}
.league-titel { font-size: 13.5px; letter-spacing: .04em; }
.league-vanaf {
  font-family: var(--font-label); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg3); margin-top: 2px;
}
.league-tiers { display: flex; gap: 4px; flex: none; }
.league-tier { display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: .55; }
/* Alleen de tier waarin je zit staat op volle sterkte: zo zie je in één blik waar je bent en
   wat er binnen je eigen league nog te halen valt. */
.league-tier--ik { opacity: 1; }
.league-tier span {
  font-family: var(--font-display); font-size: 10px; color: var(--fg3); letter-spacing: .1em;
}
.league-noot {
  font-size: 11.5px; color: var(--fg3); line-height: 1.6; margin: 12px 0 0;
}

/* De ranglijst zelf krijgt de ruimte: hij staat bovenaan het scherm en de rijen zijn iets
   hoger dan een gewone lijstrij, zodat er op een telefoon een stuk of tien in beeld passen
   zonder dat het een tabel wordt. */
.rang-lijst { margin-bottom: 4px; }

/* Een knop die iets weggooit. Zelfde vorm als een gewone ghost-knop, andere kleur, zodat je
   in één blik ziet dat er iets verdwijnt. Wordt gebruikt in het blok "gegevens verwijderen"
   bij Instellingen; de twee zwaarste knoppen daar zijn `btn-back` met dezelfde kleur. */
.btn-ghost.btn-gevaar {
  color: var(--danger);
  border-color: rgba(192,90,69,0.45);
}
.btn-ghost.btn-gevaar:hover { border-color: var(--danger); }

/* Het lichaam op een blessurekaart. Klein gehouden: het is een wegwijzer en niet het
   onderwerp. De tekst over wat je moet doen hoort de aandacht te krijgen, niet het plaatje.

   De vlakken zijn hier niet aanklikbaar, anders dan op de spierkaart van de bodyscan: er
   valt niets te kiezen, je kijkt alleen waar het zit. */
.blessure-lichaam-plaat { max-width: 190px; margin: 10px auto 0; }
.blessure-lichaam-plaat .spierzone { cursor: default; }
.blessure-lichaam-plaat .spierzone:hover { opacity: 1; }
.blessure-lichaam-bij {
  text-align: center;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg3);
  margin: 8px 0 0;
}

/* De tijdlijn op het voortgangsscherm (Pro). Horizontaal scrollbaar: zes foto's naast
   elkaar op een telefoon van 390 pixels zou zes strookjes van zestig opleveren. Zo blijft
   elke foto groot genoeg om iets aan te zien, en veeg je door de reeks.

   Let op `position: relative` op het fotovak. Dat is geen opmaak maar een voorwaarde:
   `.vg-foto` staat op `position: absolute; inset: 0` en vult zijn dichtstbijzijnde
   gepositioneerde ouder. Zonder die regel ontsnapte elke tijdlijnfoto naar de phone-frame
   en werd hij de volle schermbreedte, over de andere vijf heen. */
.vg-tijdlijn {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.vg-tijdlijn-figuur {
  flex: 0 0 42%; min-width: 0; margin: 0; scroll-snap-align: start;
}
.vg-tijdlijn-figuur .vg-tijdlijn-vak {
  position: relative; width: 100%; aspect-ratio: 3 / 4;
  border-radius: 8px; overflow: hidden; background: var(--navy-soft, #16324f);
}
.vg-tijdlijn-figuur figcaption {
  font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gsoft); text-align: center; margin-top: 6px;
}
.vg-tijdlijn-noot { font-size: 11.5px; color: var(--fg3); line-height: 1.6; margin: 10px 0 0; }
.vg-deelmelding { font-size: 12px; color: var(--gsoft); margin: 8px 0 0; text-align: center; }

/* De calorieënring in de voedingsassistent. In het midden staat wat je nog mág, niet wat je
   op hebt: dat is de vraag waarmee iemand dit scherm opent, en "nog 610" hoef je niet zelf
   om te rekenen terwijl "1.240 gegeten" dat wel vraagt.

   Geen stoplicht. Goud voor wat je at, ivoor-op-lage-dekking voor de rest, en boven je doel
   wordt de ring vol in plaats van rood. Dezelfde geest als de BMI-balk. */
.kcal-ring { position: relative; width: 160px; margin: 10px auto 4px; }
.kcal-ring svg { width: 100%; display: block; }
.kcal-ring-midden {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; pointer-events: none;
}
.kcal-ring-getal { font-family: var(--font-display); font-size: 34px; line-height: 1; color: var(--ivoor, #EDE8DF); }
.kcal-ring-label {
  font-family: var(--font-cond); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gsoft); text-align: center; max-width: 96px; line-height: 1.3;
}
.kcal-ring-onder {
  text-align: center; font-size: 12px; color: var(--fg3); margin: 0 0 10px;
}

/* ---------------------------------------------------------------------------
   Max: één laag rijker dan Pro, en niet meer dan dat.

   Alle Pro-regels gelden ook voor Max; hieronder staat wat er alleen bij Max bovenop komt.
   Patje's opdracht van 20 augustus 2026 was letterlijk "meer dan pro maar overdrijf niet",
   en dat is precies de goede grens: wie het dubbele betaalt hoort te zien dat hij de
   bovenste laag heeft, maar een app die staat te knipperen leest als goedkoop en niet als
   duur. Vandaar drie ingetogen dingen en geen nieuwe kleur.

   1. Een gouden haarlijn boven aan het toestel. Dat is het eerste wat je ziet als je de app
      opent, en het staat er de hele tijd zonder ergens overheen te liggen.
   2. Een iets warmere rand om de kaarten. Geen extra animatie: Pro beweegt al, en méér
      beweging is niet rijker maar drukker.
   3. De koppen krijgen een verloop met een diepere gouden stop erin, en lopen langzamer.
      Trager leest als duurder; sneller leest als ongeduldig.
   --------------------------------------------------------------------------- */

#phone[data-tier="max"]::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 22%, #E6C77A 50%, var(--gold) 78%, transparent 100%);
  z-index: 6; pointer-events: none;
  border-top-left-radius: inherit; border-top-right-radius: inherit;
}

/* Alleen een inset-schaduw en geen `border-color`: de Pro-laag animeert de rand al met
   `edgeglow`, en een animatie wint van een gewone declaratie. Een regel die niets doet
   hoort niet te blijven staan alsof hij werkt. */
[data-tier="max"] .card,
[data-tier="max"] .tile {
  box-shadow: inset 0 0 0 1px rgba(184, 144, 80, 0.10);
}

/* Max houdt alleen het tragere tempo; hoeveel goud er in de letters zit regelt
   `--goud-deel` hierboven, op één plek voor alle verlooptekst. */
[data-tier="max"] h2,
[data-tier="max"] h3 {
  animation-duration: 12s;
}