/* ==========================================================================
   Introspel.nl — Componenten
   Vereist: tokens.css (en optioneel fonts.css).
   Structuur: base → layout → icon → button → badge/chip → form → card →
   banner → progress → skeleton → empty state → stepper → table → stat →
   task card (student) → gps status → submission → leaderboard → header/footer
   ========================================================================== */

/* ----- Base ----- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }

/* ----- Layout ----- */
.container { max-width: 1120px; margin-inline: auto; padding-inline: var(--space-6); }
.container--narrow { max-width: 760px; }

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--sm { gap: var(--space-2); }
.stack--lg { gap: var(--space-6); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.row--wrap { flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }

/* ----- Typografie ----- */
.display { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5vw, 54px); line-height: 1.08; margin: 0; text-wrap: balance; }
.h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 4vw, 42px); line-height: 1.15; margin: 0; }
.h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3vw, 34px); line-height: 1.2; margin: 0; }
.h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.3; margin: 0; }
.h4 { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.3; margin: 0; }
.lead { font-size: 18.5px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; }
.body-text { font-size: 15px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; }
.muted { color: var(--color-ink-muted); }
.small { font-size: 13.5px; }
.accent { color: var(--color-primary); }

/* ----- Iconen (mask-techniek: kleurt mee met currentColor) -----
   Gebruik: <span class="icon icon--pin" aria-hidden="true"></span> */
.icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  vertical-align: -0.2em;
}
.icon--lg { width: 1.5em; height: 1.5em; }
.icon--pin      { --icon: url('../icons/pin.svg'); }
.icon--qr       { --icon: url('../icons/qr.svg'); }
.icon--camera   { --icon: url('../icons/camera.svg'); }
.icon--trophy   { --icon: url('../icons/trophy.svg'); }
.icon--check    { --icon: url('../icons/check.svg'); }
.icon--x        { --icon: url('../icons/x.svg'); }
.icon--warning  { --icon: url('../icons/warning.svg'); }
.icon--gps      { --icon: url('../icons/gps.svg'); }
.icon--hint     { --icon: url('../icons/hint.svg'); }
.icon--clock    { --icon: url('../icons/clock.svg'); }
.icon--users    { --icon: url('../icons/users.svg'); }
.icon--play     { --icon: url('../icons/play.svg'); }
.icon--pause    { --icon: url('../icons/pause.svg'); }
.icon--arrow    { --icon: url('../icons/arrow-right.svg'); }
.icon--lock     { --icon: url('../icons/lock.svg'); }
.icon--star     { --icon: url('../icons/star.svg'); }

/* ----- Knoppen ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 15.5px;
  line-height: 1;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:active { transform: scale(0.98); }

.btn--primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-primary); }
.btn--primary:hover { background: var(--color-primary-hover); color: #fff; }

.btn--secondary { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-border-strong); }
.btn--secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }

.btn--ghost { background: transparent; color: var(--color-primary); }
.btn--ghost:hover { background: var(--color-primary-soft); }

.btn--danger { background: var(--color-danger); color: #fff; }
.btn--danger:hover { background: var(--color-danger-hover); color: #fff; }

.btn--success { background: var(--color-success); color: #fff; }
.btn--success:hover { background: var(--color-success-ink); color: #fff; }

.btn--cyber { background: var(--color-cyber); color: var(--color-cyber-ink); }
.btn--cyber:hover { background: #4bd6a0; color: var(--color-cyber-ink); }

.btn--on-dark { background: transparent; color: var(--color-on-dark-muted); border-color: rgba(255, 255, 255, 0.18); }
.btn--on-dark:hover { border-color: rgba(255, 255, 255, 0.4); color: var(--color-on-dark); }

.btn--sm { font-size: 13.5px; padding: 10px 18px; }
.btn--lg { font-size: 17px; padding: 16px 30px; }
.btn--block { display: flex; width: 100%; }
.btn--icon { width: 38px; height: 38px; padding: 0; border-radius: var(--radius-sm); }

.btn:disabled, .btn.is-disabled {
  background: var(--color-divider);
  color: var(--color-ink-faint);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* Loading-state: <button class="btn btn--primary is-loading"> */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
.btn--secondary.is-loading::after, .btn--ghost.is-loading::after { border-color: var(--color-primary-soft); border-top-color: var(--color-primary); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ----- Badges & chips ----- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 12.5px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.badge--primary { background: var(--color-primary-soft); color: var(--color-primary); }
.badge--success { background: var(--color-success-soft); color: var(--color-success-ink); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning-ink); }
.badge--danger  { background: var(--color-danger-soft); color: var(--color-danger); }
.badge--neutral { background: var(--color-divider); color: var(--color-ink-soft); }
.badge--dark    { background: var(--color-dark); color: var(--color-cyber); }

/* Live-stip: <span class="badge badge--success"><span class="dot"></span>Actief</span> */
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dot--pulse { animation: pulse-dot 1.6s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0.4; } }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 800;
  font-size: 15px;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

/* ----- Formulieren ----- */
.field { display: flex; flex-direction: column; gap: 7px; }
.label { font-weight: 800; font-size: 13.5px; color: var(--color-ink-soft); }

.input, .select, .textarea {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-ink);
  padding: 13px 16px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); background: var(--color-surface); }
.input::placeholder { color: var(--color-ink-faint); font-weight: 600; }
.input:disabled { background: var(--color-divider); color: var(--color-ink-faint); cursor: not-allowed; }
.input.is-error { border-color: var(--color-danger); background: var(--color-surface); }
.field__error { font-size: 13px; font-weight: 700; color: var(--color-danger); display: flex; align-items: center; gap: 6px; }
.field__help { font-size: 13px; font-weight: 600; color: var(--color-ink-muted); }

/* Grote PIN-invoer (student join) */
.input--pin {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: 0.35em;
  text-align: center;
  padding: 16px;
}

/* ----- Kaarten ----- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card--xl { border-radius: var(--radius-xl); padding: var(--space-7); }
.card--flat { background: var(--color-surface-alt); border-color: var(--color-divider); }
.card--hover { transition: box-shadow 0.18s, transform 0.18s; }
.card--hover:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.card--dark { background: var(--color-dark); border: none; color: var(--color-on-dark); }

/* Selecteerbare kaart (wizard: template, teamgrootte) */
.card--selectable { cursor: pointer; border: 2px solid var(--color-divider); background: var(--color-surface-alt); transition: border-color 0.15s, background 0.15s; }
.card--selectable:hover { border-color: var(--color-primary); }
.card--selectable.is-selected { border-color: var(--color-primary); background: var(--color-primary-soft-2); }

/* ----- Banners / meldingen ----- */
.banner {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: 13px 17px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
}
.banner .icon { margin-top: 1px; }
.banner--info    { background: var(--color-primary-soft); color: var(--color-primary); }
.banner--success { background: var(--color-success-soft); color: var(--color-success-ink); }
.banner--warning { background: var(--color-warning-soft); color: #7a5a10; }
.banner--danger  { background: var(--color-danger-soft); color: var(--color-danger); }

/* ----- Voortgang ----- */
.progress { height: 8px; background: var(--color-border); border-radius: var(--radius-pill); overflow: hidden; }
.progress__bar { height: 100%; background: linear-gradient(90deg, var(--color-primary), #6d5ce8); border-radius: var(--radius-pill); transition: width 0.4s ease; }
.progress--thin { height: 7px; }
.progress--thin .progress__bar { background: var(--color-primary); }

/* ----- Skeleton (loading) ----- */
.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-divider) 25%, #f7f4ea 50%, var(--color-divider) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.skeleton--text { height: 14px; width: 100%; }
.skeleton--title { height: 22px; width: 60%; }
.skeleton--avatar { width: 40px; height: 40px; border-radius: var(--radius-sm); }
.skeleton--btn { height: 44px; border-radius: var(--radius-pill); }

/* ----- Empty state ----- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-7) var(--space-5);
  color: var(--color-ink-muted);
}
.empty-state__icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--color-divider);
  display: grid;
  place-items: center;
  color: var(--color-ink-faint);
  font-size: 22px;
}
.empty-state__title { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; color: var(--color-ink-soft); }
.empty-state__text { font-size: 13.5px; font-weight: 600; max-width: 36ch; }

/* ----- Stepper (wizard) ----- */
.stepper { display: flex; align-items: flex-start; }
.stepper__step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.stepper__dot {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 800; font-size: 15px;
  background: var(--color-surface);
  color: var(--color-ink-faint);
  border: 2px solid var(--color-border-strong);
}
.stepper__label { font-size: 11px; font-weight: 800; color: var(--color-ink-faint); white-space: nowrap; }
.stepper__line { flex: 1; height: 3px; border-radius: var(--radius-pill); background: var(--color-border); margin: 16px 8px 0; }
.stepper__step.is-active .stepper__dot { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.stepper__step.is-active .stepper__label { color: var(--color-primary); }
.stepper__step.is-done .stepper__dot { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.stepper__step.is-done .stepper__label { color: var(--color-success-ink); }
.stepper__line.is-done { background: var(--color-success); }

/* ----- Data-tabel (dashboard, CSS grid) -----
   Kolommen per tabel instellen met --cols op .table. */
.table { --cols: 1fr; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.table__head, .table__row { display: grid; grid-template-columns: var(--cols); gap: var(--space-3); align-items: center; padding: 12px var(--space-5); }
.table__head { font-size: 11.5px; font-weight: 800; color: var(--color-ink-faint); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--color-divider); padding-block: 10px; }
.table__row { border-bottom: 1px solid #f5f2e9; }
.table__row:last-child { border-bottom: none; }
.table__title-row { padding: var(--space-4) var(--space-5); display: flex; align-items: baseline; gap: var(--space-3); border-bottom: 1px solid var(--color-divider); }

/* ----- Stat-kaart (dashboard) ----- */
.stat { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.stat__label { font-size: 12px; font-weight: 800; color: var(--color-ink-muted); }
.stat__value { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; }
.stat__meta { font-size: 12px; font-weight: 700; color: var(--color-ink-muted); }
.stat--attention { border: 1.5px solid var(--color-warning) !important; }
.stat--attention .stat__label, .stat--attention .stat__value, .stat--attention .stat__meta { color: var(--color-warning-ink); }

/* ----- Opdrachtkaart (student, donker cyber-vlak) -----
   States: (default = unlocked) .is-locked | .is-submitted | .is-graded */
.task-card {
  background: var(--color-dark-2);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  color: var(--color-on-dark);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: 0 14px 34px rgba(20, 20, 31, 0.35);
}
.task-card__kicker { display: flex; align-items: center; gap: var(--space-2); color: var(--color-cyber); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; }
.task-card__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin: 0; line-height: 1.25; }
.task-card__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--color-on-dark-muted); }
.task-card__points { background: rgba(246, 183, 60, 0.15); color: var(--color-warning); font-weight: 800; font-size: 12.5px; padding: 4px 11px; border-radius: var(--radius-pill); }

.task-card.is-locked { opacity: 0.92; }
.task-card.is-locked .task-card__kicker { color: var(--color-on-dark-muted); }
.task-card.is-submitted .task-card__kicker { color: var(--color-warning); }
.task-card.is-graded .task-card__kicker { color: var(--color-cyber); }

/* ----- GPS-status (student) -----
   Varianten: --ok | --denied | --inaccurate | --out-of-range */
.gps-status {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
}
.gps-status__title { display: block; font-weight: 800; }
.gps-status--ok           { background: var(--color-success-soft); color: var(--color-success-ink); }
.gps-status--denied       { background: var(--color-danger-soft); color: var(--color-danger); }
.gps-status--inaccurate   { background: var(--color-warning-soft); color: var(--color-warning-ink); }
.gps-status--out-of-range { background: var(--color-primary-soft); color: var(--color-primary); }

/* ----- Foto-inzending (dashboard-review) -----
   States: (default = pending) .is-approved | .is-rejected */
.submission {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.submission__thumb {
  width: 56px; height: 56px; flex: none;
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(45deg, #e4e1d6, #e4e1d6 6px, #eceadf 6px, #eceadf 12px);
  display: grid; place-items: center;
  color: var(--color-ink-faint);
  overflow: hidden;
}
.submission__thumb img { width: 100%; height: 100%; object-fit: cover; }
.submission__team { font-weight: 800; font-size: 13.5px; }
.submission__task { font-size: 12px; font-weight: 700; color: var(--color-ink-muted); }
.submission.is-approved { border-color: var(--color-success); background: var(--color-success-soft); }
.submission.is-rejected { border-color: var(--color-danger-soft); opacity: 0.6; }

.review-btn { width: 34px; height: 34px; border-radius: var(--radius-sm); border: none; display: grid; place-items: center; font-weight: 800; font-size: 15px; cursor: pointer; }
.review-btn--approve { background: var(--color-success-soft); color: var(--color-success-ink); }
.review-btn--approve:hover { background: #cdeadd; }
.review-btn--reject { background: var(--color-danger-soft); color: var(--color-danger); }
.review-btn--reject:hover { background: #fbd6cf; }

/* ----- Leaderboard ----- */
.leaderboard-row { display: flex; align-items: center; gap: var(--space-3); padding: 8px 10px; border-radius: var(--radius-sm); }
.leaderboard-row.is-you { background: var(--color-primary-soft); }
.leaderboard-row__rank { width: 24px; font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--color-ink-muted); text-align: center; }
.leaderboard-row.is-you .leaderboard-row__rank { color: var(--color-primary); }
.leaderboard-row__name { font-weight: 800; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-row__pts { font-weight: 800; font-size: 13.5px; color: var(--color-warning-ink); }

/* ----- Noodcode (alleen docent-schermen!) ----- */
.code-pill {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.1em;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  border: 1.5px dashed #c9c6ba;
}

/* ----- Site-header & footer (publieke pagina's) ----- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 245, 240, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner { display: flex; align-items: center; gap: var(--space-6); padding-block: 14px; }
.site-nav { display: flex; gap: 22px; margin-left: auto; align-items: center; font-weight: 700; font-size: 14.5px; }
.site-nav a { color: #494a5e; }
.site-nav a:hover, .site-nav a.is-active { color: var(--color-primary); }
.site-nav a.btn--primary, .site-nav a.btn--primary:hover { color: #fff; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-ink); }
.brand:hover { color: var(--color-ink); }
.brand__mark { width: 34px; height: 34px; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.brand--sm .brand__mark { width: 30px; height: 30px; }
.brand--sm .brand__name { font-size: 17px; }

.site-footer { border-top: 1px solid var(--color-border); }
.site-footer__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); flex-wrap: wrap; padding-block: var(--space-7); }

/* App-topbar (docent: dashboard, wizard) */
.app-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  position: sticky; top: 0; z-index: 40;
}
.app-header__sep { color: #c9c6ba; }
.app-header__title { font-weight: 800; font-size: 14.5px; }

/* ----- Student-app (mobiel, /join en /play) ----- */
.phone-page { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; }
.phone {
  width: 100%;
  max-width: 430px;   /* basisontwerp 390px, rekt mee tot 430px */
  min-height: 100dvh;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
}

/* ----- Responsive helpers ----- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .site-nav { gap: 14px; }
}


/* ==========================================================================
   v3.1 — live-kaart, fotomodal, opdrachtvarianten, avatars, resume-code
   ========================================================================== */

/* Nieuwe iconen */
.icon--spy      { --icon: url('../icons/spy.svg'); }
.icon--landmark { --icon: url('../icons/landmark.svg'); }
.icon--briefcase{ --icon: url('../icons/briefcase.svg'); }
.icon--leaf     { --icon: url('../icons/leaf.svg'); }
.icon--heart    { --icon: url('../icons/heart.svg'); }
.icon--book     { --icon: url('../icons/book.svg'); }
.icon--flask    { --icon: url('../icons/flask.svg'); }
.icon--scales   { --icon: url('../icons/scales.svg'); }
.icon--flag     { --icon: url('../icons/flag.svg'); }
.icon--plus     { --icon: url('../icons/plus.svg'); }
.icon--minus    { --icon: url('../icons/minus.svg'); }
.icon--sync     { --icon: url('../icons/sync.svg'); }
.icon--shield   { --icon: url('../icons/shield.svg'); }
.icon--key      { --icon: url('../icons/key.svg'); }
.icon--edit     { --icon: url('../icons/edit.svg'); }

/* Team-avatar: initiaal i.p.v. emoji */
.avatar { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--color-dark); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 16px; flex: none; }
.avatar--sm { width: 30px; height: 30px; font-size: 13px; }

/* Thema-icoonvlak (wizard/homepage) */
.theme-icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; flex: none; }
.theme-icon .icon { width: 22px; height: 22px; }

/* ----- Live-kaart (docent-dashboard) -----
   Markers absoluut gepositioneerd in %; in productie vervangen door kaartlib.
   States: default | .map-marker--stale | .member-dot--stale | .member-dot--inaccurate */
.map-panel { position: relative; overflow: hidden; background: #f2f5ef; }
.map-panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map-zoom { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 3; }
.map-zoom__btn { width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-sm); color: var(--color-ink-soft); }
.map-zoom__btn:hover { color: var(--color-primary); border-color: var(--color-primary); }

.map-marker { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 0; z-index: 2; }
.map-marker__pill { display: flex; align-items: center; gap: 6px; background: var(--color-primary); color: #fff; font-weight: 800; font-size: 12px; padding: 4px 10px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); white-space: nowrap; }
.map-marker__stem { width: 2.5px; height: 9px; background: var(--color-primary); }
.map-marker__meta { font-size: 10px; font-weight: 800; color: var(--color-ink-muted); background: rgba(255,255,255,.92); padding: 1px 7px; border-radius: var(--radius-pill); margin-top: 2px; }
.map-marker--stale .map-marker__pill, .map-marker--stale .map-marker__stem { background: #8b8c9d; }

.member-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary); border: 2px solid #fff; box-shadow: var(--shadow-sm); transform: translate(-50%, -50%); z-index: 1; }
.member-dot--stale { background: #8b8c9d; }
.member-dot--inaccurate::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 2.5px solid var(--color-warning); animation: pulse-ring 1.6s ease-out infinite; }
@keyframes pulse-ring { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }

/* ----- Modal / foto-lightbox ----- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(29,29,43,.55); display: grid; place-items: center; padding: var(--space-6); z-index: 100; }
.modal-backdrop[hidden] { display: none; }
.modal { background: var(--color-surface); border-radius: var(--radius-xl); max-width: 640px; width: 100%; box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; }
.modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.modal__photo { aspect-ratio: 4 / 3; background: repeating-linear-gradient(45deg, #e4e1d6, #e4e1d6 10px, #eceadf 10px, #eceadf 20px); display: grid; place-items: center; color: var(--color-ink-faint); }
.modal__photo img { width: 100%; height: 100%; object-fit: contain; }
.modal__footer { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-divider); }

/* ----- Quiz-opties (student, op donker vlak) -----
   States: default | .is-selected | .is-wrong | .is-correct | :disabled */
.quiz-option { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.14); color: var(--color-on-dark); font-family: var(--font-body); font-weight: 700; font-size: 14.5px; padding: 13px 16px; border-radius: var(--radius-md); cursor: pointer; }
.quiz-option:hover { border-color: rgba(255,255,255,.4); }
.quiz-option.is-selected { border-color: var(--color-cyber); background: rgba(94,230,176,.1); }
.quiz-option.is-correct { border-color: var(--color-cyber); background: rgba(94,230,176,.16); color: var(--color-cyber); }
.quiz-option.is-wrong { border-color: #ff8f7d; background: rgba(255,110,90,.12); color: #ffb3a6; }
.quiz-option:disabled { opacity: .5; cursor: not-allowed; }
.quiz-option__key { width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.1); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 13px; flex: none; }

/* Invoer op donker vlak (tekst-/rekenantwoord) */
.input--on-dark { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: var(--color-on-dark); }
.input--on-dark::placeholder { color: rgba(255,255,255,.35); }
.input--on-dark:focus { border-color: var(--color-cyber); box-shadow: 0 0 0 3px rgba(94,230,176,.25); background: rgba(255,255,255,.1); }
.input--on-dark.is-error { border-color: #ff8f7d; }
.task-error { color: #ffb3a6; font-size: 13px; font-weight: 700; display: flex; gap: 6px; align-items: center; }
.task-privacy { margin: 0; font-size: 12px; font-weight: 600; color: var(--color-on-dark-muted); display: flex; gap: 6px; align-items: flex-start; line-height: 1.5; }

/* Voortgang op donker (sync-/firewall-opdracht) */
.progress--dark { background: rgba(255,255,255,.14); }
.progress--dark .progress__bar { background: var(--color-cyber); }

/* Finale-opdracht */
.task-card--finale { background: linear-gradient(160deg, #14141f, #2a2138); border: 1px solid rgba(246,183,60,.45); }
.task-card--finale .task-card__kicker { color: var(--color-warning); }

/* Resume-code */
.resume-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--color-surface); border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-pill); padding: 7px 15px; font-weight: 800; font-size: 12.5px; color: var(--color-ink-soft); }
.resume-chip code { font-family: var(--font-display); font-weight: 800; letter-spacing: .08em; color: var(--color-ink); font-size: 13.5px; }