/* ==========================================================================
   Components — Jinja-macro's uit templates/components/ui.html
   Elke regel hier is de CSS-tegenhanger van een React-component uit het
   designsysteem. Geen enkele losse hex- of px-waarde: alles via var(--token).
   ========================================================================== */

/* --- Icon -----------------------------------------------------------------
   Lucide-SVG als CSS-mask, zodat het icoon currentColor overneemt.
   De macro zet --u-icon-url inline; de maat komt van font-size.            */
.u-icon {
  display: inline-block;
  inline-size: 1em; block-size: 1em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--u-icon-url) no-repeat center / contain;
  mask: var(--u-icon-url) no-repeat center / contain;
}

/* --- Button ---------------------------------------------------------------- */
.u-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--touch-min);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.u-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.u-btn[disabled], .u-btn[aria-disabled="true"] {
  cursor: not-allowed; background: var(--surface-locked);
  color: var(--text-disabled); border-color: var(--border-subtle);
}
.u-btn--primary { background: var(--action); color: var(--text-on-dark); }
.u-btn--primary:hover { background: var(--action-hover); color: var(--text-on-dark); }
.u-btn--primary:active { background: var(--action-active); }
.u-btn--dark { background: var(--c-deep-700); color: var(--text-on-dark); }
.u-btn--dark:hover { background: var(--c-deep-900); color: var(--text-on-dark); }
.u-btn--success { background: var(--c-success); color: var(--c-ink-900); }
.u-btn--success:hover { filter: brightness(.95); color: var(--c-ink-900); }
/* Alleen voor wat onomkeerbaar is. Nergens anders gebruiken. */
.u-btn--danger { background: transparent; color: var(--c-error); border-color: var(--c-error); }
.u-btn--danger:hover { background: var(--c-error); color: var(--text-on-dark); }
.u-btn--ghost { background: transparent; color: var(--text-link); border-color: var(--border-strong); }
.u-btn--ghost:hover { background: var(--c-brand-50); color: var(--text-link); }
.u-btn--link {
  background: none; border: none; padding-inline: 0;
  min-block-size: auto; color: var(--text-link);
  text-transform: none; letter-spacing: normal; text-decoration: underline;
}
.u-btn--link:hover { color: var(--c-brand-600); }
.u-btn--sm { min-block-size: auto; padding: var(--space-2) var(--space-4); font-size: var(--fs-label); }
.u-btn--lg { padding: var(--space-4) var(--space-6); font-size: var(--fs-body); }
.u-btn--block { display: flex; inline-size: 100%; }
.u-btn__spinner {
  inline-size: 1em; block-size: 1em; border-radius: var(--radius-pill);
  border: 2px solid currentColor; border-top-color: transparent;
  animation: u-spin var(--dur-slow) linear infinite;
}

/* --- IconButton ----------------------------------------------------------- */
.u-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: var(--touch-min); block-size: var(--touch-min);
  border: none; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-body);
  font-size: var(--fs-lead); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
.u-iconbtn:hover { background: var(--c-brand-50); }
.u-iconbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.u-iconbtn--dark { color: var(--text-on-dark); }
.u-iconbtn--dark:hover { background: var(--c-deep-700); }

/* --- Card ----------------------------------------------------------------- */
.u-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}
.u-card--flush { padding: 0; overflow: hidden; }
.u-card--interactive {
  display: block; inline-size: 100%; text-align: start; cursor: pointer;
  /* Een klikbare kaart reageert met een lift, niet met een onderstreping. */
  color: inherit; text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.u-card--interactive:hover { color: inherit; }
.u-card--interactive :where(h1, h2, h3, h4, p, span) { text-decoration: none; }
.u-card--interactive:hover { transform: translateY(calc(var(--space-1) * -0.5)); box-shadow: var(--shadow-lift); }
.u-card--interactive:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Vergrendeld = dekkend, nooit doorzichtig-grijs */
.u-card--locked { background: var(--surface-locked); box-shadow: none; color: var(--text-muted); }
.u-card--dark { background: var(--surface-dark); border-color: transparent; color: var(--text-on-dark); }
.u-card--dark h1, .u-card--dark h2, .u-card--dark h3 { color: var(--text-on-dark); }
.u-card__title { margin-bottom: var(--space-2); }
.u-card__image { display: block; inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.u-card__body { padding: var(--space-5); }
.u-card__footer {
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

/* --- Badge / StatusBadge -------------------------------------------------- */
.u-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--c-canvas-mute); color: var(--text-body);
  font-size: var(--fs-label); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  white-space: nowrap;
}
.u-badge--brand   { background: var(--c-brand-50);  color: var(--c-brand-700); }
.u-badge--success { background: var(--c-success-bg); color: var(--c-ink-900); }
.u-badge--warn    { background: var(--c-warn-bg);    color: var(--c-ink-900); }
.u-badge--info    { background: var(--c-info-bg);    color: var(--c-info); }
.u-badge--error   { background: var(--c-error-bg);   color: var(--c-error); }
.u-badge--gold    { background: var(--reward); color: var(--c-ink-900); }
/* Leerlijnen: 8%-tint achter het icoon, nooit als vlak */
.u-badge--voeding { background: color-mix(in srgb, var(--c-line-voeding) 8%, var(--c-surface)); color: var(--c-line-voeding); }
.u-badge--mindset { background: color-mix(in srgb, var(--c-line-mindset) 8%, var(--c-surface)); color: var(--c-line-mindset); }
.u-badge--kennis  { background: color-mix(in srgb, var(--c-line-kennis)  8%, var(--c-surface)); color: var(--c-line-kennis); }
.u-badge--kracht  { background: color-mix(in srgb, var(--c-line-kracht)  8%, var(--c-surface)); color: var(--c-line-kracht); }

/* --- FormField + velden --------------------------------------------------- */
.u-field { display: block; margin-bottom: var(--space-5); }
.u-field__label {
  display: block; margin-bottom: var(--space-2);
  font-size: var(--fs-label); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-muted);
}
.u-field__req { color: var(--c-brand-700); }
.u-field__hint { display: block; margin-top: var(--space-2); font-size: var(--fs-small); color: var(--text-muted); }
.u-field__error {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2); font-size: var(--fs-small); color: var(--c-error);
}
.u-input, .u-textarea, .u-select {
  inline-size: 100%;
  min-block-size: var(--touch-min);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-body);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-lead);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.u-input::placeholder, .u-textarea::placeholder { color: var(--text-disabled); }
.u-input:focus, .u-textarea:focus, .u-select:focus {
  outline: none; border-color: var(--action); box-shadow: var(--focus-ring);
}
.u-input[aria-invalid="true"], .u-textarea[aria-invalid="true"] { border-color: var(--c-error); }
.u-textarea { min-block-size: calc(var(--space-10) * 2); resize: vertical; }
.u-input--code {
  font-size: var(--fs-h2); letter-spacing: var(--ls-label);
  text-align: center; font-variant-numeric: tabular-nums;
}
/* Checkbox / Radio / Switch */
.u-check { display: flex; align-items: flex-start; gap: var(--space-3); min-block-size: var(--touch-min); cursor: pointer; }
.u-check input { inline-size: var(--space-5); block-size: var(--space-5); margin-top: var(--space-1); accent-color: var(--action); flex: none; }
.u-check__text { font-size: var(--fs-body); }
.u-check__hint { display: block; font-size: var(--fs-small); color: var(--text-muted); }
.u-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-block-size: var(--touch-min); cursor: pointer; }
.u-switch input { inline-size: var(--space-6); block-size: var(--space-5); accent-color: var(--action); }
/* FileUpload — dashed, border-strong */
.u-upload {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-6);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface-section); color: var(--text-muted);
  text-align: center; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.u-upload:hover { border-color: var(--action); background: var(--c-brand-50); }
.u-upload__icon { font-size: var(--fs-h2); color: var(--action); }
.u-upload input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* ScaleSlider 0–10 */
.u-scale { display: block; }
.u-scale__row { display: flex; align-items: center; gap: var(--space-3); }
.u-scale input[type="range"] { flex: 1; accent-color: var(--action); min-block-size: var(--touch-min); }
.u-scale__value {
  min-inline-size: var(--space-8); text-align: center;
  font-size: var(--fs-h3); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; color: var(--c-brand-700);
}
.u-scale__ends { display: flex; justify-content: space-between; margin-top: var(--space-1); font-size: var(--fs-label); color: var(--text-muted); }
/* StarRating */
.u-stars { display: inline-flex; gap: var(--space-1); }
.u-stars__star { border: none; background: none; padding: var(--space-1); cursor: pointer; color: var(--border-strong); font-size: var(--fs-h3); }
.u-stars__star--on { color: var(--c-gold-deep); }

/* --- Alert ---------------------------------------------------------------- */
.u-alert {
  display: flex; gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--fs-small);
}
.u-alert__icon { font-size: var(--fs-lead); flex: none; }
.u-alert__title { font-weight: var(--fw-semi); margin-bottom: var(--space-1); }
.u-alert__body > :last-child { margin-bottom: 0; }
.u-alert--info    { background: var(--c-info-bg);    color: var(--c-ink-900); border-color: var(--c-info); }
.u-alert--info    .u-alert__icon { color: var(--c-info); }
.u-alert--success { background: var(--c-success-bg); color: var(--c-ink-900); border-color: var(--c-success); }
.u-alert--success .u-alert__icon { color: var(--c-success); }
.u-alert--warn    { background: var(--c-warn-bg);    color: var(--c-ink-900); border-color: var(--c-warn); }
.u-alert--warn    .u-alert__icon { color: var(--c-warn); }
.u-alert--error   { background: var(--c-error-bg);   color: var(--c-ink-900); border-color: var(--c-error); }
.u-alert--error   .u-alert__icon { color: var(--c-error); }

/* --- Toast (rechtsonder) -------------------------------------------------- */
.u-toasts {
  position: fixed; inset-block-end: var(--space-5); inset-inline-end: var(--space-5);
  z-index: 60; display: flex; flex-direction: column; gap: var(--space-2);
  max-inline-size: calc(var(--container) / 3);
}
.u-toast {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lift);
  background: var(--c-deep-900); color: var(--text-on-dark);
  font-size: var(--fs-small);
}
.u-toast--success { background: var(--c-success); color: var(--c-ink-900); }
.u-toast--error   { background: var(--c-error);   color: var(--text-on-dark); }
.u-toast--brand   { background: var(--action);    color: var(--text-on-dark); }

/* --- EmptyState — een uitnodiging, geen mededeling ------------------------ */
.u-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-3); padding: var(--space-8) var(--space-5);
  text-align: center; color: var(--text-muted);
}
.u-empty__icon { font-size: var(--fs-h1); color: var(--c-brand-300); }
.u-empty__title { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--text-heading); }

/* --- Modal ---------------------------------------------------------------- */
.u-modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: var(--space-5); }
.u-modal__overlay { position: absolute; inset: 0; background: var(--overlay); backdrop-filter: blur(2px); border: none; }
.u-modal__panel {
  position: relative; z-index: 1;
  inline-size: 100%; max-inline-size: calc(var(--container) / 2);
  max-block-size: 85vh; overflow: auto;
  background: var(--surface-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift); padding: var(--space-6);
}
.u-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.u-modal__foot { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); }

/* --- Tooltip -------------------------------------------------------------- */
.u-tooltip { position: relative; display: inline-flex; }
.u-tooltip__bubble {
  position: absolute; inset-block-end: calc(100% + var(--space-2)); inset-inline-start: 50%;
  translate: -50% 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--c-deep-900); color: var(--text-on-dark);
  font-size: var(--fs-label); white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.u-tooltip:hover .u-tooltip__bubble, .u-tooltip:focus-within .u-tooltip__bubble { opacity: 1; }

/* --- Topbar — de enige zwarte vlak, 68px ---------------------------------- */
.u-topbar {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: var(--c-black); color: var(--text-on-dark);
  block-size: calc(var(--space-10) + var(--space-5));
}
.u-topbar__inner { display: flex; align-items: center; gap: var(--space-5); block-size: 100%; }
.u-topbar__brand { display: flex; align-items: center; gap: var(--space-3); color: var(--text-on-dark); text-decoration: none; flex: none; }
.u-topbar__logo { block-size: calc(var(--space-8) + var(--space-1)); inline-size: auto; }
.u-topbar__word {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: var(--fs-body); letter-spacing: var(--ls-tight);
  color: var(--text-on-dark);
}
.u-topbar__nav {
  display: flex; align-items: center; gap: var(--space-1);
  margin-inline-start: auto;
  /* Zonder dit kan de balk niet krimpen en duwt het menu de avatar en de
     uitlogknop het scherm af. Met overflow als laatste redmiddel: liever een
     menu dat schuift dan knoppen die verdwijnen. */
  min-inline-size: 0; overflow-x: auto; scrollbar-width: none;
}
.u-topbar__nav::-webkit-scrollbar { display: none; }
.u-topbar__nav { gap: 0; }
.u-topbar__link { flex: none; }

/* Bij het volle deelnemersmenu vervalt het woordmerk: het schild ernaast linkt al
   naar huis, en die ~150px is precies wat het menu tekortkomt. Op de inlogpagina's
   en in het gratis deel (vier items) blijft het woord staan. */
.u-topbar__inner:has(.u-topbar__nav--vol) .u-topbar__word { display: none; }

/* Onder ~1150px passen tien labels ook compact niet meer. Dan wijken de labels en
   blijven de iconen: elke bestemming blijft één klik weg, zonder een menu dat
   horizontaal moet schuiven. De naam blijft aankondigbaar via aria-label en
   zichtbaar bij hover via title. Het gratis menu (vier items) houdt zijn labels. */
@media (max-width: 1149px) {
  .u-topbar__nav--vol .u-topbar__label { display: none; }
  .u-topbar__nav--vol .u-topbar__link { padding-inline: var(--space-3); }
}
.u-topbar__link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-block-size: var(--touch-min); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--text-on-dark-soft); text-decoration: none;
  /* Geen kapitalen en spatiëring hier, in afwijking van de knoppen elders: met
     negen bestemmingen naast elkaar kost dat ruim tweehonderd pixels, en die is
     er niet. De container is 1180px, dus een ruimere balk past op géén enkel
     scherm — niet alleen niet op 13". Leesbare labels wegen zwaarder dan
     eenvormige spatiëring. */
  font-size: var(--fs-label); font-weight: var(--fw-semi);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.u-topbar__link:hover { background: var(--c-deep-700); color: var(--text-on-dark); }
.u-topbar__link--active { background: var(--action); color: var(--text-on-dark); }
.u-topbar__user { display: flex; align-items: center; gap: var(--space-3); }
.u-topbar__avatar {
  display: grid; place-items: center;
  inline-size: var(--space-8); block-size: var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--c-deep-700); color: var(--text-on-dark);
  font-weight: var(--fw-bold); font-size: var(--fs-small);
}

/* --- LineSidebar — sticky, nooit fixed ------------------------------------ */
.u-shell { display: grid; gap: var(--gutter); padding-block: var(--space-6); }
@media (min-width: 900px) { .u-shell--sidebar { grid-template-columns: calc(var(--space-10) * 5) 1fr; } }
.u-sidebar { position: sticky; inset-block-start: calc(var(--space-10) + var(--space-8)); align-self: start; }
.u-sidebar__item {
  display: flex; align-items: center; gap: var(--space-3);
  inline-size: 100%; min-block-size: var(--touch-min);
  padding: var(--space-3) var(--space-4);
  border: none; border-radius: var(--radius-md);
  background: transparent; color: var(--text-body);
  text-align: start; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.u-sidebar__item:hover { background: var(--c-brand-50); }
.u-sidebar__item--active { background: var(--c-brand-50); font-weight: var(--fw-semi); }
.u-sidebar__dot {
  display: grid; place-items: center; flex: none;
  inline-size: var(--space-6); block-size: var(--space-6);
  border-radius: var(--radius-sm); font-size: var(--fs-small);
}
.u-sidebar__meta { margin-inline-start: auto; font-size: var(--fs-label); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* --- Breadcrumb / Tabs / Pagination / Accordion / Dropdown ---------------- */
.u-crumbs { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); color: var(--text-muted); margin-bottom: var(--space-4); }
.u-crumbs a { color: var(--text-muted); }
.u-crumbs a:hover { color: var(--text-link); }
.u-crumbs__sep { font-size: var(--fs-label); opacity: .6; }

.u-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-5); overflow-x: auto; }
.u-tabs__tab {
  min-block-size: var(--touch-min); padding: var(--space-3) var(--space-4);
  border: none; border-bottom: 2px solid transparent; background: none;
  color: var(--text-muted); cursor: pointer; white-space: nowrap;
  font-size: var(--fs-label); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-button); text-transform: uppercase;
  text-decoration: none;
}
.u-tabs__tab:hover { color: var(--text-body); }
.u-tabs__tab--active { color: var(--c-brand-700); border-bottom-color: var(--action); }

.u-pager { display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.u-pager__page {
  display: grid; place-items: center;
  min-inline-size: var(--touch-min); min-block-size: var(--touch-min);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-card); color: var(--text-body); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.u-pager__page--active { background: var(--action); color: var(--text-on-dark); border-color: var(--action); }

.u-accordion { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); overflow: hidden; }
.u-accordion + .u-accordion { margin-top: var(--space-3); }
.u-accordion__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  inline-size: 100%; min-block-size: var(--touch-min); padding: var(--space-4);
  border: none; background: none; cursor: pointer; text-align: start;
  font-weight: var(--fw-semi); color: var(--text-heading);
}
.u-accordion__head:hover { background: var(--c-brand-50); }
.u-accordion__body { padding: 0 var(--space-4) var(--space-4); }
.u-accordion[open] .u-accordion__chev { rotate: 180deg; }
.u-accordion__chev { transition: rotate var(--dur) var(--ease); }
summary.u-accordion__head::-webkit-details-marker { display: none; }
summary.u-accordion__head { list-style: none; }

.u-dropdown { position: relative; }
.u-dropdown__menu {
  position: absolute; inset-block-start: calc(100% + var(--space-1)); inset-inline-end: 0; z-index: 40;
  min-inline-size: calc(var(--space-10) * 3);
  padding: var(--space-2);
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lift);
}
.u-dropdown__item {
  display: flex; align-items: center; gap: var(--space-3);
  inline-size: 100%; min-block-size: var(--touch-min); padding: var(--space-2) var(--space-3);
  border: none; border-radius: var(--radius-sm); background: none;
  color: var(--text-body); text-align: start; text-decoration: none; cursor: pointer;
}
.u-dropdown__item:hover { background: var(--c-brand-50); }

/* --- MobileTabBar — vier iconen, vervangt de zijbalk ---------------------- */
.u-tabbar {
  position: sticky; inset-block-end: 0; z-index: 50;
  display: flex; background: var(--c-black);
  padding-block: var(--space-1);
  padding-block-end: max(var(--space-1), env(safe-area-inset-bottom));
}
.u-tabbar__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-1); min-block-size: var(--touch-min);
  color: var(--text-on-dark-soft); text-decoration: none;
  font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase;
}
.u-tabbar__item--active { color: var(--action); }
.u-tabbar__icon { font-size: var(--fs-lead); }

/* --- ProgressShield — het ene opvallende element per scherm --------------- */
.u-shield { display: inline-block; position: relative; line-height: 0; }
.u-shield__svg { display: block; }
.u-shield__quad { transition: opacity var(--dur-slow) var(--ease), fill var(--dur-slow) var(--ease); }
.u-shield__quad--done { animation: u-gold-flash var(--dur-slow) var(--ease) 1; }
.u-shield__pct {
  position: absolute; inset-block-end: calc(var(--space-1) * -1); inset-inline-start: 50%;
  translate: -50% 0;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  background: var(--c-deep-900); color: var(--text-on-dark);
  font-size: var(--fs-label); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; line-height: var(--lh-body);
}

/* --- ProgressBar / ProgressRing ------------------------------------------- */
.u-progress__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.u-progress__track {
  block-size: var(--space-2); border-radius: var(--radius-pill);
  background: var(--c-canvas-mute); overflow: hidden;
}
.u-progress--sm .u-progress__track { block-size: var(--space-1); }
.u-progress--lg .u-progress__track { block-size: var(--space-3); }
.u-progress__fill {
  block-size: 100%; border-radius: var(--radius-pill);
  background: var(--action);
  transition: inline-size var(--dur-slow) var(--ease);
}
.u-progress__fill--done { background: var(--c-success); }
.u-progress__text { font-size: var(--fs-label); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.u-ring { display: inline-grid; place-items: center; position: relative; }
.u-ring__svg { transform: rotate(-90deg); }
.u-ring__track { fill: none; stroke: var(--c-canvas-mute); }
.u-ring__fill { fill: none; stroke: var(--action); stroke-linecap: round; transition: stroke-dashoffset var(--dur-slow) var(--ease); }
.u-ring__label {
  position: absolute; text-align: center;
  font-size: var(--fs-small); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; color: var(--text-heading);
}

/* --- ModuleTile ----------------------------------------------------------- */
.u-tile { display: flex; flex-direction: column; gap: var(--space-3); }
.u-tile__head { display: flex; align-items: center; gap: var(--space-3); }
.u-tile__mark {
  display: grid; place-items: center; flex: none;
  inline-size: var(--space-8); block-size: var(--space-8);
  border-radius: var(--radius-md); font-size: var(--fs-lead);
}
.u-tile__mark--voeding { background: color-mix(in srgb, var(--c-line-voeding) 8%, var(--c-surface)); color: var(--c-line-voeding); }
.u-tile__mark--mindset { background: color-mix(in srgb, var(--c-line-mindset) 8%, var(--c-surface)); color: var(--c-line-mindset); }
.u-tile__mark--kennis  { background: color-mix(in srgb, var(--c-line-kennis)  8%, var(--c-surface)); color: var(--c-line-kennis); }
.u-tile__mark--kracht  { background: color-mix(in srgb, var(--c-line-kracht)  8%, var(--c-surface)); color: var(--c-line-kracht); }
.u-tile__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); color: var(--text-heading); margin: 0; }
.u-tile__meta { display: flex; align-items: center; gap: var(--space-4); font-size: var(--fs-small); color: var(--text-muted); }
.u-tile__meta span { display: inline-flex; align-items: center; gap: var(--space-1); }

/* --- LessonPager — sticky actiebalk onderaan de lesweergave --------------- */
.u-lessonpager {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
}
.u-lessonpager--sticky { position: sticky; inset-block-end: var(--space-4); z-index: 30; }

/* --- VideoPlayer ---------------------------------------------------------- */
.u-video { border-radius: var(--radius-lg); overflow: hidden; background: var(--c-deep-900); }
.u-video__frame { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; }
.u-video__frame img, .u-video__frame iframe, .u-video__frame video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: none; object-fit: cover; }
.u-video__play {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  inline-size: var(--space-10); block-size: var(--space-10);
  border: none; border-radius: var(--radius-pill);
  background: var(--action); color: var(--text-on-dark);
  font-size: var(--fs-h2); cursor: pointer;
}
.u-video__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); color: var(--text-on-dark); font-size: var(--fs-small); }

/* --- QuizCard (kennischeck) ---------------------------------------------- */
.u-quiz__q { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); color: var(--text-heading); margin-bottom: var(--space-4); }
.u-quiz__opt {
  display: flex; align-items: center; gap: var(--space-3);
  inline-size: 100%; min-block-size: var(--touch-min);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-card); color: var(--text-body);
  text-align: start; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.u-quiz__opt:hover { border-color: var(--action); background: var(--c-brand-50); }
.u-quiz__opt--right { border-color: var(--c-success); background: var(--c-success-bg); }
.u-quiz__opt--wrong { border-color: var(--c-error); background: var(--c-error-bg); }
.u-quiz__opt[disabled] { cursor: default; }
.u-quiz__mark { margin-inline-start: auto; flex: none; }
.u-quiz__mark--right { color: var(--c-success); }
.u-quiz__mark--wrong { color: var(--c-error); }

/* --- DayChecklist -------------------------------------------------------- */
.u-checklist__row {
  display: flex; align-items: center; gap: var(--space-3);
  min-block-size: var(--touch-min); padding-block: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}
.u-checklist__row:last-child { border-bottom: none; }
.u-checklist__box {
  display: grid; place-items: center; flex: none;
  inline-size: var(--space-5); block-size: var(--space-5);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-card); color: transparent; cursor: pointer;
}
.u-checklist__box[aria-pressed="true"] { background: var(--c-success); border-color: var(--c-success); color: var(--c-ink-900); }
.u-checklist__label { flex: 1; }
.u-checklist__row--done .u-checklist__label { color: var(--text-muted); }
/* Een gemiste dag is neutraal — grijs streepje, nooit rood */
.u-checklist__week { display: flex; gap: var(--space-1); }
.u-checklist__day { inline-size: var(--space-3); block-size: var(--space-1); border-radius: var(--radius-pill); background: var(--c-canvas-mute); }
.u-checklist__day--done { background: var(--c-success); }

/* --- AssignmentSubmit ---------------------------------------------------- */
.u-assign__prompt { padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-section); margin-bottom: var(--space-4); }

/* --- CoachMessage ------------------------------------------------------- */
.u-coach { display: flex; gap: var(--space-3); }
.u-coach__avatar {
  display: grid; place-items: center; flex: none;
  inline-size: var(--space-8); block-size: var(--space-8);
  border-radius: var(--radius-pill); overflow: hidden;
  background: var(--c-deep-700); color: var(--text-on-dark);
  font-weight: var(--fw-bold); font-size: var(--fs-small);
}
.u-coach__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.u-coach__body { flex: 1; min-inline-size: 0; }
.u-coach__name { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-1); }
.u-coach__name strong { font-family: var(--font-display); font-size: var(--fs-small); color: var(--text-heading); }
.u-coach__time { font-size: var(--fs-label); color: var(--text-muted); }
.u-coach__bubble {
  padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--surface-section); color: var(--text-body);
}
.u-coach__bubble > :last-child { margin-bottom: 0; }
.u-coach--block .u-coach__bubble { background: var(--surface-dark); color: var(--text-on-dark-soft); }
.u-coach--me .u-coach__bubble { background: var(--c-brand-50); }
.u-coach--me { flex-direction: row-reverse; }

/* --- StatBlock ---------------------------------------------------------- */
.u-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.u-stat__value {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: var(--fs-h1); line-height: var(--lh-tight);
  color: var(--text-heading); font-variant-numeric: tabular-nums;
}
.u-stat__unit { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--text-muted); margin-inline-start: var(--space-1); }
.u-stat__label { font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
/* Getallen worden getoond, niet becommentarieerd: trend is neutraal grijs */
.u-stat__trend { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-small); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* --- CertificateCard — het goudverloop, alleen hier ---------------------- */
.u-cert { border-radius: var(--radius-lg); padding: var(--space-6); text-align: center; background: var(--reward); color: var(--c-ink-900); box-shadow: var(--shadow-card); }
.u-cert--locked { background: var(--surface-locked); color: var(--text-muted); }
.u-cert__icon { font-size: var(--fs-hero); }
.u-cert__title { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-h2); color: var(--c-ink-900); }
.u-cert--locked .u-cert__title { color: var(--text-muted); }
.u-cert__name { font-family: var(--font-display); font-size: var(--fs-h3); }

/* --- Skeleton ----------------------------------------------------------- */
.u-skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--c-canvas-mute), var(--c-canvas-warm), var(--c-canvas-mute));
  background-size: 200% 100%;
  animation: u-shimmer 1.2s linear infinite;
}

/* --- Tabel -------------------------------------------------------------- */
.u-tablewrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); }
.u-table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.u-table th, .u-table td { padding: var(--space-3) var(--space-4); text-align: start; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.u-table th { font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); background: var(--surface-section); }
.u-table tbody tr:last-child td { border-bottom: none; }
.u-table tbody tr:hover { background: var(--c-brand-50); }
.u-table__num { font-variant-numeric: tabular-nums; }

/* Iconen op het schild — bovenop de SVG, zodat één icoonmechanisme volstaat. */
.u-shield__icons { position: absolute; inset: 0; pointer-events: none; }
.u-shield__icon { position: absolute; translate: -50% -50%; opacity: .9; }
.u-shield__icon--voeding { inset-inline-start: 27%; inset-block-start: 26%; }
.u-shield__icon--mindset { inset-inline-start: 73%; inset-block-start: 26%; }
.u-shield__icon--kennis  { inset-inline-start: 27%; inset-block-start: 66%; }
.u-shield__icon--kracht  { inset-inline-start: 73%; inset-block-start: 66%; }