/* ==========================================================================
   Study Hub — beloningslaag (versie 6)

   Het embleem, de gouden bonusklok, de meter ernaartoe, XP die naar de
   teller vliegt, de vieringkaart, en de planning boven een deel.

   De gedachte erachter staat in docs/onderzoek-beloningssysteem.md. Kort:
   de verrassing zit in de verpakking en nooit in de uitbetaling, elke
   beloning zegt iets over wat je kunt, en er staat altijd bij hoe dichtbij
   het volgende doel is — want daar versnelt een mens op.
   ========================================================================== */

/* --- de bovenbalk ----------------------------------------------------------
   Ruimer opgezet: de balk is hoger, alles erin is groter, en er zit lucht
   boven en onder de tellers zodat de gouden klok zijn gloed kwijt kan. */

.topbar-inner { height: 84px; gap: var(--sp-5); }

@media (max-width: 900px) { .topbar-inner { height: 70px; gap: var(--sp-3); } }

/* --- het embleem: schild met brein ---------------------------------------- */

.xp-emblem { display: block; width: 28px; height: 28px; }
.xp-emblem.sm { width: 18px; height: 18px; }
.xp-emblem.md { width: 38px; height: 38px; }
.xp-emblem.lg { width: 58px; height: 58px; }
.xp-emblem .xpe-body { filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--action) 45%, transparent)); }

/* --- niveaubadge in de bovenbalk ------------------------------------------- */

.xh-badge {
  position: relative; display: grid; place-items: center;
  width: 58px; height: 58px; flex: none;
}
.xh-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--action) calc(var(--p, 0) * 1%),
              color-mix(in srgb, var(--line) 65%, transparent) 0);
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 62%);
          mask: radial-gradient(circle, transparent 61%, #000 62%);
  transition: background var(--dur-slow) var(--ease-out);
}
.xh-badge .xp-emblem { position: relative; z-index: 1; }
.xh-lvl {
  position: absolute; z-index: 2; bottom: 0; right: -3px;
  min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--action-ink); background: var(--action);
  border: 2px solid var(--surface);
}
.xh-badge.heat-mid .xh-ring { filter: saturate(1.2); }
.xh-badge.heat-high .xh-ring { box-shadow: 0 0 0 1px color-mix(in srgb, var(--action) 45%, transparent); }
.xh-badge.is-hit { animation: badge-hit 620ms var(--ease-spring); }
@keyframes badge-hit {
  0%   { transform: scale(1); }
  35%  { transform: scale(calc(1 + .16 * var(--motion-scale))); }
  100% { transform: scale(1); }
}

.xh-next.heat-mid  { color: var(--text-dim); }
.xh-next.heat-high { color: var(--action); font-weight: 600; }

/* --- de gouden bonusklok ---------------------------------------------------- */

.boost-chip:not([hidden]) {
  display: inline-flex; align-items: center; padding: 4px 14px 4px 4px;
  border-radius: 999px;
  border: 1px solid rgba(245, 196, 81, .55);
  background: linear-gradient(120deg, rgba(245, 196, 81, .18), rgba(245, 196, 81, .04));
  box-shadow: 0 0 0 1px rgba(245, 196, 81, .12), 0 10px 26px -14px rgba(245, 196, 81, .8);
  animation: boost-glow 2.4s var(--ease-in-out) infinite;
}
@keyframes boost-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(245,196,81,.12), 0 10px 26px -14px rgba(245,196,81,.8); }
  50%      { box-shadow: 0 0 0 1px rgba(245,196,81,.28), 0 12px 34px -12px rgba(245,196,81,1); }
}
.boost-clock { display: inline-flex; align-items: center; gap: 12px; }
.bc-face {
  width: 56px; height: 56px; flex: none;
  filter: drop-shadow(0 4px 16px rgba(255, 214, 110, .75));
  animation: bc-tilt 5s var(--ease-in-out) infinite;
}
@keyframes bc-tilt {
  0%, 100% { transform: rotate(calc(-2deg * var(--motion-scale))); }
  50%      { transform: rotate(calc(2deg * var(--motion-scale))); }
}
.bc-hand { transition: transform 1s linear; }
.bc-run  { transition: stroke-dashoffset 1s linear; }
.bc-text { display: grid; line-height: 1.15; }
.bc-text b { color: #ffdd7a; font-size: var(--step-1); letter-spacing: -.01em; }
.bc-text .mono { font-family: var(--font-mono); font-size: var(--step-0); color: var(--text-dim); }

/* --- de meter naar de bonusfase --------------------------------------------
   Goal-gradient: hoe dichter bij, hoe nadrukkelijker. Vanaf ongeveer 87%
   pulseert hij zachtjes — dat is één stap voor het doel. */

.boost-meter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 5px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
}
.bm-ring {
  position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: conic-gradient(#f5c451 calc(var(--p, 0) * 1%),
              color-mix(in srgb, var(--line) 70%, transparent) 0);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%);
          mask: radial-gradient(circle, transparent 56%, #000 57%);
}
.bm-body { display: inline-flex; align-items: baseline; gap: 5px; }
.bm-body b { font-family: var(--font-mono); font-size: var(--step-0); color: var(--text); }
.bm-body span { font-size: 11px; color: var(--muted); }
.boost-meter.close { border-color: color-mix(in srgb, var(--action) 45%, var(--line)); }
.boost-meter.close .bm-body b { color: var(--action); }
.boost-meter.edge {
  border-color: #f5c451;
  box-shadow: 0 0 0 1px rgba(245, 196, 81, .35), 0 8px 22px -12px rgba(245, 196, 81, .7);
  animation: bm-pulse 1.6s var(--ease-in-out) infinite;
}
@keyframes bm-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(calc(1 + .03 * var(--motion-scale))); }
}

.hud-chip.boost-on {
  border-color: #f5c451; background: rgba(245, 196, 81, .12);
}
.hud-chip.boost-on b, .hud-chip.boost-on .ico { color: #f5c451; }

/* --- XP die naar de teller vliegt -------------------------------------------- */

.xp-orb {
  position: fixed; z-index: 90; width: 11px; height: 11px; margin: -5px 0 0 -5px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff6db, var(--action) 55%, color-mix(in srgb, var(--action) 60%, #000));
  box-shadow: 0 0 12px color-mix(in srgb, var(--action) 70%, transparent);
}

/* --- de vieringkaart ---------------------------------------------------------
   Eén kaart, vijf zwaartes. Klikken sluit hem; anders gaat hij vanzelf weg. */

.celebrate {
  position: fixed; z-index: 95; left: 50%; bottom: 8vh; transform: translateX(-50%);
  max-width: min(460px, 92vw); cursor: pointer;
  animation: cel-in var(--dur-slow) var(--ease-spring);
}
.celebrate.leaving { animation: cel-out var(--dur-base) var(--ease-out) forwards; }
@keyframes cel-in {
  from { opacity: 0; transform: translateX(-50%) translateY(calc(26px * var(--motion-scale))) scale(.96); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes cel-out {
  to { opacity: 0; transform: translateX(-50%) translateY(calc(-14px * var(--motion-scale))) scale(.98); }
}

.cel-card {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-xl);
  border: 1px solid color-mix(in srgb, var(--action) 40%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--action) 16%, var(--surface)),
                    color-mix(in srgb, var(--memory) 10%, var(--surface)));
  box-shadow: var(--shadow-3), 0 0 0 1px var(--glass-edge) inset;
  backdrop-filter: blur(10px);
}
/* de glans die er één keer overheen loopt */
.cel-shine {
  position: absolute; inset: -40% -60%; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.30) 50%, transparent 62%);
  transform: translateX(-70%);
  animation: cel-shine 1500ms var(--ease-out) 220ms;
}
@keyframes cel-shine { to { transform: translateX(70%); } }

.cel-ico { flex: none; display: grid; place-items: center; }
.cel-ico .ico { width: 30px; height: 30px; color: var(--action); }
.cel-body { display: grid; gap: 3px; }
.cel-body b { font-size: var(--step-2); line-height: 1.2; }
.cel-line { color: var(--text-dim); }
.cel-meta { color: var(--muted); font-size: var(--step--1); }
.cel-quote {
  margin: var(--sp-3) 0 0; padding-left: var(--sp-3);
  border-left: 2px solid color-mix(in srgb, var(--action) 55%, transparent);
  font-size: var(--step--1); color: var(--text-dim); font-style: italic;
}
.cel-quote cite { display: block; margin-top: 3px; color: var(--muted); font-style: normal; font-size: 11px; }

.celebrate.kind-level .cel-card { border-color: var(--action); }
.celebrate.kind-goal .cel-ico .ico { color: var(--ok); }
.celebrate.kind-combo .cel-card { padding: var(--sp-3) var(--sp-4); }
.celebrate.kind-combo .cel-body b { font-size: var(--step-1); }
.celebrate.kind-boost .cel-card {
  border-color: #f5c451;
  background: linear-gradient(135deg, rgba(245,196,81,.22), color-mix(in srgb, var(--surface) 92%, #000));
}
.celebrate.rar-goud .cel-card { border-color: var(--r-goud); }
.celebrate.rar-zilver .cel-card { border-color: var(--r-zilver); }
.celebrate.rar-brons .cel-card { border-color: var(--r-brons); }
.celebrate.rar-iridescent .cel-card {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--surface) 88%, transparent)) padding-box,
    var(--iridescent) border-box;
  border: 1.5px solid transparent;
}

/* --- planning boven een deel -------------------------------------------------
   Laatst gestudeerd, wanneer je terugkomt, en wat er nog ligt. */

.plan-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
  margin: var(--sp-5) 0;
}
.ps-block {
  display: grid; align-content: start; gap: 4px;
  padding: var(--sp-4); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
}
.ps-head {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--muted); font-size: var(--step--1);
}
.ps-head .ico { width: 15px; height: 15px; }
.ps-big { font-size: var(--step-1); line-height: 1.25; }
.ps-sub { color: var(--text-dim); font-size: var(--step--1); }
.ps-note {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  color: var(--muted); font-size: 11px;
}
.ps-note .ico { width: 13px; height: 13px; }

.ps-list { list-style: none; margin: var(--sp-2) 0 0; padding: var(--sp-2) 0 0;
           border-top: 1px solid var(--line-soft); display: grid; gap: 4px; }
.ps-list li { display: flex; gap: var(--sp-2); font-size: 11px; color: var(--muted); }
.ps-list li span:last-child { margin-left: auto; color: var(--text-dim); font-family: var(--font-mono); }

.ps-block.next.ready { border-color: color-mix(in srgb, var(--action) 45%, var(--line));
                       background: linear-gradient(160deg, var(--action-tint), var(--surface) 60%); }
.ps-block.next.ready .ps-big { color: var(--action); }
.ps-block.next.resting { border-color: color-mix(in srgb, var(--select) 30%, var(--line)); }

.ps-bar {
  position: relative; display: block; height: 6px; margin-top: 6px;
  border-radius: 999px; background: color-mix(in srgb, var(--line) 70%, transparent);
  overflow: hidden;
}
.ps-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.ps-bar .seen { background: color-mix(in srgb, var(--select) 55%, transparent); }
.ps-bar .done { background: var(--ok); }

/* --- wat er na een ronde gebeurt ---------------------------------------------- */

.next-step {
  display: grid; gap: 3px; justify-items: center; text-align: center;
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--surface-2);
  max-width: 52ch;
}
.next-step.resting { border-color: color-mix(in srgb, var(--select) 32%, var(--line)); }
.next-step.ready { border-color: color-mix(in srgb, var(--action) 45%, var(--line));
                   background: linear-gradient(160deg, var(--action-tint), var(--surface-2) 60%); }
.ns-head { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: var(--step--1); }
.ns-head .ico { width: 15px; height: 15px; }
.next-step b { font-size: var(--step-1); }
.next-step > span:not(.ns-head) { color: var(--text-dim); font-size: var(--step--1); }
.ns-why { color: var(--muted) !important; font-size: 11px !important; max-width: 44ch; }

/* --- foutenpakket ------------------------------------------------------------- */

.mode-n { font-family: var(--font-mono); color: var(--text); font-weight: 600; }
.mode.has-work { border-color: color-mix(in srgb, var(--no) 45%, var(--line)); }
.mode.has-work .mode-n { color: var(--no); }
.mode.has-work b .ico { color: var(--no); }

.rm-pill.wrong { border-color: color-mix(in srgb, var(--no) 40%, var(--line)); color: var(--no); }
.due-flag.wrong { color: var(--no);
                  border-color: color-mix(in srgb, var(--no) 35%, transparent);
                  background: var(--no-tint); }

/* --- responsief ---------------------------------------------------------------- */

@media (max-width: 900px) {
  .plan-strip { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .celebrate { bottom: 4vh; }
  .cel-card { padding: var(--sp-3) var(--sp-4); }
  .bc-text { display: none; }
}

/* ==========================================================================
   Kaarten — vrij ophalen

   De voorkant is rustig: alleen de vraag en wat je moet doen. Pas na het
   omdraaien komt het antwoord, en dan pas beoordeel je jezelf. Die volgorde
   is het hele punt: eerst zelf ophalen, dan pas terugkoppeling.
   ========================================================================== */

.flashcard { display: grid; gap: var(--sp-4); }

.fc-face {
  padding: var(--sp-5); border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--surface-2);
}
.fc-front .prompt { margin: 0; }
.fc-do {
  display: flex; align-items: center; gap: 8px;
  margin: var(--sp-4) 0 0; color: var(--muted); font-size: var(--step--1);
}
.fc-do .ico { width: 15px; height: 15px; }

.fc-back {
  border-color: color-mix(in srgb, var(--ok) 40%, var(--line));
  background: linear-gradient(160deg, var(--ok-tint), var(--surface-2) 55%);
  animation: fc-flip var(--dur-slow) var(--ease-out);
}
@keyframes fc-flip {
  from { opacity: 0; transform: translateY(calc(10px * var(--motion-scale))) rotateX(calc(-6deg * var(--motion-scale))); }
  to   { opacity: 1; transform: none; }
}
.fc-label {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ok); font-size: var(--step--1); font-weight: 600;
  margin-bottom: var(--sp-3);
}
.fc-why {
  margin: var(--sp-4) 0 0; padding-top: var(--sp-3);
  border-top: 1px dashed var(--line); color: var(--text-dim); font-size: var(--step-0);
}

.card-answer-main { margin: 0; font-size: var(--step-2); font-weight: 600; line-height: 1.35; }
.card-answer-alt { margin: 6px 0 0; color: var(--muted); font-size: var(--step--1); }

.card-answer-list { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.card-answer-list li { color: var(--text-dim); }
.card-answer-list li b { display: block; color: var(--text); }

.card-answer-pairs { margin: 0; display: grid; gap: 6px; }
.card-answer-pairs > div {
  display: flex; gap: var(--sp-3); align-items: baseline;
  padding-bottom: 6px; border-bottom: 1px solid var(--line-soft);
}
.card-answer-pairs dt { margin: 0; font-weight: 600; min-width: 34%; }
.card-answer-pairs dd { margin: 0; color: var(--text-dim); }

.card-answer-bucket { display: grid; gap: 2px; margin-bottom: var(--sp-3); }
.card-answer-bucket b { color: var(--text); }
.card-answer-bucket span { color: var(--text-dim); font-size: var(--step--1); }

/* --- zelfbeoordeling ---------------------------------------------------- */

.grade-row { display: flex; gap: 8px; flex-wrap: wrap; }
.grade-btn {
  position: relative; display: grid; gap: 1px; text-align: left;
  padding: 9px 14px; min-width: 128px; cursor: pointer;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text);
  transition: border-color var(--dur-quick) var(--ease-out),
              transform var(--dur-quick) var(--ease-out);
}
.grade-btn:hover { transform: translateY(-1px); }
.grade-btn b { font-size: var(--step-0); }
.grade-btn span:not(.kbd) { color: var(--muted); font-size: 11px; }
.grade-btn .kbd { position: absolute; top: 8px; right: 8px; }
.grade-btn.tone-no:hover   { border-color: var(--no); }
.grade-btn.tone-warn:hover { border-color: var(--warn); }
.grade-btn.tone-ok:hover   { border-color: var(--ok); }
.grade-btn.tone-easy:hover { border-color: var(--select); }
.grade-btn.tone-ok { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }

/* ==========================================================================
   Afbeeldingen bij vragen
   ========================================================================== */

.picture {
  margin: 0 0 var(--sp-4); display: grid; gap: 6px; justify-items: center;
  padding: var(--sp-4); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface-2) 65%, transparent);
  border: 1px solid var(--line-soft);
  --fig-line: var(--text-dim);
  --fig-fill: color-mix(in srgb, var(--select) 10%, transparent);
}
.picture svg { width: 100%; max-width: 420px; height: auto; }
.picture img { max-width: min(100%, 520px); border-radius: var(--r-md); }
.picture figcaption { color: var(--muted); font-size: var(--step--1); text-align: center; }
.pic-text { fill: var(--muted); font-size: 11px; font-family: var(--font-ui); }

/* Een knop met [hidden] moet ook echt weg zijn; .btn zet display en wint
   anders van de standaardregel voor [hidden]. */
.stage-foot .btn[hidden] { display: none !important; }

/* ==========================================================================
   Niveaus, theorie en de docent (versie 8)
   ========================================================================== */

/* --- niveau van de vraag --------------------------------------------------- */

.level-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px; border-radius: 999px; font-size: var(--step--1);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-dim);
  white-space: nowrap;
}
.level-chip .ico { width: 14px; height: 14px; }
.level-chip span { color: var(--muted); font-size: 11px; }
.level-chip.lvl-2 { border-color: color-mix(in srgb, var(--select) 45%, var(--line)); color: var(--select); }
.level-chip.lvl-3 {
  border-color: color-mix(in srgb, var(--memory) 55%, var(--line));
  background: var(--memory-tint); color: var(--memory);
}
.level-chip.lvl-3 span { color: color-mix(in srgb, var(--memory) 70%, var(--muted)); }

/* --- theorie na een antwoord ------------------------------------------------ */

.theory {
  margin-top: var(--sp-3); padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(160deg,
              color-mix(in srgb, var(--memory) 9%, var(--surface-2)), var(--surface-2) 65%);
  animation: rise var(--dur-base) var(--ease-out);
}
.theory.is-full { border-color: color-mix(in srgb, var(--memory) 40%, var(--line)); }

.th-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: var(--sp-3); color: var(--memory); font-size: var(--step--1);
}
.th-head .ico { width: 16px; height: 16px; }
.th-head b { color: var(--memory); }
.th-head span { color: var(--muted); }

.th-body { display: flex; align-items: flex-start; gap: var(--sp-4); }
.th-text { flex: 1; display: grid; gap: var(--sp-3); }
.th-text p { margin: 0; color: var(--text-dim); font-size: var(--step-0); line-height: 1.55; }
.th-text .th-source { color: var(--muted); font-size: 11px; font-style: italic; }
.th-more { justify-self: start; }

/* --- de docent --------------------------------------------------------------- */

.teacher {
  --tc-skin:   #8a5638;
  --tc-skin-2: #6d4229;
  --tc-hair:   #26190f;
  --tc-ink:    #2a1a12;
  --tc-top:    var(--select);
  width: 118px; height: auto; flex: none;
}
.teacher.sm { width: 94px; }
.teacher.lg { width: 168px; }

.tc-face  { fill: var(--tc-skin); }
.tc-neck  { fill: var(--tc-skin-2); }
.tc-hair  { fill: var(--tc-hair); }
.tc-top   { fill: var(--tc-top); }
.tc-collar { fill: color-mix(in srgb, var(--tc-top) 65%, #000); }
.tc-eye   { fill: var(--tc-ink); }
.tc-glint { fill: #fff; opacity: .9; }
.tc-brow, .tc-nose, .tc-mouth, .tc-fingers {
  fill: none; stroke: var(--tc-ink); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.tc-mouth.open { fill: #6d3030; stroke: var(--tc-ink); }
.tc-fingers { stroke: var(--tc-skin-2); stroke-width: 2; }
.tc-arm   { fill: var(--tc-top); }
.tc-sleeve { fill: none; stroke: var(--tc-top); stroke-width: 15; stroke-linecap: round; }
.tc-fingers.thin { stroke-width: 1.8; }
.tc-hand  { fill: var(--tc-skin); }
.tc-earring { fill: var(--action); }

/* Ze knippert; verder beweegt er niets terwijl je leest. */
.tc-eyes { transform-box: fill-box; transform-origin: center; animation: tc-blink 6s infinite; }
@keyframes tc-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.12); }
}
.tc-body { transform-box: fill-box; transform-origin: bottom center;
           animation: tc-sway 7s var(--ease-in-out) infinite; }
@keyframes tc-sway {
  0%, 100% { transform: rotate(calc(-.7deg * var(--motion-scale))); }
  50%      { transform: rotate(calc(.7deg * var(--motion-scale))); }
}

.teacher-says { display: flex; align-items: center; gap: var(--sp-3); }
.tc-bubble {
  position: relative; margin: 0; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg); background: var(--surface-3);
  border: 1px solid var(--line); color: var(--text-dim); font-size: var(--step--1);
}
.tc-bubble::before {
  content: ''; position: absolute; left: -7px; top: 50%; margin-top: -6px;
  width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--surface-3); border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

[data-theme="daylight"] .teacher { --tc-top: var(--select); }

@media (max-width: 620px) {
  .th-body { flex-direction: column; align-items: center; text-align: left; }
  .teacher.sm { width: 76px; }
}

/* ==========================================================================
   Versie 9 — ruimere bovenbalk, snelcheck, "je bent bij"
   ========================================================================== */

/* De balk is hoger en wat erin staat vult ongeveer zeventig procent van die
   hoogte, zodat er lucht boven en onder overblijft. */
.topbar-inner { height: 118px; gap: var(--sp-5); }
.xp-hud { padding: 8px 24px 8px 8px; gap: 15px; }
.xh-badge { width: 56px; height: 56px; }
.xp-emblem.md { width: 38px; height: 38px; }
.xh-lvl { min-width: 22px; height: 22px; font-size: 12px; }
.xh-body { min-width: 208px; gap: 5px; }
.xh-xp { font-size: var(--step-3); line-height: 1; }
.xh-bar { height: 8px; }
.xh-next { font-size: 12px; }
.bc-face { width: 58px; height: 58px; }
.boost-chip:not([hidden]) { padding: 6px 20px 6px 6px; }
.streak-chip { padding: 10px 18px 10px 14px; font-size: var(--step-0); gap: 10px; }
.streak-chip .ico { width: 20px; height: 20px; }
.icon-link { width: 44px; height: 44px; }
.icon-link svg { width: 20px; height: 20px; }
.brand-mark { width: 38px; height: 38px; font-size: var(--step-1); }

@media (max-width: 1100px) { .topbar-inner { height: 88px; } .xh-badge { width: 58px; height: 58px; } }
@media (max-width: 900px)  { .topbar-inner { height: 72px; gap: var(--sp-3); } }

/* --- snelcheck ------------------------------------------------------------- */

.snapcheck {
  margin-top: var(--sp-3); padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--memory) 50%, var(--line));
  background: linear-gradient(160deg, var(--memory-tint), var(--surface-2) 60%);
  animation: rise var(--dur-base) var(--ease-out);
}
.sc-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; color: var(--memory); }
.sc-head .ico { width: 18px; height: 18px; }
.sc-head b { color: var(--memory); font-size: var(--step-1); }
.sc-head span { color: var(--muted); font-size: var(--step--1); }
.sc-head.ok, .sc-head.ok b, .sc-head.ok .ico { color: var(--ok); }
.sc-ask { margin: var(--sp-2) 0 var(--sp-3); color: var(--text-dim); font-size: var(--step-0); }
.sc-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.sc-row .text-input { flex: 1; min-width: 200px; }

/* --- je bent bij ------------------------------------------------------------ */

.empty.caught-up { display: grid; place-items: center; gap: var(--sp-3); text-align: center; }
.empty.caught-up b { font-size: var(--step-2); }
.empty.caught-up p { max-width: 52ch; color: var(--muted); }
.cu-when {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--action) 45%, var(--line));
  background: var(--action-tint); color: var(--action) !important;
}
.cu-when .ico { width: 16px; height: 16px; }
.rm-pill.short { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); color: var(--ok); }