/* ==========================================================================
   Pages — schermspecifieke layout. Alleen compositie, geen nieuwe primitieven.
   ========================================================================== */

/* --- Paginakop ------------------------------------------------------------ */
.p-head { margin-bottom: var(--space-6); }
.p-head__row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.p-head__lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-muted); max-width: var(--measure); }

/* --- Inloggen / registreren — gecentreerd, donkere merkactie -------------- */
.p-auth { min-block-size: 100vh; display: grid; place-items: center; padding: var(--space-5); background: var(--surface-page); }
.p-auth__box { inline-size: 100%; max-inline-size: calc(var(--space-10) * 9); }
.p-auth__brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); text-align: center; }
.p-auth__logo { block-size: calc(var(--space-10) + var(--space-6)); inline-size: auto; }
.p-auth__word { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-h2); letter-spacing: var(--ls-tight); color: var(--text-heading); }
.p-auth__sub { font-size: var(--fs-small); color: var(--text-muted); }
.p-auth__foot { margin-top: var(--space-5); text-align: center; font-size: var(--fs-small); color: var(--text-muted); }

/* --- Dashboard ----------------------------------------------------------- */
.p-dash__hero { display: grid; gap: var(--gutter); align-items: center; margin-bottom: var(--space-6); }
@media (min-width: 900px) { .p-dash__hero { grid-template-columns: auto 1fr; } }
.p-dash__shield { display: grid; place-items: center; padding: var(--space-4); }
.p-dash__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
@media (min-width: 640px) { .p-dash__stats { grid-template-columns: repeat(4, 1fr); } }
.p-dash__today { border-inline-start: none; }

/* --- Lesweergave --------------------------------------------------------- */
.p-lesson { display: grid; gap: var(--gutter); }
@media (min-width: 1180px) { .p-lesson { grid-template-columns: 1fr calc(var(--space-10) * 6); align-items: start; } }
.p-lesson__aside { display: grid; gap: var(--space-5); }
@media (min-width: 1180px) { .p-lesson__aside { position: sticky; inset-block-start: calc(var(--space-10) + var(--space-8)); } }
/* Lestekst op 68ch, één idee per alinea */
.p-prose { max-inline-size: var(--measure); }
.p-prose > * + * { margin-top: var(--space-4); }
.p-prose h2 { margin-top: var(--space-6); }
.p-prose h3 { margin-top: var(--space-5); }
.p-prose ul, .p-prose ol { padding-inline-start: var(--space-5); }
.p-prose li + li { margin-top: var(--space-2); }
.p-prose blockquote {
  margin: 0; padding: var(--space-4) var(--space-5);
  background: var(--surface-section); border-radius: var(--radius-md);
  font-size: var(--fs-lead); color: var(--text-body);
}
.p-prose img { max-inline-size: 100%; block-size: auto; border-radius: var(--radius-lg); }
.p-prose code { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--surface-section); font-size: var(--fs-small); }
.p-prose table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.p-prose th, .p-prose td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); text-align: start; }
/* Persoonlijk toegevoegd blok — herkenbaar, maar rustig */
.p-prose__personal { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--c-brand-50); }
.p-prose__personal .u-label { margin-bottom: var(--space-2); }

/* --- Voortgang ----------------------------------------------------------- */
.p-progress__chart { inline-size: 100%; block-size: auto; }
.p-progress__grid { display: grid; gap: var(--gutter); }
@media (min-width: 900px) { .p-progress__grid { grid-template-columns: 1fr 1fr; } }
.p-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 640px) { .p-photos { grid-template-columns: repeat(4, 1fr); } }
.p-photos__item { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-locked); aspect-ratio: 3 / 4; }
.p-photos__item img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.p-photos__cap { position: absolute; inset-block-end: 0; inset-inline: 0; padding: var(--space-2); background: var(--overlay); color: var(--text-on-dark); font-size: var(--fs-label); }

/* --- Coach-chat ---------------------------------------------------------- */
.p-chat { display: flex; flex-direction: column; gap: var(--space-4); }
.p-chat__log { display: flex; flex-direction: column; gap: var(--space-5); min-block-size: calc(var(--space-10) * 5); }
.p-chat__form { display: flex; gap: var(--space-3); align-items: flex-end; }
.p-chat__form .u-textarea { min-block-size: var(--touch-min); }
.p-chat__typing { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); color: var(--text-muted); }
.p-chat__cost { font-size: var(--fs-label); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.p-chat__suggest { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* --- Forum --------------------------------------------------------------- */
.p-forum__thread { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border-bottom: 1px solid var(--border-subtle); text-decoration: none; color: inherit; }
.p-forum__thread:last-child { border-bottom: none; }
.p-forum__thread:hover { background: var(--c-brand-50); }
.p-forum__title { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--text-heading); margin: 0; }
.p-forum__meta { font-size: var(--fs-small); color: var(--text-muted); }
.p-forum__count { margin-inline-start: auto; text-align: center; flex: none; }

/* --- Gamification -------------------------------------------------------- */
.p-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
@media (min-width: 640px) { .p-badges { grid-template-columns: repeat(4, 1fr); } }
.p-badge { text-align: center; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-subtle); }
.p-badge--earned { background: var(--reward); border-color: transparent; }
.p-badge--locked { background: var(--surface-locked); color: var(--text-muted); border-color: transparent; }
.p-badge__icon { font-size: var(--fs-h1); }
.p-badge__name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-small); }
.p-board__row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.p-board__row:last-child { border-bottom: none; }
.p-board__row--me { background: var(--c-brand-50); }
.p-board__rank { min-inline-size: var(--space-6); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--text-muted); }
.p-board__pts { margin-inline-start: auto; font-variant-numeric: tabular-nums; font-weight: var(--fw-semi); }

/* --- Intake -------------------------------------------------------------- */
.p-intake__block { margin-bottom: var(--space-8); }
.p-intake__blocknum { font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-brand-700); }
.p-intake__bonus { margin-top: var(--space-5); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-section); }
.p-intake__rail { display: flex; gap: var(--space-1); margin-bottom: var(--space-5); }
.p-intake__step { flex: 1; block-size: var(--space-1); border-radius: var(--radius-pill); background: var(--c-canvas-mute); }
.p-intake__step--done { background: var(--c-success); }
.p-intake__step--now { background: var(--action); }

/* --- Beheer / editor ----------------------------------------------------- */
.p-admin__filters { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }
.p-editor__grid { display: grid; gap: var(--gutter); }
@media (min-width: 1180px) { .p-editor__grid { grid-template-columns: 1fr calc(var(--space-10) * 6); align-items: start; } }
.p-editor__toolbar { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-2); border: 1px solid var(--border-strong); border-bottom: none; border-start-start-radius: var(--radius-md); border-start-end-radius: var(--radius-md); background: var(--surface-section); }
.p-editor__tool { min-inline-size: var(--touch-min); min-block-size: var(--touch-min); border: none; background: none; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-body); font-weight: var(--fw-semi); }
.p-editor__tool:hover { background: var(--c-brand-100); }
.p-editor__surface {
  min-block-size: calc(var(--space-10) * 6);
  padding: var(--space-5);
  border: 1px solid var(--border-strong);
  border-end-start-radius: var(--radius-md); border-end-end-radius: var(--radius-md);
  background: var(--surface-card);
  max-inline-size: none;
}
.p-editor__surface:focus { outline: none; box-shadow: var(--focus-ring); }
.p-editor__row { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); }
.p-editor__row + .p-editor__row { margin-top: var(--space-2); }
.p-editor__grip { color: var(--text-disabled); cursor: grab; padding-top: var(--space-2); }

/* --- Footer ------------------------------------------------------------- */
.p-foot { margin-top: var(--space-10); padding-block: var(--space-6); border-top: 1px solid var(--border-subtle); font-size: var(--fs-small); color: var(--text-muted); }
.p-foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }

/* --- Personalisatie die nog geladen wordt -------------------------------- */
.p-personal-laadt {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--c-brand-50);
}
.p-personal-laadt__melding {
  display: flex; align-items: center; gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-4);
  color: var(--text-body); font-size: var(--fs-small);
}
.p-personal-laadt__melding .u-btn__spinner { color: var(--action); }

/* --- Ontwikkelplan ------------------------------------------------------- */
.p-focus__nummer {
  display: grid; place-items: center; flex: none;
  inline-size: var(--space-6); block-size: var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--action); color: var(--text-on-dark);
  font-weight: var(--fw-bold); font-size: var(--fs-small);
}
.p-focus__les {
  display: flex; align-items: center; gap: var(--space-3);
  min-block-size: var(--touch-min); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-card); color: var(--text-body); text-decoration: none;
  font-size: var(--fs-small);
}
.p-focus__les + .p-focus__les { margin-top: var(--space-2); }
a.p-focus__les:hover { background: var(--c-brand-50); color: var(--text-body); }
.p-focus__les--slot { background: var(--surface-locked); color: var(--text-muted); }

/* --- Lessen koppelen ---------------------------------------------------- */
.p-koppel__rij {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-card);
}
.p-koppel__rij + .p-koppel__rij { margin-top: var(--space-2); }
.p-koppel__rij--aan { border-color: var(--action); background: var(--c-brand-50); }
.p-koppel__orde {
  min-inline-size: var(--space-6); text-align: center;
  font-variant-numeric: tabular-nums; font-weight: var(--fw-bold);
  color: var(--text-muted);
}

/* --- Challenges ---------------------------------------------------------- */
.p-challenge { display: grid; gap: var(--gutter); }
@media (min-width: 1180px) {
  .p-challenge { grid-template-columns: 1fr calc(var(--space-10) * 6); align-items: start; }
  .p-challenge__aside { position: sticky; inset-block-start: calc(var(--space-10) + var(--space-8)); }
}
.p-uitdaging {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-card);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.p-uitdaging + .p-uitdaging { margin-top: var(--space-3); }
.p-uitdaging--af { border-color: var(--c-success); background: var(--c-success-bg); }
.p-uitdaging__vink {
  display: grid; place-items: center; flex: none;
  inline-size: var(--touch-min); block-size: var(--touch-min);
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--text-muted); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.p-uitdaging__vink:hover:not([disabled]) { background: var(--c-brand-50); color: var(--action); }
.p-uitdaging__vink:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.p-uitdaging__vink[aria-pressed="true"] {
  background: var(--c-success); border-color: var(--c-success); color: var(--c-ink-900);
}
.p-uitdaging__vink[disabled] { cursor: not-allowed; color: var(--text-disabled); }
.p-uitdaging__tekst { flex: 1; min-inline-size: 0; }
.p-uitdaging__status { flex: none; }

/* --- AI-coach identiteit ------------------------------------------------- */
.p-coach-id { display: grid; gap: var(--gutter); align-items: center; }
@media (min-width: 640px) { .p-coach-id { grid-template-columns: auto 1fr; } }
.p-coach-id__portret {
  inline-size: calc(var(--space-10) * 4); block-size: auto;
  max-inline-size: 100%;
  border-radius: var(--radius-lg);
  background: var(--c-deep-900);
}
.p-coach-avatar-groot {
  inline-size: calc(var(--space-10) + var(--space-6));
  block-size: auto; border-radius: var(--radius-pill);
  background: var(--c-deep-900); flex: none;
}
@media (max-width: 639px) { .p-coach-avatar-groot { display: none; } }

/* --- Volledig laadscherm voor een trage AI-call -------------------------- */
.p-bezig__spinner {
  display: inline-block;
  inline-size: var(--space-8); block-size: var(--space-8);
  border-radius: var(--radius-pill);
  border: 3px solid var(--c-brand-100);
  border-top-color: var(--action);
  animation: u-spin 900ms linear infinite;
}
.p-bezig__stappen {
  list-style: none; margin: var(--space-6) 0 var(--space-5); padding: 0;
  max-inline-size: var(--measure); margin-inline: auto;
}
.p-bezig__stappen li {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding-block: var(--space-2);
  color: var(--text-body); font-size: var(--fs-small);
}
.p-bezig__stappen li .u-icon { color: var(--c-brand-300); margin-top: var(--space-1); }

/* ==========================================================================
   Coach-chat — opgezet als chat-app: gesprekkenlijst, bubbels, vaste invoerbalk
   ========================================================================== */
.p-chatapp { display: grid; gap: var(--gutter); }
@media (min-width: 900px) {
  .p-chatapp { grid-template-columns: calc(var(--space-10) * 5) 1fr; align-items: start; }
}

/* --- Gesprekkenlijst --- */
.p-chatapp__zij { min-inline-size: 0; }
.p-chatapp__lijst { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
@media (max-width: 899px) {
  .p-chatapp__lijst { flex-direction: row; overflow-x: auto; padding-bottom: var(--space-2); }
  .p-chatapp__item { flex: none; max-inline-size: 14rem; }
}
.p-chatapp__item {
  display: block; position: relative;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--text-body); text-decoration: none;
  transition: background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.p-chatapp__item:hover { background: var(--c-brand-50); color: var(--text-body); }
.p-chatapp__item--actief { background: var(--c-brand-50); font-weight: var(--fw-semi); }
.p-chatapp__item--actief::before {
  content: ""; position: absolute; inset-block: var(--space-2); inset-inline-start: 0;
  inline-size: 3px; border-radius: var(--radius-pill); background: var(--action);
}
.p-chatapp__item-titel { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Het venster --- */
.p-chatapp__hoofd {
  display: flex; flex-direction: column;
  min-inline-size: 0; position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
/* Een dunne merkstreep bovenaan, zodat het venster niet los in de pagina hangt. */
.p-chatapp__hoofd::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 3px;
  background: linear-gradient(90deg, var(--c-brand-500), var(--c-gold), var(--c-deep-700));
  z-index: 2;
}

.p-chatapp__kop {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-card);
}
.p-chatapp__avatar {
  inline-size: var(--space-8); block-size: var(--space-8);
  border-radius: var(--radius-pill); background: var(--c-deep-900); flex: none;
  box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--c-brand-100);
}

/* --- De berichtenstroom --- */
.p-chatapp__log {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-5);
  block-size: min(58vh, calc(var(--space-10) * 10));
  overflow-y: auto;
  scroll-behavior: smooth;
  background:
    radial-gradient(circle at 12% 8%, var(--c-brand-50) 0, transparent 42%),
    radial-gradient(circle at 88% 92%, var(--c-canvas-warm) 0, transparent 45%),
    var(--surface-card);
}
.p-chatapp__log::-webkit-scrollbar { inline-size: var(--space-2); }
.p-chatapp__log::-webkit-scrollbar-thumb {
  background: var(--c-border-strong); border-radius: var(--radius-pill);
}

/* --- Lege staat --- */
.p-chatapp__leeg {
  margin: auto; text-align: center; max-inline-size: var(--measure);
  padding: var(--space-6) var(--space-4);
}
.p-chatapp__leeg-icoon {
  display: grid; place-items: center; margin-inline: auto;
  inline-size: var(--space-10); block-size: var(--space-10);
  border-radius: var(--radius-pill);
  background: var(--c-brand-50); color: var(--action);
  font-size: var(--fs-h2); margin-bottom: var(--space-4);
}
.p-chatapp__suggesties {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  justify-content: center; margin-top: var(--space-5);
}
.p-chatapp__suggesties .u-btn {
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.p-chatapp__suggesties .u-btn:hover {
  transform: translateY(-1px); border-color: var(--action);
}

/* --- Bubbels --- */
.p-bubbel {
  display: flex; align-items: flex-end; gap: var(--space-2); max-inline-size: 84%;
  animation: p-bubbel-in var(--dur-slow) var(--ease) both;
}
@keyframes p-bubbel-in {
  from { opacity: 0; transform: translateY(var(--space-3)); }
  to   { opacity: 1; transform: none; }
}
.p-bubbel--mij { margin-inline-start: auto; flex-direction: row-reverse; }
.p-bubbel--coach { margin-inline-end: auto; }
.p-bubbel__avatar {
  inline-size: var(--space-6); block-size: var(--space-6);
  border-radius: var(--radius-pill); background: var(--c-deep-900); flex: none;
  box-shadow: 0 0 0 2px var(--surface-card);
}
.p-bubbel__inhoud {
  position: relative;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-section); color: var(--text-body);
  white-space: pre-line;
  box-shadow: var(--shadow-card);
}
.p-bubbel--mij .p-bubbel__inhoud {
  background: linear-gradient(135deg, var(--c-brand-500), var(--c-brand-600));
  color: var(--text-on-dark);
  border-end-end-radius: var(--radius-sm);
}
.p-bubbel--coach .p-bubbel__inhoud {
  border-end-start-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}
.p-bubbel__inhoud--fout {
  background: var(--c-error-bg); color: var(--c-ink-900);
  border-color: var(--c-error);
}
.p-bubbel__tijd {
  display: block; margin-top: var(--space-1);
  font-size: var(--fs-label); opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.p-bubbel:hover .p-bubbel__tijd, .p-bubbel:focus-within .p-bubbel__tijd { opacity: .7; }
.p-bubbel--mij .p-bubbel__tijd { text-align: end; }

/* --- Denk-indicator --- */
.p-denkt { display: inline-flex; gap: var(--space-1); align-items: center; padding-block: var(--space-1); }
.p-denkt i {
  inline-size: var(--space-2); block-size: var(--space-2);
  border-radius: var(--radius-pill); background: var(--action);
  animation: u-denkt 1.2s ease-in-out infinite;
}
.p-denkt i:nth-child(2) { animation-delay: .18s; }
.p-denkt i:nth-child(3) { animation-delay: .36s; }
@keyframes u-denkt {
  0%, 60%, 100% { opacity: .25; transform: translateY(0) scale(.85); }
  30% { opacity: 1; transform: translateY(calc(var(--space-1) * -1)) scale(1); }
}

/* --- Invoerbalk --- */
.p-chatapp__invoer {
  display: flex; align-items: flex-end; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) var(--space-5) 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.p-chatapp__invoer:focus-within {
  border-color: var(--action); box-shadow: var(--focus-ring);
}
.p-chatapp__veld {
  min-block-size: var(--space-8); max-block-size: 10rem; resize: none;
  border: none; background: none; padding: var(--space-2);
  box-shadow: none;
}
.p-chatapp__veld:focus { outline: none; box-shadow: none; border-color: transparent; }
.p-chatapp__stuur {
  flex: none; inline-size: var(--space-8); block-size: var(--space-8);
  min-block-size: var(--space-8); padding: 0;
  border-radius: var(--radius-pill);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur) var(--ease);
}
.p-chatapp__stuur:not([disabled]):hover { transform: scale(1.06); }
.p-chatapp__stuur[disabled] { opacity: .45; }

.p-chatapp__voet {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  color: var(--text-muted);
  margin: 0;
}

/* --- AI duidelijk labelen ------------------------------------------------ */
.p-ai-label {
  display: inline-block; margin-inline-start: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--c-info-bg); color: var(--c-info);
  font-size: var(--fs-label); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  vertical-align: middle;
}
.p-chatapp__disclaimer {
  display: grid; gap: var(--space-2);
  margin: 0; padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--c-warn-bg);
  color: var(--c-ink-900); font-size: var(--fs-small);
}
.p-chatapp__disclaimer p { display: flex; align-items: flex-start; gap: var(--space-2); }
.p-chatapp__disclaimer .u-icon { color: var(--c-warn); margin-top: var(--space-1); flex: none; }
.p-chatapp__disclaimer p:nth-child(2) .u-icon { color: var(--text-muted); }
.p-ai-noot {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-label); color: var(--text-muted);
}

/* --- Voeding ------------------------------------------------------------- */
.p-voeding__rij {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.p-voeding__rij:last-child { border-bottom: none; }
.p-voeding__kcal { flex: none; inline-size: calc(var(--space-10) + var(--space-4)); }
.p-voeding__kcal .u-input { text-align: end; padding: var(--space-2) var(--space-3); }
.p-voeding__uitsplitsing { margin-top: var(--space-2); }
.p-voeding__uitsplitsing summary {
  cursor: pointer; font-size: var(--fs-label); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: var(--ls-label);
}
.p-voeding__uitsplitsing ul {
  margin: var(--space-2) 0; padding-inline-start: var(--space-5);
  font-size: var(--fs-small); color: var(--text-body);
}
#schat-bezig.htmx-request { display: flex !important; }

/* --- Coach-signalen ------------------------------------------------------ */
.p-signalen__lijst { list-style: none; margin: 0; padding: 0; }
.p-signalen__rij {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  align-items: baseline;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.p-signalen__rij:last-child { border-bottom: none; }
.p-signalen__naam {
  flex: none; min-inline-size: 10rem;
  font-weight: var(--fw-semi); color: var(--text-heading);
}
.p-signalen__punten { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.p-signalen__punt {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--c-warn-bg); color: var(--c-ink-900);
  font-size: var(--fs-small);
}

/* --- Workout builder: blokken ------------------------------------------- */
.p-workout__letter {
  display: inline-grid; place-items: center;
  inline-size: var(--space-8); block-size: var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--action); color: var(--text-on-dark);
  font-weight: var(--fw-bold); font-size: var(--fs-body);
}
.p-workout__blok {
  margin-top: var(--space-5); padding: var(--space-4);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-section);
}
.p-workout__tabel td { vertical-align: top; }
.p-workout__toevoegen { margin-top: var(--space-3); }
.p-workout__toevoegen summary {
  cursor: pointer; font-size: var(--fs-label); color: var(--text-link);
  text-transform: uppercase; letter-spacing: var(--ls-label);
}
.p-workout__toevoegen[open] summary { margin-bottom: var(--space-3); }

/* --- Beamer: fullscreen in de zaal -------------------------------------- */
/* Donker, want een beamer in een lichte zaal met een wit vlak is niet te zien.
   Alle maten in vw/clamp: hetzelfde blad moet leesbaar zijn op een 4K-beamer en
   op een tablet die de coach in zijn hand houdt. */
.p-beamer {
  margin: 0; min-block-size: 100vh;
  background: var(--c-deep-900); color: var(--text-on-dark);
  display: flex; flex-direction: column;
  font-size: clamp(1rem, 1.15vw, 1.6rem);
}
.p-beamer__top {
  display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.5rem);
  padding: clamp(.75rem, 1.5vw, 2rem) clamp(1rem, 2.5vw, 3rem);
  border-block-end: 1px solid rgb(255 255 255 / .12);
}
.p-beamer__logo { block-size: clamp(2.5rem, 4vw, 5rem); inline-size: auto; }
.p-beamer__kop { flex: 1; min-inline-size: 0; }
.p-beamer__kop h1 {
  margin: 0; color: var(--text-on-dark);
  font-size: clamp(1.5rem, 2.6vw, 3.4rem); line-height: 1.05;
}
.p-beamer__label {
  display: block; color: var(--c-brand-300);
  font-size: clamp(.7rem, .9vw, 1.1rem);
  text-transform: uppercase; letter-spacing: var(--ls-label);
}
.p-beamer__tabs { display: flex; gap: var(--space-2); flex: none; }
.p-beamer__tab {
  display: grid; place-items: center;
  inline-size: clamp(2.5rem, 3.4vw, 4.5rem);
  block-size: clamp(2.5rem, 3.4vw, 4.5rem);
  border-radius: var(--radius-md);
  border: 2px solid rgb(255 255 255 / .25);
  color: var(--text-on-dark); text-decoration: none;
  font-weight: var(--fw-bold); font-size: clamp(1rem, 1.6vw, 2rem);
}
.p-beamer__tab--actief { background: var(--action); border-color: var(--action); }
.p-beamer__main {
  flex: 1; padding: clamp(1rem, 2vw, 2.5rem) clamp(1rem, 2.5vw, 3rem);
  display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 2.5rem);
}
.p-beamer__variantkop { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.p-beamer__variantkop h2 {
  margin: 0; color: var(--text-on-dark);
  font-size: clamp(1.25rem, 2vw, 2.6rem);
}
.p-beamer__variantkop p { margin: 0; color: rgb(255 255 255 / .72); }
.p-beamer__letter {
  display: grid; place-items: center; flex: none;
  inline-size: clamp(3rem, 5vw, 7rem); block-size: clamp(3rem, 5vw, 7rem);
  border-radius: var(--radius-lg);
  background: var(--action); color: var(--text-on-dark);
  font-weight: var(--fw-black); font-size: clamp(1.5rem, 3vw, 4rem);
}
.p-beamer__blok { break-inside: avoid; }
.p-beamer__blokkop {
  display: flex; align-items: baseline; gap: var(--space-4);
  margin-block-end: var(--space-3);
  border-block-end: 2px solid var(--action); padding-block-end: var(--space-2);
}
.p-beamer__blokkop h3 {
  margin: 0; color: var(--text-on-dark);
  font-size: clamp(1.1rem, 1.7vw, 2.1rem);
}
.p-beamer__blokkop span { color: rgb(255 255 255 / .7); }
.p-beamer__tabel { inline-size: 100%; border-collapse: collapse; }
.p-beamer__tabel th {
  text-align: start; color: var(--c-brand-300);
  font-size: clamp(.7rem, .85vw, 1rem);
  text-transform: uppercase; letter-spacing: var(--ls-label);
  padding-block: var(--space-2);
}
.p-beamer__tabel th, .p-beamer__tabel td {
  /* Ruimte tussen de kolommen. Zonder dit plakken "500 m" en "rust 60 sec"
     tegen elkaar en lijkt het één veld. */
  padding-inline-end: clamp(.75rem, 1.5vw, 2rem);
}
.p-beamer__tabel th:last-child, .p-beamer__tabel td:last-child {
  padding-inline-end: 0;
}
.p-beamer__tabel td {
  padding-block: clamp(.4rem, .8vw, 1rem); vertical-align: top;
  border-block-start: 1px solid rgb(255 255 255 / .12);
}
.p-beamer__tabel strong {
  display: block; color: var(--text-on-dark);
  font-size: clamp(1rem, 1.45vw, 1.9rem); line-height: 1.15;
}
.p-beamer__uitleg {
  display: block; margin-block-start: .25em;
  color: rgb(255 255 255 / .68);
  font-size: clamp(.8rem, 1vw, 1.2rem); line-height: 1.35;
}
.p-beamer__num {
  text-align: end; font-variant-numeric: tabular-nums;
  inline-size: 7ch; white-space: nowrap;
  font-size: clamp(1rem, 1.5vw, 2rem); font-weight: var(--fw-bold);
}
.p-beamer__opm {
  color: rgb(255 255 255 / .72); inline-size: 30%;
  padding-inline-start: clamp(.5rem, 1vw, 1.5rem);
  border-inline-start: 1px solid rgb(255 255 255 / .12);
}
.p-beamer__voet {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) clamp(1rem, 2.5vw, 3rem);
  border-block-start: 1px solid rgb(255 255 255 / .12);
  color: rgb(255 255 255 / .55); font-size: var(--fs-small);
}
.p-beamer__acties { display: flex; gap: var(--space-4); align-items: center; }
.p-beamer__acties a, .p-beamer__acties button {
  color: rgb(255 255 255 / .8); background: none; border: 0;
  font: inherit; cursor: pointer; text-decoration: underline;
}

/* --- Afdrukken: A4 liggend ---------------------------------------------- */
.p-print { background: var(--c-surface); color: var(--c-ink-900); margin: 0; }
.p-print__balk {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-4); padding: var(--space-4) var(--space-5);
  background: var(--surface-section); border-block-end: 1px solid var(--border-subtle);
  font-size: var(--fs-small);
}
.p-print__balk button {
  padding: var(--space-2) var(--space-5); border-radius: var(--radius-pill);
  border: 0; background: var(--action); color: var(--text-on-dark);
  font: inherit; font-weight: var(--fw-semi); cursor: pointer;
}
.p-print__blad { padding: var(--space-6) var(--space-5); max-inline-size: 29.7cm; }
.p-print__kop {
  display: flex; align-items: flex-start; gap: var(--space-5);
  border-block-end: 2px solid var(--c-ink-900); padding-block-end: var(--space-3);
}
.p-print__kop img { block-size: 2.4cm; inline-size: auto; }
.p-print__kop h1 { margin: 0; font-size: 1.6rem; }
.p-print__kop p { margin: .2em 0 0; font-weight: var(--fw-semi); }
.p-print__meta { display: flex; gap: var(--space-5); margin: 0; margin-inline-start: auto; }
.p-print__meta dt {
  font-size: var(--fs-label); text-transform: uppercase;
  letter-spacing: var(--ls-label); color: var(--text-muted);
}
.p-print__meta dd { margin: 0; font-weight: var(--fw-bold); }
.p-print__blok { margin-block-start: var(--space-5); break-inside: avoid; }
.p-print__blok h2 {
  margin: 0 0 var(--space-2); font-size: 1.05rem;
  border-block-end: 1px solid var(--c-ink-900); padding-block-end: var(--space-1);
}
.p-print__blok h2 span {
  font-weight: var(--fw-regular); color: var(--text-muted); font-size: var(--fs-small);
}
.p-print__tabel { inline-size: 100%; border-collapse: collapse; font-size: .82rem; }
.p-print__tabel th {
  text-align: start; font-size: var(--fs-label); text-transform: uppercase;
  letter-spacing: var(--ls-label); padding-block: var(--space-1);
  border-block-end: 1px solid var(--c-ink-900);
}
.p-print__tabel th, .p-print__tabel td { padding-inline-end: var(--space-4); }
.p-print__tabel th:last-child, .p-print__tabel td:last-child { padding-inline-end: 0; }
.p-print__tabel td {
  padding-block: var(--space-2); vertical-align: top;
  border-block-end: 1px solid var(--border-subtle);
}
.p-print__uitleg { display: block; color: var(--text-muted); }
.p-print__num {
  text-align: end; inline-size: 6ch; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-weight: var(--fw-bold);
}
.p-print__vink { inline-size: 3.2cm; white-space: nowrap; }
.p-print__vink span {
  display: inline-block; inline-size: .8cm; block-size: .8cm;
  border: 1px solid var(--c-ink-500); margin-inline-end: .2cm;
}
.p-print__voet { margin-block-start: var(--space-4); font-size: var(--fs-small); }

@media print {
  /* Liggend, want de tabel met vijf kolommen past niet fatsoenlijk op staand. */
  @page { size: A4 landscape; margin: 10mm; }
  .p-print__balk { display: none; }
  .p-print__blad { padding: 0; max-inline-size: none; break-after: page; }
  .p-print__blad:last-child { break-after: auto; }
  .p-print { background: #fff; }
}

/* --- Deelnemerstabel ----------------------------------------------------- */
/* Zes kolommen in plaats van tien. De brede kolommen mogen afbreken; de smalle
   niet, zodat "dag 27" en de knoppen op één regel blijven staan. */
.p-deelnemers td { vertical-align: top; }
.p-deelnemers th:nth-child(4), .p-deelnemers td:nth-child(4) { max-inline-size: 20rem; }
.p-deelnemers th:nth-child(5), .p-deelnemers td:nth-child(5) { inline-size: 11.5rem; }

/* --- Gesprekken teruglezen (beheer) ------------------------------------- */
.p-chatlog { max-inline-size: 52rem; }
.p-chatlog .u-card { display: flex; flex-direction: column; gap: var(--space-4); }
.p-chatlog .p-bubbel__tijd { opacity: .7; white-space: nowrap; }
.p-inzage { list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); }
.p-inzage li { padding-block: var(--space-2); border-bottom: 1px solid var(--border-subtle); }
.p-inzage li:last-child { border-bottom: none; }
.p-gesprekken td { vertical-align: top; }
.p-gesprekken th:first-child, .p-gesprekken td:first-child { white-space: normal; }

/* --- Voedingstabel in beheer --------------------------------------------- */
/* Een rij is hier een formulier: negen velden naast elkaar. De invoervelden
   krijgen daarom minder binnenruimte dan elders, en de spinknoppen van
   type=number gaan eruit — die aten de helft van de breedte op, waardoor "370"
   als "37" op het scherm kwam. */
.p-voedingtabel { table-layout: fixed; inline-size: 100%; min-inline-size: 60rem; }
.p-voedingtabel th, .p-voedingtabel td { padding-inline: var(--space-2); }
.p-voedingtabel th:first-child, .p-voedingtabel td:first-child { padding-inline-start: var(--space-4); }
.p-voedingtabel td:first-child, .p-voedingtabel th:first-child { white-space: normal; }
.p-voedingtabel td { vertical-align: middle; }
.p-voedingtabel .u-input {
  padding: var(--space-2); min-block-size: calc(var(--touch-min) - var(--space-2));
  font-size: var(--fs-small);
}
.p-voedingtabel input[type="number"] { text-align: end; -moz-appearance: textfield; appearance: textfield; }
.p-voedingtabel input[type="number"]::-webkit-outer-spin-button,
.p-voedingtabel input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Kolombreedtes staan in de colgroup van de tabel zelf. */
.p-voedingtabel__bron   { inline-size: 7rem; }
.p-voedingtabel__cijfer { inline-size: 4.75rem; }
.p-voedingtabel__naam   { inline-size: 11rem; }
.p-voedingtabel__vaak   { inline-size: 3.5rem; }
.p-voedingtabel__acties { inline-size: 10rem; }
.p-voedingtabel td:last-child { white-space: nowrap; text-align: end; }

/* Regel onder de koppen die de eenheid noemt, zodat de koppen kort blijven. */
.p-voedingtabel__eenheid td {
  padding-block: 0 var(--space-2); border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-section);
  font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--text-muted); text-align: end;
}

/* --- Zakelijk: organisaties, klanten, facturen ---------------------------- */
.p-zakelijk__grid { display: grid; gap: var(--gutter); }
@media (min-width: 1024px) { .p-zakelijk__grid { grid-template-columns: 3fr 2fr; align-items: start; } }
.p-zakelijk__lijst { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.p-zakelijk__lijst li {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  align-items: baseline; justify-content: space-between;
  padding-block: var(--space-3); border-bottom: 1px solid var(--border-subtle);
}
.p-zakelijk__lijst li:last-child { border-bottom: none; }
.p-zakelijk__velden { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .p-zakelijk__velden { grid-template-columns: 1fr 1fr; } }
.p-zakelijk__velden--breed { grid-column: 1 / -1; }

/* --- Factuur afdrukken ---------------------------------------------------- */
/* A4 staand, zwart op wit. Geen achtergrondvlakken: die kosten toner en leveren
   op papier niets op. */
.p-factuur { background: var(--surface-page); color: var(--c-ink-900); }
.p-factuur__blad {
  box-sizing: border-box;
  max-inline-size: 210mm; min-block-size: 297mm;
  margin: var(--space-5) auto; padding: var(--space-8);
  background: #fff; box-shadow: var(--shadow-lift);
}
.p-factuur__kop {
  display: flex; justify-content: space-between; gap: var(--space-6);
  padding-bottom: var(--space-5); border-bottom: 2px solid var(--c-ink-900);
}
.p-factuur__kop h1 { font-size: var(--fs-h3); margin: var(--space-3) 0 var(--space-1); }
.p-factuur__adres { margin: 0; font-size: var(--fs-small); line-height: var(--lh-lead); }
.p-factuur__meta { text-align: end; }
.p-factuur__meta h2 {
  margin: 0 0 var(--space-3); font-size: var(--fs-h2);
  text-transform: uppercase; letter-spacing: var(--ls-label);
}
.p-factuur__meta dl { display: grid; gap: var(--space-1); margin: 0; font-size: var(--fs-small); }
.p-factuur__meta dl div { display: flex; gap: var(--space-4); justify-content: flex-end; }
.p-factuur__meta dt { color: var(--text-muted); }
.p-factuur__meta dd { margin: 0; font-weight: var(--fw-semi); }
.p-factuur__aan { margin-block: var(--space-6); }
.p-factuur__aan h3 {
  margin: 0 0 var(--space-2); font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--text-muted);
}
.p-factuur__aan p { margin: 0; line-height: var(--lh-lead); }
.p-factuur__regels { inline-size: 100%; border-collapse: collapse; margin-block: var(--space-6); }
.p-factuur__regels th, .p-factuur__regels td {
  padding: var(--space-2) var(--space-3); text-align: start;
  border-bottom: 1px solid var(--border-subtle); vertical-align: top;
}
.p-factuur__regels thead th {
  border-bottom: 1px solid var(--c-ink-900);
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label);
}
.p-factuur__regels tfoot td { border-bottom: none; padding-block: var(--space-1); }
.p-factuur__regels .u-table__num { text-align: end; white-space: nowrap; }
.p-factuur__regels col.p-factuur__bedrag { inline-size: 6.5rem; }
.p-factuur__totaal td {
  border-top: 2px solid var(--c-ink-900); font-weight: var(--fw-bold);
  font-size: var(--fs-lead); padding-top: var(--space-3);
}
.p-factuur__notitie { font-size: var(--fs-small); font-style: italic; }
.p-factuur__voet {
  margin-top: var(--space-8); padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle); font-size: var(--fs-small);
}
.p-factuur__voet dl {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-3) 0 0;
}
.p-factuur__voet dl div { display: flex; gap: var(--space-2); }
.p-factuur__voet dt { color: var(--text-muted); }
.p-factuur__voet dd { margin: 0; }

@media print {
  @page { size: A4 portrait; margin: 12mm; }
  .p-factuur { background: #fff; }
  .p-factuur .p-print__balk { display: none; }
  .p-factuur__blad {
    margin: 0; padding: 0; box-shadow: none; min-block-size: 0; max-inline-size: none;
  }
}