/*
 * Ontworpen voor bediening met één hand en zweterige vingers: grote raakvlakken,
 * niets dat op hover berust, en genoeg contrast om in een schemerige garage te lezen.
 *
 * De ordening van dit bestand volgt het scherm van boven naar beneden: eerst de kleuren,
 * dan de schil (kop, weekstrip, onderbalk), dan de bouwstenen die elk tabblad deelt
 * (kaarten, hero, doelen, kalender), en pas daarna de onderdelen van één scherm.
 *
 * ── Kleur betekent sport ──────────────────────────────────────────────────────────────
 * Groen is kracht, blauw is Z2, zand is je wandelbasis. Diezelfde drie kleuren komen
 * overal terug: in de hero van vandaag, in de doelen van deze week, in de vakjes van de
 * kalender en in de strip bovenaan. Daardoor hoef je nergens een legenda te lezen om te
 * zien waar een blokje over gaat — en dat is precies wat de app tot één geheel maakt in
 * plaats van tot een krachtscherm met een duurkaartje eronder.
 *
 * Oranje (`--let`) staat los van de drie en betekent altijd hetzelfde: let hier even op.
 * Daarom is het tekort aan hoog-aeroob werk tijdens het Z2-blok níét oranje — dat is de
 * afspraak, geen aandachtspunt, en een kleur die je leert negeren is erger dan geen kleur.
 */

:root {
  color-scheme: light dark;

  --bg: #f6f6f3;
  --kaart: #fff;
  --inkt: #17181a;
  --zacht: #6a6d70;
  --lijn: #e4e4de;
  /* Iets sterker dan --lijn, voor de dagen die in het rollende venster vallen. */
  --lijn-nadruk: #c6c6bc;

  --kracht: #2f6f4f;
  --kracht-zacht: #e8f2ec;
  --kracht-rand: #cee3d7;

  --z2: #2b6183;
  --z2-zacht: #e6eff5;
  --z2-rand: #c6dbea;

  --basis: #86754f;
  --basis-zacht: #f3efe3;
  --basis-rand: #e2d9c1;

  --let: #8a5a12;
  --let-zacht: #fdf3e2;
  --let-rand: #f0e0c4;

  /* Tekst op een vlak in een sportkleur. In donkere modus zijn die kleuren licht, dus
     wit erop is onleesbaar; één variabele houdt dat op één plek. */
  --op-kleur: #fff;

  /* De grafieken lezen dit uit met getComputedStyle — zie thema() in voortgang.js. */
  --accent: var(--kracht);

  --schaduw: 0 1px 2px rgba(20, 25, 20, 0.04), 0 8px 20px -14px rgba(20, 25, 20, 0.22);
  --raak: 44px; /* minimum raakvlak */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121410;
    --kaart: #1b1e19;
    --inkt: #eaeae3;
    --zacht: #94978f;
    --lijn: #2c3029;
    --lijn-nadruk: #474d42;

    --kracht: #74b491;
    --kracht-zacht: #1e2c23;
    --kracht-rand: #2f4b3a;

    --z2: #7fb0d6;
    --z2-zacht: #17242e;
    --z2-rand: #2c4356;

    --basis: #c6b385;
    --basis-zacht: #262218;
    --basis-rand: #40382a;

    --let: #d9ac62;
    --let-zacht: #2b2418;
    --let-rand: #4a3d24;

    --op-kleur: #10130f;
    --schaduw: none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--inkt);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

.balk, .weekstrip, main { max-width: 900px; margin: 0 auto; padding-inline: 16px; }

/* Ruimte voor de vaste onderbalk, plus de thuisknopbalk van de iPhone. */
main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

h1 { font-size: 17px; margin: 0; letter-spacing: -0.01em; }
h3 { font-size: 15.5px; margin: 0; letter-spacing: -0.01em; }
h4 { font-size: 14.5px; margin: 0; }
p { margin: 8px 0; }
code { font-size: 0.88em; background: var(--lijn); padding: 1px 5px; border-radius: 5px; }

.zacht { color: var(--zacht); font-size: 13.5px; font-weight: 400; }
.klein { font-size: 13.5px; }
.voetnoot { color: var(--zacht); font-size: 12.5px; margin: 14px 0 0; }
.laden { color: var(--zacht); text-align: center; padding: 44px 0; }

/* ---------- kop ---------- */

.balk {
  padding-top: 16px;
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.balk-titel { min-width: 0; }

/* De verversknop. De Worker bewaart Garmin-antwoorden tot een uur; wijzig je iets in
   Garmin Connect, dan haalt deze knop alles opnieuw op. */
.ververs {
  flex: 0 0 auto;
  width: var(--raak);
  height: var(--raak);
  display: grid;
  place-items: center;
  border: 1px solid var(--lijn);
  background: var(--kaart);
  color: var(--inkt);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--schaduw);
  -webkit-tap-highlight-color: transparent;
}
.ververs:active { background: var(--kracht-zacht); }
.ververs[disabled] { color: var(--zacht); cursor: default; }
.ververs[aria-busy="true"] svg { animation: draai 0.9s linear infinite; }

@keyframes draai {
  to { transform: rotate(360deg); }
}
/* Wie beweging heeft uitgezet ziet de knop verbleken in plaats van draaien. */
@media (prefers-reduced-motion: reduce) {
  .ververs[aria-busy="true"] svg { animation: none; opacity: 0.45; }
}

/* ---------- weekstrip ----------
 * De week bovenaan, op elk tabblad. Dit is wat de app bij elkaar houdt: waar je ook
 * kijkt, je ziet in welk ritme je zit. De bolletjes gebruiken dezelfde drie kleuren als
 * de kalender, dus je herkent ze zonder uitleg.
 */
.weekstrip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-bottom: 16px;
}
.wsdag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-height: 58px;
  padding: 7px 0 6px;
  border: 1px solid var(--lijn);
  border-radius: 11px;
  background: var(--kaart);
  color: var(--inkt);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.wsdag.later { opacity: 0.42; }
.wsdag.nu { border-color: var(--inkt); }
.wsdag-l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--zacht); font-weight: 650; }
.wsdag-n { font-size: 15.5px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.15; }
.wsdag.nu .wsdag-n { color: var(--kracht); }
.wsdag-m { display: flex; gap: 3px; height: 7px; align-items: center; margin-top: 3px; }
.m { display: block; width: 6px; height: 6px; border-radius: 50%; }
.m-kracht { background: var(--kracht); }
.m-z2 { background: var(--z2); }
.m-basis { background: var(--basis); }
/* Nog niet gedaan, wel gevraagd: dezelfde kleur, alleen de omtrek. */
.m.ghost { background: transparent; border: 1.5px solid currentColor; }
.m-kracht.ghost { color: var(--kracht); }
.m-z2.ghost { color: var(--z2); }

/* ---------- onderbalk ----------
 * Onderaan en niet bovenaan: met één hand aan de telefoon en één aan een halter is de
 * onderkant van het scherm het enige dat je duim haalt.
 */
.onderbalk {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  gap: 2px;
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
  background: var(--kaart);
  border-top: 1px solid var(--lijn);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 22px -18px rgba(20, 25, 20, 0.5);
}
.tab {
  flex: 1;
  min-width: 0;
  min-height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 2px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--zacht);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tab svg { display: block; }
.tab.aan { color: var(--kracht); background: var(--kracht-zacht); }

/* ---------- panelen ---------- */
.paneel { display: none; }
.paneel.aan { display: block; }

/* ---------- kaarten ---------- */
.kaart {
  display: block;
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 14px;
  padding: 15px 17px;
  margin-bottom: 12px;
  box-shadow: var(--schaduw);
}
.kaart-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.kaart-kop p { margin: 0; }

/* Een kaart die over één sport gaat, draagt die sport als randje links. */
.kaart-kracht { border-left: 3px solid var(--kracht); }
.kaart-z2 { border-left: 3px solid var(--z2); }
.kaart-let { background: var(--let-zacht); border-color: var(--let-rand); }
.kaart-let summary {
  cursor: pointer;
  min-height: var(--raak);
  display: flex;
  align-items: center;
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
}
.scheiding { border-top: 1px dashed var(--let-rand); padding-top: 9px; margin-top: 9px; }

/* Een kaart die ergens heen gaat. De chevron rechts maakt zonder woorden duidelijk dat
   je erop kunt tikken; onderstrepen zou een kaart als een link laten lezen. */
a.kaart { color: inherit; text-decoration: none; }
.kaart-neven, .kaart-link {
  display: block;
  border-left: 3px solid var(--soort, var(--lijn));
  --soort: var(--lijn);
}
.neven-kracht, .kaart-link { --soort: var(--kracht); }
.neven-z2 { --soort: var(--z2); }
.kaart-neven b, .kaart-link b { display: block; font-size: 15px; font-weight: 650; }
.kaart-neven i, .kaart-link i { font-style: normal; display: block; font-size: 13.5px; color: var(--zacht); margin-top: 2px; }
a.kaart-neven, a.kaart-link { position: relative; padding-right: 34px; }
a.kaart-neven::after, a.kaart-link::after {
  content: "›";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  line-height: 1;
  color: var(--zacht);
}

/* ---------- hero ----------
 * Wat vandaag van je gevraagd wordt, in de kleur van de sport. Groot genoeg om vanaf de
 * mat te lezen, en met de reden eronder zodat je niet hoeft te raden waarom.
 */
.hero {
  position: relative;
  border: 1px solid var(--rand, var(--lijn));
  border-radius: 16px;
  background: var(--vlak, var(--kaart));
  padding: 15px 17px 16px;
  margin-bottom: 14px;
  box-shadow: var(--schaduw);
  --soort: var(--zacht);
  --vlak: var(--kaart);
  --rand: var(--lijn);
}
.hero-kracht { --soort: var(--kracht); --vlak: var(--kracht-zacht); --rand: var(--kracht-rand); }
.hero-z2 { --soort: var(--z2); --vlak: var(--z2-zacht); --rand: var(--z2-rand); }
.hero-rust { --soort: var(--basis); --vlak: var(--basis-zacht); --rand: var(--basis-rand); }
/* Een opgezochte dag is neutraal: de kleur is voorbehouden aan wat aan de beurt is. */
.hero-kijken { --soort: var(--inkt); --vlak: var(--kaart); --rand: var(--lijn); }

.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.hero-badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--soort);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hero-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--soort); }
.hero-datum { font-size: 12.5px; color: var(--zacht); text-align: right; }
.hero-groot { font-size: 31px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: var(--soort); }
.hero-sub { font-size: 14.5px; margin-top: 3px; }
.hero-tekst {
  font-size: 13.5px;
  color: var(--zacht);
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px dashed var(--rand);
}

/* ---------- dagkiezer ---------- */
.dagkeuze { display: flex; gap: 8px; margin-bottom: 14px; }
.dagknop {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  border: 1px solid var(--lijn);
  background: var(--kaart);
  color: var(--inkt);
  border-radius: 11px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--schaduw);
  -webkit-tap-highlight-color: transparent;
}
.dagknop.aan { background: var(--kracht); border-color: var(--kracht); color: var(--op-kleur); }
/* Stipje = wat de rotatie aanraadt, ook als je iets anders bekijkt. */
.stip { width: 7px; height: 7px; border-radius: 50%; background: var(--kracht); }
.dagknop.aan .stip { background: currentColor; opacity: 0.65; }

/* ---------- doelen van deze week ---------- */
.doelen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.doel {
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--soort);
  border-radius: 11px;
  padding: 9px 10px 10px;
  background: var(--bg);
  --soort: var(--zacht);
}
.doel-kracht { --soort: var(--kracht); }
.doel-z2 { --soort: var(--z2); }
.doel-basis { --soort: var(--basis); }
.doel-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--zacht); font-weight: 700; }
.doel-v { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; color: var(--soort); font-variant-numeric: tabular-nums; line-height: 1.2; }
.doel-v span { font-size: 13px; font-weight: 600; color: var(--zacht); }
.doelbalk { display: flex; gap: 3px; margin: 5px 0 6px; }
.doelbalk i { flex: 1; height: 5px; border-radius: 3px; background: var(--lijn); }
.doelbalk i.vol { background: var(--soort); }
.doelbalk i.extra { opacity: 0.45; }
.doel-n { font-size: 11px; line-height: 1.35; color: var(--zacht); }
.doel-noot { font-size: 12.5px; color: var(--zacht); margin: 12px 0 0; }

/* De weekstand onder de planning: wat die zeven dagen samen wegen. Eén regel, maar wel de
   regel die zegt of je opbouwt — vandaar de streep erboven en de kleur van Z2. */
.week-stand {
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--lijn);
  font-size: 13px;
  line-height: 1.45;
  color: var(--inkt);
}
.week-stand b { color: var(--z2); font-variant-numeric: tabular-nums; }
.doelbalk.leeg { visibility: hidden; }

/* ---------- de belastingband ---------- */

/* Waar je acute belasting staat binnen het bereik dat Garmin optimaal vindt. Dit verving
   de bolletjes "2 van de 3 sessies": die kwamen uit een tabel in de code, dit bereik
   rekent Garmin uit je eigen fitheid. Staat op Vandaag en op de kalender hetzelfde. */
.band { margin: 4px 0 14px; }
.band-kop { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.band-nu { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--z2); font-variant-numeric: tabular-nums; }
.bandbalk {
  position: relative;
  height: 10px;
  margin: 7px 0 6px;
  border-radius: 99px;
  /* Grijs tot aan de ondergrens van je optimale bereik, daarboven de bandkleur. Zo zie je
     zonder legenda waar "optimaal" begint. `--onder` zet de app per balk. */
  background: linear-gradient(to right, var(--lijn) 0 var(--onder, 0%), var(--z2-zacht) var(--onder, 0%) 100%);
  box-shadow: inset 0 0 0 1px var(--z2-rand);
  overflow: hidden;
}
.band-vul { display: block; height: 100%; border-radius: 99px; background: var(--z2); }
/* Twee streepjes: waar "optimaal" begint, en het mikpunt in het midden. Het mikpunt is
   niet de bovenkant — daarboven blijft er geen plek over voor de krachtsessies in
   hetzelfde venster. */
.band-mik {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  /* Moet leesbaar zijn op allebei de ondergronden: op de gevulde balk (donkerblauw) en op
     het lege deel ernaast (bijna wit). Vandaar een donkere lijn met een lichte rand. */
  background: var(--inkt);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.65);
  opacity: 0.55;
}
/* Boven het plafond is geen prestatie maar een waarschuwing. */
.band-boven .band-vul { background: var(--let); }
.band-boven .band-nu { color: var(--let); }
.band-noot { font-size: 11.5px; line-height: 1.4; color: var(--zacht); margin: 0; }

/* ---------- de komende zeven dagen ---------- */

.vooruit { list-style: none; margin: 4px 0 0; padding: 0; }
.vr {
  display: grid;
  grid-template-columns: 38px 30px 1fr;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--lijn);
  --soort: var(--zacht);
}
.vr:first-child { border-top: 0; }
.vr-kracht { --soort: var(--kracht); }
.vr-z2 { --soort: var(--z2); }
.vr-dag {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 11px;
  color: var(--zacht);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
.vr-dag b { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
/* Gestippeld, net als in de kalender: dit is een aanname en geen gelogde sessie. */
.vr-merk {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  border-radius: 6px;
  border: 1px dashed var(--soort);
  color: var(--soort);
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
}
/* Een vrije dag heeft niets af te vinken; een leeg gestippeld vakje leest als een
   vergeten markering, een streepje als een bewuste rustdag. */
.vr-merk.leeg { border: 0; color: var(--zacht); font-size: 13px; }
.vr-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vr-tekst b { font-size: 14px; font-weight: 650; color: var(--soort); }
.vr-rust .vr-tekst b { color: var(--inkt); }
.vr-tekst i { font-style: normal; font-size: 11.5px; color: var(--zacht); }

/* ---------- kalender ---------- */
.legenda { display: flex; gap: 13px; flex-wrap: wrap; margin: 4px 0 11px; font-size: 11.5px; color: var(--zacht); }
.leg { display: inline-flex; align-items: center; gap: 5px; }
.leg::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--soort); }
.leg-kracht { --soort: var(--kracht); }
.leg-z2 { --soort: var(--z2); }
.leg-basis { --soort: var(--basis); }
/* Verwacht is geen vierde kleur maar dezelfde tekening als de merktekens in het raster:
   gestippeld en leeg, want er is nog niets gebeurd. */
.leg-verwacht::before { background: transparent; border: 1px dashed var(--zacht); }

.kal-koprij {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--zacht);
  font-weight: 650;
  margin-bottom: 6px;
}
.kal-week { margin-bottom: 11px; }
.kal-rij { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kal-dag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 58px;
  padding: 5px 3px 6px;
  border: 1px solid var(--lijn);
  border-radius: 9px;
  background: var(--kaart);
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Een dag waarop je niets deed hoort ook een vakje te hebben — anders zie je niet dat er
   een gat zat, en juist die gaten vertellen of je ritme klopt. */
.kal-dag.leeg { background: transparent; border-style: dashed; }
/* Toekomstige dagen stonden op 0.4 toen er niets in te zien was. Sinds de vooruitblik
   staat er wel iets — nog steeds secundair aan wat er echt gebeurd is, maar wel leesbaar. */
.kal-dag.later { opacity: 0.62; }
/* De zeven dagen waar het advies op telt. Het venster loopt dwars door de weekrijen heen —
   op een woensdag begint het in de rij erboven — en zonder dit merkteken is in het raster
   niet te zien welke dagen de doelenkaart eigenlijk optelt. */
.kal-dag.venster { border-color: var(--lijn-nadruk); }
.kal-dag.nu { border-color: var(--inkt); }
.kal-dag.gekozen { box-shadow: 0 0 0 2px var(--kracht-rand); border-color: var(--kracht); }
.kal-nr { font-size: 11px; font-weight: 650; color: var(--zacht); font-variant-numeric: tabular-nums; }
.kal-dag.nu .kal-nr { color: var(--inkt); }
.kal-merken { display: flex; flex-direction: column; gap: 2px; width: 100%; flex: 1; }
.merk {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  border-radius: 4px;
  color: var(--op-kleur);
  font-variant-numeric: tabular-nums;
}
.merk-kracht { background: var(--kracht); }
.merk-z2 { background: var(--z2); }
/* Minuten in de band die de sessiedrempel niet halen: wel geteld, niet als sessie. Een
   getint vlak in plaats van een doorzichtig vlak, want wit op halfdoorzichtig blauw is op
   een vakje van veertig pixels niet meer te lezen. */
.merk.kort { background: var(--z2-zacht); color: var(--z2); box-shadow: inset 0 0 0 1px var(--z2-rand); }
.merk.ghost { background: transparent; border: 1px dashed currentColor; line-height: 1.3; }
.merk-kracht.ghost { color: var(--kracht); }
.merk-z2.ghost { color: var(--z2); }
.kal-punt { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.kal-punt.aan { background: var(--basis); }

.kal-voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed var(--lijn);
}
.kal-wk { font-size: 11px; color: var(--zacht); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kal-tel { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.pil {
  font-size: 10.5px;
  font-weight: 650;
  padding: 2px 7px;
  border-radius: 99px;
  border: 1px solid var(--lijn);
  background: var(--bg);
  color: var(--zacht);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pil-kracht { color: var(--kracht); background: var(--kracht-zacht); border-color: var(--kracht-rand); }
.pil-z2 { color: var(--z2); background: var(--z2-zacht); border-color: var(--z2-rand); }
.pil-basis { color: var(--basis); background: var(--basis-zacht); border-color: var(--basis-rand); }
.pil-nu { color: var(--kracht); background: var(--kracht-zacht); border-color: var(--kracht-rand); }

.kal-detail { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--lijn); }
.detail-kop { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.detail-kop b { font-size: 14.5px; }
.detail-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  margin-bottom: 6px;
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--soort);
  border-radius: 10px;
  background: var(--bg);
  --soort: var(--zacht);
}
.detail-kracht { --soort: var(--kracht); }
.detail-z2 { --soort: var(--z2); }
.detail-basis { --soort: var(--basis); }
.detail-rij b { display: block; font-size: 14px; }
.detail-rij i { font-style: normal; display: block; font-size: 12.5px; color: var(--zacht); margin-top: 1px; }
.detail-let {
  font-size: 13px;
  color: var(--let);
  background: var(--let-zacht);
  border: 1px solid var(--let-rand);
  border-radius: 9px;
  padding: 8px 11px;
  margin: 8px 0 0;
}

/* ---------- de Z2-sessiekaart ---------- */
/* Hoe je hem doet. Het hoevéél staat in de hero erboven; dat hier herhalen leverde twee
   keer hetzelfde getal op een half scherm op. */
.hoe { margin: 4px 0 0; padding-left: 19px; font-size: 14.5px; }
.hoe li { margin: 5px 0; }
.voortgangsbalk { height: 8px; border-radius: 99px; background: var(--lijn); overflow: hidden; margin: 14px 0 7px; }
.voortgangsbalk span { display: block; height: 100%; border-radius: 99px; background: var(--z2); }
.balk-onder { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--zacht); font-variant-numeric: tabular-nums; }
.balk-onder b { font-size: 15px; color: var(--inkt); }

/* ---------- wat je vandaag tilde ---------- */
.gedaan-rij {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--lijn);
  font-size: 14.5px;
}
.gedaan-rij:first-of-type { border-top: 0; }
.gedaan-rij span { color: var(--zacht); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- oefeningen ---------- */
.oef {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 13px;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: var(--schaduw);
}
.oef-kop {
  display: flex;
  width: 100%;
  gap: 12px;
  align-items: center;
  min-height: 62px;
  padding: 12px 15px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.oef-naam { flex: 1; min-width: 0; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.oef-meta { display: block; font-size: 13px; font-weight: 400; color: var(--zacht); margin-top: 2px; }
.oef-chevron { color: var(--zacht); font-size: 15px; transition: transform 0.15s; }
.oef.open .oef-chevron { transform: rotate(180deg); }
.oef-body { display: none; border-top: 1px solid var(--lijn); padding: 14px 15px; }
.oef.open .oef-body { display: block; }

/* De tekst die in Garmin bij de stap staat. Die noemt vaak een gewicht ("7 kg per
   hand") dat achterloopt op het advies hierboven, dus staat er nu bij waar hij vandaan
   komt en heeft hij het groen niet meer: het accent is voor het plan van vandaag. */
.opdracht {
  background: var(--bg);
  border: 1px solid var(--lijn);
  border-radius: 9px;
  padding: 10px 12px;
  margin: 0 0 13px;
  font-size: 14.5px;
  color: var(--zacht);
}
.opdracht-bron {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 650;
  margin-bottom: 3px;
}

.cues { display: grid; gap: 10px; margin-bottom: 12px; }
@media (min-width: 640px) { .cues { grid-template-columns: 1fr 1fr; } }
.cue { border: 1px solid var(--lijn); border-radius: 9px; padding: 10px 12px; font-size: 14px; }
.cue-let { background: var(--let-zacht); border-color: var(--let-rand); }
.cue b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--zacht); margin-bottom: 5px; }
.cue-let b { color: var(--let); }
.cue ul { margin: 0; padding-left: 18px; }
.cue li { margin: 3px 0; }

.tip {
  background: var(--kracht-zacht);
  border: 1px solid var(--kracht-rand);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 14px;
}
.vorige { font-size: 13.5px; color: var(--zacht); border-top: 1px dashed var(--lijn); padding-top: 10px; margin-bottom: 0; }
.vorige b { color: var(--inkt); }

/* ---------- gewichtsadvies ----------
 * In de dichtgeklapte kop staat alleen wát je moet pakken; dat is wat je met een halter
 * in je hand wil kunnen lezen. De redenering staat pas in de uitgeklapte kaart.
 * Op een smal scherm valt de chip onder de naam in plaats van ernaast, zodat een lange
 * oefeningsnaam hem niet plat drukt.
 */
.advies-chip {
  flex: none;
  padding: 5px 10px;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  background: var(--bg);
  color: var(--zacht);
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.advies-chip.advies-op { background: var(--kracht-zacht); border-color: var(--kracht-rand); color: var(--kracht); }
.advies-chip.advies-let { background: var(--let-zacht); border-color: var(--let-rand); color: var(--let); }

@media (max-width: 480px) {
  .oef-kop { flex-wrap: wrap; }
  .oef-naam { flex: 1 1 100%; }
  .advies-chip { order: 3; margin-top: 2px; }
  .oef-chevron { order: 4; margin-left: auto; }
}

.advies {
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--zacht);
  border-radius: 9px;
  padding: 10px 12px;
  margin: 0 0 13px;
  font-size: 14px;
}
.advies.advies-op { border-left-color: var(--kracht); background: var(--kracht-zacht); border-color: var(--kracht-rand); border-left-color: var(--kracht); }
.advies.advies-let { border-left-color: var(--let); background: var(--let-zacht); border-color: var(--let-rand); border-left-color: var(--let); }
.advies > b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--zacht); margin-bottom: 5px; }
.advies.advies-op > b { color: var(--kracht); }
.advies.advies-let > b { color: var(--let); }
.advies p { margin: 6px 0 0; }

/* Set voor set wat je pakt. Eén regel per set, ook als ze gelijk zijn: "Set 1 · 8,5 kg ·
   10 reps" is af te lezen zonder te tellen, "3× 8,5 kg" niet. Tabular-nums houdt de
   kolommen recht onder elkaar. */
.setplan {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}
.setplan li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 11px;
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 8px;
}
.setnr {
  flex: none;
  width: 42px;
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--zacht);
}
.setkg { flex: 1; min-width: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.setdoel { flex: none; font-size: 15px; font-weight: 500; }

.advies-kort { color: var(--zacht); font-size: 13.5px; margin-top: 8px !important; }

/* De redenering: er als je hem wil, weg als je alleen je halters komt halen. */
.waarom { margin-top: 8px; font-size: 13.5px; color: var(--zacht); }
.waarom summary {
  cursor: pointer;
  min-height: var(--raak);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--zacht);
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
/* Zonder eigen pijltje leest de samenvatting als een kopje in plaats van als iets
   dat je open kunt tikken; het standaard driehoekje verdwijnt door display: flex. */
.waarom summary::-webkit-details-marker { display: none; }
.waarom summary::after { content: "▾"; font-size: 12px; transition: transform 0.15s; }
.waarom[open] summary::after { transform: rotate(180deg); }
.waarom p { margin: 6px 0 0; }
.waarom p:last-child { margin-bottom: 6px; }

/* ---------- video ---------- */
.videostrip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  /* Vegen blijft op de video staan die je loslaat, geen halve slides in beeld. */
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.videostrip::-webkit-scrollbar { display: none; }
.videoslide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
/* Bij meer dan één video een randje van de volgende laten zien: dat je kunt vegen moet je
   zien zonder het eerst te proberen. */
.videostrip.meer .videoslide { flex-basis: 91%; }
.videodots { display: flex; justify-content: center; gap: 7px; margin: 0 0 12px; }
.videodots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lijn);
  transition: background 0.15s;
}
.videodots span.aan { background: var(--kracht); }

.video {
  position: relative;
  background: #000;
  border-radius: 9px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-bottom: 10px;
  cursor: pointer;
}
.video img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.72; }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
}
.video.speelt .video-play { display: none; }
.video-play > span {
  width: 62px; height: 44px;
  background: rgba(0, 0, 0, 0.72);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.video-play em { font-style: normal; font-size: 13px; background: rgba(0, 0, 0, 0.6); padding: 4px 10px; border-radius: 99px; }
.videobron { font-size: 12px; color: var(--zacht); margin: 0 0 12px; }

/* ---------- rijen (Schema) ---------- */
.rij { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--lijn); }
.rij:first-of-type { border-top: 0; }
.rij-label { flex: 1; min-width: 0; }
.rij-label i { font-style: normal; display: block; color: var(--zacht); font-size: 13px; margin-top: 1px; }
.rij-merk {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--soort, var(--zacht));
}
.rij-kracht { --soort: var(--kracht); }
.rij-z2 { --soort: var(--z2); }
.rij-basis { --soort: var(--basis); }

/* De opbouwtabel van het Z2-blok. */
.blok { border-collapse: collapse; margin: 10px 0 4px; font-size: 14px; }
.blok th { text-align: left; font-weight: 600; color: var(--zacht); padding: 3px 14px 3px 0; white-space: nowrap; }
.blok td { padding: 3px 0; font-variant-numeric: tabular-nums; }
.blok tr.nu th, .blok tr.nu td { color: var(--z2); font-weight: 650; }

.regels { margin: 6px 0 0; padding-left: 20px; }
.regels li { margin: 6px 0; }

/* ---------- statistiek-tegels ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 9px; }
.stat { background: var(--bg); border: 1px solid var(--lijn); border-radius: 11px; padding: 11px 13px; }
.stat-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--zacht); font-weight: 650; }
.stat-v { font-size: 25px; font-weight: 650; letter-spacing: -0.02em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.stat-v.klein { font-size: 14.5px; line-height: 1.35; margin-top: 6px; font-variant-numeric: normal; }
.stat-n { font-size: 11.5px; color: var(--zacht); margin-top: 1px; }
.stat.goed { background: var(--kracht-zacht); border-color: var(--kracht-rand); }
.stat.let { background: var(--let-zacht); border-color: var(--let-rand); }
/* Op Voortgang staan de tegels los boven de kaarten. */
.paneel > .stats { margin-bottom: 12px; }

/* ---------- grafieken en tabellen ---------- */
.grafiek { height: 250px; position: relative; margin-top: 10px; }

/* ---------- oefeningenraster ---------- */
.maatkeuze { display: flex; gap: 6px; margin-top: 10px; }
.maatknop {
  flex: 1;
  min-height: var(--raak);
  padding: 8px 12px;
  border: 1px solid var(--lijn);
  border-radius: 10px;
  background: var(--bg);
  color: var(--inkt);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.maatknop.aan { background: var(--kracht); border-color: var(--kracht); color: var(--op-kleur); }

.groepkop {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--zacht);
  margin: 16px 0 0;
}
.minigrid {
  display: grid;
  /* Twee kolommen op een 375px-scherm, meer zodra het past. */
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.minikaart {
  display: flex;
  flex-direction: column;
  min-height: var(--raak);
  padding: 9px 10px 8px;
  border: 1px solid var(--lijn);
  border-radius: 11px;
  background: var(--bg);
  color: var(--inkt);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.minikaart.aan { background: var(--kracht-zacht); border-color: var(--kracht-rand); }
.mininaam {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  /* Twee regels ruimte, zodat alle kaartjes in een rij even hoog blijven. */
  min-height: 2.6em;
}
.spark { display: block; width: 100%; height: auto; margin: 4px 0 6px; }
.minivoet {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 6px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.minivoet em { font-style: normal; }
/* Wanneer je hem het laatst deed. De kaartjes staan op recentheid gesorteerd; dit maakt
   die volgorde afleesbaar zonder de grafiek open te klikken. */
.minidatum {
  margin-top: 2px;
  font-size: 11px;
  color: var(--zacht);
  font-variant-numeric: tabular-nums;
}
.detail { border-top: 1px solid var(--lijn); margin-top: 16px; padding-top: 12px; }
.detail h4 { font-size: 14.5px; margin: 0; }

.tabelwrap { overflow-x: auto; margin-top: 8px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--zacht); padding: 0 8px 6px; font-weight: 600; white-space: nowrap; }
td { padding: 8px; border-top: 1px solid var(--lijn); font-variant-numeric: tabular-nums; white-space: nowrap; }
td.tekst { font-variant-numeric: normal; white-space: normal; }
.omhoog { color: var(--kracht); font-weight: 600; }
.vlak { color: var(--zacht); }

/* ---------- meldingen ---------- */
.melding {
  background: var(--let-zacht);
  border: 1px solid var(--let-rand);
  color: var(--inkt);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  font-size: 14.5px;
}
.knop {
  min-height: var(--raak);
  padding: 10px 16px;
  border: 1px solid var(--lijn);
  background: var(--kaart);
  color: var(--inkt);
  border-radius: 10px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 550;
  cursor: pointer;
  margin: 4px 6px 0 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.knop.primair { background: var(--kracht); border-color: var(--kracht); color: var(--op-kleur); }
.knop.klein { min-height: 36px; padding: 6px 12px; font-size: 13px; margin: 0; flex: none; }
.diagnose {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 9px;
  font-size: 12px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}