/* ==========================================================================
   Study Hub — layout & componenten
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--text);
  background: var(--ink);
  background-image:
    radial-gradient(1100px 520px at 78% -12%, rgba(79, 209, 233, .10), transparent 62%),
    radial-gradient(760px 420px at 6% 0%, rgba(155, 140, 245, .10), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.018em; line-height: 1.15; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
input { font: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.shell { width: min(1140px, calc(100% - 40px)); margin-inline: auto; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- topbar --------------------------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-inner { display: flex; align-items: center; gap: var(--sp-4); height: 62px; }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.02em; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--data), var(--mastery) 55%, var(--signal));
  color: #08111c; font-family: var(--font-mono); font-weight: 700; font-size: 14px;
}
.brand small { color: var(--muted); font-weight: 400; font-size: var(--step--1); }

.topbar-spacer { flex: 1; }

.streak-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 11px 5px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: var(--step--1); color: var(--text-dim);
}
.streak-flame { font-size: 15px; line-height: 1; filter: saturate(1.2); }
.streak-chip b { font-family: var(--font-mono); color: var(--text); }
.streak-chip.frozen { border-color: color-mix(in srgb, var(--data) 45%, var(--line)); }

.icon-link {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; transition: border-color var(--dur-quick) var(--ease-out),
                               background var(--dur-quick) var(--ease-out);
}
.icon-link:hover { border-color: var(--signal); background: var(--surface-2); }
.icon-link svg { width: 17px; height: 17px; stroke: var(--text-dim); fill: none; stroke-width: 1.7; }

/* --- knoppen -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--r-md); border: 1px solid transparent;
  background: var(--signal); color: var(--signal-ink);
  font-weight: 600; cursor: pointer;
  transition: transform var(--dur-quick) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-quick) var(--ease-out);
}
.btn:hover { box-shadow: var(--glow-signal); }
.btn:active { transform: translateY(1px) scale(calc(1 - .015 * var(--motion-scale))); }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn.ghost:hover { border-color: var(--data); box-shadow: none; background: var(--surface-2); }
.btn.quiet { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.btn .kbd { opacity: .65; }

.kbd {
  font-family: var(--font-mono); font-size: 11px; padding: 1px 5px;
  border: 1px solid currentColor; border-radius: 5px; opacity: .5;
}

/* --- hero met live topologie --------------------------------------------- */

.hero { padding: var(--sp-8) 0 var(--sp-6); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: var(--sp-7); align-items: center; }
.hero h1 { font-size: var(--step-5); letter-spacing: -.04em; margin-bottom: var(--sp-4); }
.hero h1 .accent-line { color: var(--data); }
.hero-lede { color: var(--text-dim); font-size: var(--step-1); max-width: 46ch; }
.hero-cta { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }

.topology { width: 100%; height: auto; overflow: visible; }
.topo-edge { stroke: var(--line); stroke-width: 2; fill: none; }
.topo-flow { stroke: var(--data); stroke-width: 2.5; fill: none; stroke-linecap: round;
             stroke-dasharray: 10 190; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--data) 60%, transparent)); }
.topo-node { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.5; }
.topo-node.due { stroke: var(--signal); }
.topo-ring { fill: none; stroke: var(--mastery); stroke-width: 3; stroke-linecap: round; }
.topo-label { fill: var(--text-dim); font-family: var(--font-mono); font-size: 11px; }
.topo-value { fill: var(--text); font-family: var(--font-mono); font-size: 15px; font-weight: 600; }

@keyframes flow-dash { to { stroke-dashoffset: -200; } }
.topo-flow { animation: flow-dash calc(2600ms / max(var(--motion-scale), .001)) linear infinite; }
[data-motion="off"] .topo-flow { animation: none; opacity: .55; }

/* --- statbalk ------------------------------------------------------------- */

.statbar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line-soft); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; margin-top: var(--sp-6);
}
.statbar .cell { background: var(--surface); padding: var(--sp-4) var(--sp-5); }
.statbar .cell b { display: block; font-family: var(--font-mono); font-size: var(--step-3);
                   font-weight: 600; letter-spacing: -.03em; }
.statbar .cell span { color: var(--muted); font-size: var(--step--1); }
.statbar .cell.hot b { color: var(--signal); }

/* --- secties -------------------------------------------------------------- */

.section { padding: var(--sp-7) 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between;
                gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.section-head h2 { font-size: var(--step-2); }
.section-head p { color: var(--muted); font-size: var(--step--1); }

/* --- deelkaarten ---------------------------------------------------------- */

.parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }

.part-card {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.part-card:hover {
  border-color: color-mix(in srgb, var(--data) 55%, var(--line));
  transform: translateY(calc(-3px * var(--motion-scale)));
  box-shadow: var(--shadow-2);
}
.part-card .idx { font-family: var(--font-mono); color: var(--muted); font-size: var(--step--1); }
.part-card h3 { font-size: var(--step-1); }
.part-card p { color: var(--muted); font-size: var(--step--1); line-height: 1.5; }
.part-card .fill { flex: 1; }

.meter { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.meter > i {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--data), var(--mastery));
  transition: width var(--dur-slow) var(--ease-out);
}
.meter-row { display: flex; justify-content: space-between; gap: var(--sp-3);
             font-size: var(--step--1); color: var(--muted); margin-top: 7px; }
.meter-row b { font-family: var(--font-mono); color: var(--text-dim); font-weight: 600; }

.due-flag {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 3px 9px; border-radius: 999px; font-size: var(--step--1); font-weight: 600;
  color: var(--signal); background: color-mix(in srgb, var(--signal) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal) 35%, transparent);
}
.due-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
@keyframes pulse-dot { 50% { opacity: .3; transform: scale(.75); } }
.due-dot { animation: pulse-dot calc(1800ms / max(var(--motion-scale), .001)) var(--ease-in-out) infinite; }

/* --- deelpagina ----------------------------------------------------------- */

.part-hero { padding: var(--sp-6) 0 var(--sp-4); }
.crumbs { font-size: var(--step--1); color: var(--muted); margin-bottom: var(--sp-4);
          display: flex; align-items: center; gap: 8px; }
.crumbs a:hover { color: var(--data); }

.part-head { display: flex; justify-content: space-between; align-items: flex-end;
             gap: var(--sp-5); flex-wrap: wrap; }
.part-head h1 { font-size: var(--step-4); letter-spacing: -.035em; }
.part-head p { color: var(--muted); max-width: 62ch; margin-top: 8px; }

.mastery-dial { display: flex; align-items: center; gap: var(--sp-3); }
.mastery-dial svg { width: 74px; height: 74px; }
.dial-track { fill: none; stroke: var(--surface-3); stroke-width: 7; }
.dial-value { fill: none; stroke: var(--mastery); stroke-width: 7; stroke-linecap: round;
              transition: stroke-dashoffset var(--dur-slow) var(--ease-out); }
.mastery-dial b { display: block; font-family: var(--font-mono); font-size: var(--step-2); }
.mastery-dial span { color: var(--muted); font-size: var(--step--1); }

/* --- modusselectie -------------------------------------------------------- */

.modes { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); margin: var(--sp-5) 0; }
.mode {
  text-align: left; padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); cursor: pointer;
  transition: border-color var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out);
}
.mode:hover { border-color: color-mix(in srgb, var(--data) 50%, var(--line)); }
.mode b { display: block; font-size: var(--step-0); font-weight: 600; margin-bottom: 3px; }
.mode span { color: var(--muted); font-size: var(--step--1); }
.mode[aria-pressed="true"] { border-color: var(--select); background: var(--select-tint); }
.mode[aria-pressed="true"] b { color: var(--select); }

/* --- studielayout --------------------------------------------------------- */

.study { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-4);
         padding-bottom: var(--sp-8); align-items: start; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}
.stage { padding: var(--sp-6); min-height: 520px; display: flex; flex-direction: column; }
.rail { padding: var(--sp-4); position: sticky; top: 78px; }
.rail + .rail { margin-top: var(--sp-3); }
.rail h3 { font-size: var(--step--1); color: var(--muted); font-weight: 500; margin-bottom: var(--sp-3); }

/* sessievoortgang: segmenten in plaats van één balk — je ziet je fouten staan */
.seg-track { display: flex; gap: 3px; margin-bottom: var(--sp-5); }
.seg { flex: 1; height: 4px; border-radius: 99px; background: var(--surface-3);
       transition: background var(--dur-base) var(--ease-out); }
.seg.ok { background: var(--ok); }
.seg.no { background: var(--no); }
.seg.now { background: var(--signal); }

.q-meta { display: flex; align-items: center; justify-content: space-between;
          gap: var(--sp-3); margin-bottom: var(--sp-4); font-size: var(--step--1);
          flex-wrap: wrap; }
.q-tag { display: inline-flex; align-items: center; gap: 7px; color: var(--text-dim);
         flex-wrap: wrap; min-width: 0; }
.q-tag .wl { width: 8px; height: 8px; border-radius: 2px; }
.q-count { font-family: var(--font-mono); color: var(--muted); }
.q-timer { font-family: var(--font-mono); color: var(--signal); }

.prompt { font-size: var(--step-2); font-weight: 500; line-height: 1.35; margin-bottom: var(--sp-5); }
.prompt code, .prompt .mono { font-family: var(--font-mono); color: var(--data); }

.stage-body { flex: 1; }
.stage-foot { display: flex; align-items: center; justify-content: space-between;
              gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
.foot-hint { color: var(--muted); font-size: var(--step--1); display: flex; gap: 10px; align-items: center; }

/* --- opties (mcq / truefalse) --------------------------------------------- */

.options { display: grid; gap: 9px; }
.option {
  display: flex; align-items: flex-start; gap: var(--sp-3); width: 100%;
  padding: 13px 15px; text-align: left; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color var(--dur-quick) var(--ease-out),
              background var(--dur-quick) var(--ease-out),
              transform var(--dur-quick) var(--ease-out);
}
.option:hover { border-color: color-mix(in srgb, var(--data) 55%, var(--line)); }
.option .key {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px;
  display: grid; place-items: center; background: var(--surface-3);
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}
.option[aria-pressed="true"] { border-color: var(--select); background: var(--select-tint); }
.option[aria-pressed="true"] .key { background: var(--select); color: #04121c; }
.option.correct { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--surface-2)); }
.option.correct .key { background: var(--ok); color: #04150e; }
.option.wrong { border-color: var(--no); background: color-mix(in srgb, var(--no) 12%, var(--surface-2)); }
.option.wrong .key { background: var(--no); color: #1c0407; }

/* --- tekstinvoer ---------------------------------------------------------- */

.text-input, .field-input {
  width: 100%; padding: 13px 15px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  font-family: var(--font-mono);
  transition: border-color var(--dur-quick) var(--ease-out);
}
.text-input:focus, .field-input:focus { border-color: var(--select); outline: none;
  box-shadow: 0 0 0 3px var(--select-tint); }
.text-input.correct, .field-input.correct { border-color: var(--ok); }
.text-input.wrong, .field-input.wrong { border-color: var(--no); }

.fields { display: grid; gap: 10px; }
.field { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: var(--sp-3); align-items: center; }
.field label { color: var(--text-dim); font-size: var(--step--1); }
.field .solution { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ok); }

.subnet-given {
  display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-4); border-radius: var(--r-md); margin-bottom: var(--sp-4);
  background: var(--surface-2); border: 1px dashed var(--line);
}
.subnet-given .addr { font-family: var(--font-mono); font-size: var(--step-2); color: var(--data); }
.subnet-given .label { color: var(--muted); font-size: var(--step--1); }

/* --- matching ------------------------------------------------------------- */

.match { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.match-col { display: grid; gap: 8px; align-content: start; }
.match-item {
  padding: 12px 14px; border-radius: var(--r-md); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); text-align: left;
  transition: border-color var(--dur-quick) var(--ease-out),
              transform var(--dur-quick) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.match-item:hover { border-color: color-mix(in srgb, var(--data) 55%, var(--line)); }
.match-item[aria-pressed="true"] { border-color: var(--select); background: var(--select-tint); }
.match-item.linked { border-style: dashed; opacity: .75; }
.match-item.linked .pair-no { color: var(--data); }
.match-item.correct { border-color: var(--ok); opacity: 1; }
.match-item.wrong { border-color: var(--no); }
.pair-no { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-right: 8px; }

@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(calc(-4px * var(--motion-scale))); }
  75% { transform: translateX(calc(4px * var(--motion-scale))); }
}
.nudge { animation: nudge 260ms var(--ease-in-out); }

/* --- ordering ------------------------------------------------------------- */

.order-list { display: grid; gap: 8px; }
.order-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 11px 12px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
  transition: border-color var(--dur-quick) var(--ease-out);
}
.order-item .rank { font-family: var(--font-mono); color: var(--muted); width: 20px; }
.order-item .body { flex: 1; }
.order-item .grip { display: flex; gap: 5px; }
.order-item.correct { border-color: var(--ok); }
.order-item.wrong { border-color: var(--no); }
.mini {
  width: 28px; height: 26px; border-radius: 7px; cursor: pointer;
  background: var(--surface-3); border: 1px solid var(--line); color: var(--text-dim);
  display: grid; place-items: center;
  transition: background var(--dur-quick) var(--ease-out);
}
.mini:hover { background: var(--signal); color: var(--signal-ink); }
.mini:disabled { opacity: .3; cursor: not-allowed; }

/* --- classify ------------------------------------------------------------- */

.tokens { display: flex; flex-wrap: wrap; gap: 8px; min-height: 40px;
          padding: 10px; border-radius: var(--r-md); background: var(--surface-2);
          border: 1px dashed var(--line); margin-bottom: var(--sp-4); }
.token {
  padding: 7px 12px; border-radius: 9px; cursor: pointer;
  background: var(--surface-3); border: 1px solid var(--line); color: var(--text-dim);
  font-size: var(--step--1); font-weight: 500;
  transition: border-color var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out);
}
.token:hover { border-color: var(--data); }
.token[aria-pressed="true"] { border-color: var(--select); color: var(--text);
  background: var(--select-tint); }
.token.correct { border-color: var(--ok); color: var(--ok); }
.token.wrong { border-color: var(--no); color: var(--no); }

.buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-3); }
.bucket { padding: var(--sp-3); border-radius: var(--r-md);
          background: var(--surface-2); border: 1px solid var(--line); min-height: 96px;
          cursor: pointer; transition: border-color var(--dur-quick) var(--ease-out); }
.bucket:hover, .bucket.armed { border-color: var(--select); }
.bucket.armed { background: var(--select-tint); }
.bucket h4 { font-size: var(--step--1); color: var(--text-dim); margin-bottom: var(--sp-2); font-weight: 600; }
.bucket .drop { display: flex; flex-wrap: wrap; gap: 7px; }

/* --- hotspot -------------------------------------------------------------- */

.hotspot { width: 100%; height: auto; }
.hs-shape { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.5; cursor: pointer;
            transition: fill var(--dur-quick) var(--ease-out), stroke var(--dur-quick) var(--ease-out); }
.hs-shape:hover { stroke: var(--data); }
.hs-group[aria-pressed="true"] .hs-shape { stroke: var(--select); stroke-width: 2.5; fill: var(--select-tint); }
.hs-group.correct .hs-shape { stroke: var(--ok); fill: color-mix(in srgb, var(--ok) 16%, var(--surface-2)); }
.hs-group.wrong .hs-shape { stroke: var(--no); fill: color-mix(in srgb, var(--no) 16%, var(--surface-2)); }
.hs-label { fill: var(--text-dim); font-size: 13px; font-family: var(--font-ui); pointer-events: none; }
.hs-line { stroke: var(--line); stroke-width: 2; }

/* --- scenario ------------------------------------------------------------- */

.scenario-intro { padding: var(--sp-4); border-radius: var(--r-md); margin-bottom: var(--sp-4);
                  background: var(--surface-2); border-left: 3px solid var(--data);
                  color: var(--text-dim); }
.scenario-steps { display: flex; gap: 6px; margin-bottom: var(--sp-4); }
.scenario-steps .dot { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
                       background: var(--surface-3); color: var(--muted);
                       font-family: var(--font-mono); font-size: 11px; }
.scenario-steps .dot.done { background: var(--ok); color: #04150e; }
.scenario-steps .dot.failed { background: var(--no); color: #1c0407; }
.scenario-steps .dot.now { background: var(--select); color: #04121c; }

/* --- feedback ------------------------------------------------------------- */

.feedback {
  margin-top: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-2); line-height: 1.55;
}
.feedback.good { border-color: color-mix(in srgb, var(--ok) 45%, var(--line));
                 background: color-mix(in srgb, var(--ok) 8%, var(--surface-2)); }
.feedback.bad  { border-color: color-mix(in srgb, var(--no) 45%, var(--line));
                 background: color-mix(in srgb, var(--no) 8%, var(--surface-2)); }
.feedback b { display: block; margin-bottom: 4px; }
.feedback .why { color: var(--text-dim); font-size: var(--step-0); }
.feedback .elaborate { margin-top: var(--sp-3); padding-top: var(--sp-3);
                       border-top: 1px dashed var(--line); color: var(--muted);
                       font-size: var(--step--1); }
@keyframes rise { from { opacity: 0; transform: translateY(calc(8px * var(--motion-scale))); } }
.feedback { animation: rise var(--dur-base) var(--ease-out); }

/* --- confidence check ----------------------------------------------------- */

.confidence { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
              padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
              background: var(--surface-2); border: 1px dashed var(--line); margin-bottom: var(--sp-4); }
.confidence span { color: var(--muted); font-size: var(--step--1); }
.conf-btn { padding: 5px 12px; border-radius: 999px; cursor: pointer;
            background: transparent; border: 1px solid var(--line); font-size: var(--step--1); }
.conf-btn[aria-pressed="true"] { border-color: var(--select); color: var(--select);
  background: var(--select-tint); }

/* --- geheugenrail --------------------------------------------------------- */

.memory-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: var(--sp-3); }
.memory-cell { height: 34px; border-radius: 7px; background: var(--surface-3);
               transition: background var(--dur-base) var(--ease-out); }
.memory-cell.on { background: linear-gradient(180deg,
  color-mix(in srgb, var(--mastery) 55%, transparent), color-mix(in srgb, var(--mastery) 20%, transparent)); }

.rail-line { display: flex; justify-content: space-between; gap: var(--sp-3);
             padding: 7px 0; font-size: var(--step--1); color: var(--muted);
             border-top: 1px solid var(--line-soft); }
.rail-line:first-of-type { border-top: 0; }
.rail-line b { font-family: var(--font-mono); color: var(--text-dim); font-weight: 600; }

.chapter-chip { display: flex; align-items: center; gap: 9px; padding: 7px 9px;
                border-radius: 9px; font-size: var(--step--1); color: var(--text-dim); }
.chapter-chip .wl { width: 3px; height: 22px; border-radius: 99px; flex: 0 0 auto; }
.chapter-chip .n { font-family: var(--font-mono); color: var(--muted); }
.chapter-chip small { margin-left: auto; color: var(--muted); font-family: var(--font-mono); }

/* --- sessie-afsluiting ---------------------------------------------------- */

.summary { display: grid; place-items: center; text-align: center; flex: 1; gap: var(--sp-4); }
.summary .score { font-family: var(--font-mono); font-size: var(--step-5); letter-spacing: -.05em; line-height: 1; }
.summary .score sub { font-size: var(--step-2); color: var(--muted); vertical-align: baseline; }
.summary .headline { font-size: var(--step-2); font-weight: 600; }
.summary .detail { color: var(--muted); max-width: 46ch; }
.summary-stats { display: flex; gap: var(--sp-5); flex-wrap: wrap; justify-content: center; }
.summary-stats div { text-align: center; }
.summary-stats b { display: block; font-family: var(--font-mono); font-size: var(--step-2); }
.summary-stats span { color: var(--muted); font-size: var(--step--1); }
.summary .actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }

.xp-pop {
  position: fixed; z-index: 60; pointer-events: none;
  font-family: var(--font-mono); font-weight: 600; color: var(--signal);
}
@keyframes xp-fly {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(calc(-46px * var(--motion-scale))) scale(1.12); }
}
.xp-pop { animation: xp-fly calc(760ms * max(var(--motion-scale), .35)) var(--ease-out) forwards; }

.empty { display: grid; place-items: center; text-align: center; flex: 1; gap: var(--sp-3);
         color: var(--muted); }
.empty b { color: var(--text); font-size: var(--step-2); font-weight: 600; }

/* --- statistiek ----------------------------------------------------------- */

.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.stats-grid .card { padding: var(--sp-5); }
.stats-grid .wide { grid-column: 1 / -1; }
.stats-grid h3 { font-size: var(--step-1); margin-bottom: 4px; }
.stats-grid .sub { color: var(--muted); font-size: var(--step--1); margin-bottom: var(--sp-4); }

.heatmap { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 12px);
           gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.heat-cell { width: 12px; height: 12px; border-radius: 3px; background: var(--surface-3); }
.heat-cell[data-level="1"] { background: color-mix(in srgb, var(--data) 25%, var(--surface-3)); }
.heat-cell[data-level="2"] { background: color-mix(in srgb, var(--data) 50%, var(--surface-3)); }
.heat-cell[data-level="3"] { background: color-mix(in srgb, var(--data) 75%, var(--surface-3)); }
.heat-cell[data-level="4"] { background: var(--data); }

.bar-row { display: grid; grid-template-columns: 1fr 76px 46px; gap: var(--sp-3);
           align-items: center; padding: 5px 0; font-size: var(--step--1); }
.bar-row .name { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .track { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bar-row .track i { display: block; height: 100%; border-radius: 99px; }
.bar-row .val { font-family: var(--font-mono); color: var(--muted); text-align: right; }

.curve { width: 100%; height: auto; }
.curve-axis { stroke: var(--line); stroke-width: 1; }
.curve-grid { stroke: var(--line-soft); stroke-width: 1; stroke-dasharray: 3 5; }
.curve-line { fill: none; stroke: var(--mastery); stroke-width: 2; stroke-linecap: round; }
.curve-area { fill: color-mix(in srgb, var(--mastery) 14%, transparent); }
.curve-target { stroke: var(--signal); stroke-width: 1.2; stroke-dasharray: 4 4; }
.curve-text { fill: var(--muted); font-family: var(--font-mono); font-size: 10px; }

/* --- instellingen / dialoog ----------------------------------------------- */

.dialog {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-3);
  width: min(560px, calc(100% - 32px));
}
.dialog::backdrop { background: rgba(4, 9, 16, .7); backdrop-filter: blur(3px); }
.dialog-head { display: flex; align-items: center; justify-content: space-between;
               gap: var(--sp-3); padding: var(--sp-4) var(--sp-5);
               border-bottom: 1px solid var(--line-soft); }
.dialog-head h2 { font-size: var(--step-1); }
.dialog-body { padding: var(--sp-5); display: grid; gap: var(--sp-4); max-height: 66vh; overflow: auto; }
.dialog-foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line-soft);
               display: flex; justify-content: flex-end; gap: var(--sp-3); flex-wrap: wrap; }

.setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center; }
.setting .label { font-weight: 500; }
.setting .hint { color: var(--muted); font-size: var(--step--1); margin-top: 2px; }
.seg-choice { display: flex; gap: 2px; padding: 3px; border-radius: 10px;
              background: var(--surface-2); border: 1px solid var(--line); }
.seg-choice button { padding: 5px 11px; border-radius: 7px; border: 0; background: transparent;
                     cursor: pointer; font-size: var(--step--1); color: var(--muted); }
.seg-choice button[aria-pressed="true"] { background: var(--surface-3); color: var(--text); }

/* --- toast ---------------------------------------------------------------- */

.toast-stack { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
               display: grid; gap: 8px; z-index: 70; pointer-events: none; }
.toast { padding: 10px 16px; border-radius: 999px; font-size: var(--step--1);
         background: var(--surface-3); border: 1px solid var(--line);
         box-shadow: var(--shadow-2); animation: rise var(--dur-base) var(--ease-out); }
.toast.win { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); color: var(--ok); }

/* --- footer --------------------------------------------------------------- */

.footer { padding: var(--sp-6) 0 var(--sp-8); color: var(--muted); font-size: var(--step--1);
          border-top: 1px solid var(--line-soft); margin-top: var(--sp-6); }
.footer a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; }

/* --- view transitions ----------------------------------------------------- */

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out var(--dur-base) var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in var(--dur-slow) var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(calc(-6px * var(--motion-scale))); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(calc(10px * var(--motion-scale))); } }

/* Eén georkestreerd binnenkomstmoment per scherm, niet per kaart. */
@keyframes stage-in { from { opacity: 0; transform: translateY(calc(14px * var(--motion-scale))); } }
.enter > * { animation: stage-in var(--dur-slow) var(--ease-out) both; }
.enter > *:nth-child(2) { animation-delay: calc(60ms * var(--motion-scale)); }
.enter > *:nth-child(3) { animation-delay: calc(120ms * var(--motion-scale)); }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .parts { grid-template-columns: repeat(2, 1fr); }
  .modes { grid-template-columns: repeat(3, 1fr); }
  .study { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
  .stats-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .shell { width: calc(100% - 28px); }
  .hero { padding: var(--sp-6) 0 var(--sp-4); }
  .statbar { grid-template-columns: repeat(2, 1fr); }
  .parts { grid-template-columns: 1fr; }
  .modes { grid-template-columns: repeat(2, 1fr); }
  .stage { padding: var(--sp-4); min-height: 460px; }
  .match { grid-template-columns: 1fr; }
  .field { grid-template-columns: 1fr; gap: 5px; }
  .brand small { display: none; }
  .foot-hint { display: none; }
  .option { padding: 15px; }
  .token, .mini { min-height: 40px; }
}

/* ==========================================================================
   Versie 3 — iconen, schema's, medailles en beleving
   ========================================================================== */

/* --- iconen ---------------------------------------------------------------
   Overal waar kleur iets zegt staat er nu ook een vorm naast. Zo blijft
   goed/fout leesbaar zonder kleur te kunnen onderscheiden. */

.ico {
  width: 1.05em; height: 1.05em; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -.16em;
}
.ico-lg { width: 1.5em; height: 1.5em; }
.ico-xl { width: 2.4em; height: 2.4em; stroke-width: 1.5; }

.chip-ico {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  background: var(--surface-3); color: var(--text-dim);
}
.chip-ico.tint-memory { background: var(--memory-tint); color: var(--memory); }
.chip-ico.tint-select { background: var(--select-tint); color: var(--select); }
.chip-ico.tint-action { background: var(--action-tint); color: var(--action); }
.chip-ico.tint-ok     { background: var(--ok-tint);     color: var(--ok); }

/* --- achtergrond: aurora + korrel -----------------------------------------
   Twee zacht bewegende kleurvlekken en een fijne ruislaag. Ze staan achter
   alles, bewegen traag, en verdwijnen zodra je beweging uitzet. */

.aurora {
  position: fixed; inset: -25vh -10vw; z-index: -2; pointer-events: none;
  filter: blur(90px); opacity: .55;
}
.aurora span {
  position: absolute; display: block; border-radius: 50%;
  animation: drift calc(26s / max(var(--motion-scale), .05)) var(--ease-in-out) infinite alternate;
}
.aurora .a1 { width: 46vw; height: 46vw; left: 4%; top: 2%;
  background: radial-gradient(circle, color-mix(in srgb, var(--select) 55%, transparent), transparent 68%); }
.aurora .a2 { width: 40vw; height: 40vw; right: 2%; top: -6%;
  background: radial-gradient(circle, color-mix(in srgb, var(--memory) 50%, transparent), transparent 68%);
  animation-delay: -9s; }
.aurora .a3 { width: 34vw; height: 34vw; left: 38%; top: 34%;
  background: radial-gradient(circle, color-mix(in srgb, var(--action) 32%, transparent), transparent 70%);
  animation-delay: -17s; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(calc(4vw * var(--motion-scale)), calc(3vh * var(--motion-scale)), 0)
                    scale(calc(1 + .12 * var(--motion-scale))); }
}
[data-motion="off"] .aurora { display: none; }

.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- glas ---------------------------------------------------------------- */

.glass {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  border: 1px solid var(--glass-edge);
}
.topbar { background: var(--glass); border-bottom-color: var(--glass-edge); }

/* --- bento-overzicht ------------------------------------------------------ */

.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-top: var(--sp-6); }
.bento .tile {
  position: relative; overflow: hidden;
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.bento .tile:hover { transform: translateY(calc(-2px * var(--motion-scale))); }
.bento .tile .top { display: flex; align-items: center; gap: 10px; color: var(--muted);
                    font-size: var(--step--1); }
.bento .tile b { font-family: var(--font-mono); font-size: var(--step-3); letter-spacing: -.03em;
                 line-height: 1.05; }
.bento .tile small { color: var(--muted); font-size: var(--step--1); }
.bento .tile.span-2 { grid-column: span 2; }
.bento .tile.accent-action { border-color: color-mix(in srgb, var(--action) 40%, var(--line)); }
.bento .tile.accent-action b { color: var(--action); }
.bento .tile.accent-memory b { color: var(--memory); }

/* --- niveauring ----------------------------------------------------------- */

.level-ring { display: flex; align-items: center; gap: var(--sp-3); }
.level-ring svg { width: 58px; height: 58px; }
.ring-track { fill: none; stroke: var(--surface-3); stroke-width: 6; }
.ring-fill  { fill: none; stroke: var(--action); stroke-width: 6; stroke-linecap: round;
              transition: stroke-dashoffset var(--dur-slow) var(--ease-out); }
.level-ring .n { position: absolute; }

/* --- schema bij een vraag -------------------------------------------------- */

.figure { margin: 0 0 var(--sp-5); }
.figure svg { width: 100%; height: auto; display: block;
              background: var(--surface-2); border: 1px solid var(--line-soft);
              border-radius: var(--r-md); padding: var(--sp-3); }
.figure figcaption { margin-top: 7px; color: var(--muted); font-size: var(--step--1); }

.fig-box { fill: var(--surface-3); stroke: var(--line); stroke-width: 1.5; }
.fig-box.accent { fill: var(--select-tint); stroke: var(--select); }
.fig-box.accent2 { fill: var(--memory-tint); stroke: var(--memory); }
.fig-box.muted { fill: transparent; stroke: var(--line); stroke-dasharray: 5 5; }
.fig-box.shell { fill: transparent; stroke: var(--line); }
.fig-label { fill: var(--text-dim); font-family: var(--font-ui); font-size: 13px; }
.fig-mono { fill: var(--text); font-family: var(--font-mono); font-size: 16px; }
.fig-num { fill: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.fig-note { fill: var(--muted); font-family: var(--font-ui); font-size: 11.5px; }
.fig-link { stroke: var(--line); stroke-width: 2; }
.fig-arrow { stroke: var(--muted); stroke-width: 1.5; fill: none; color: var(--muted); }
.fig-tunnel { stroke: var(--memory); stroke-width: 2.5; fill: none; stroke-dasharray: 7 6; }
.fig-ray { stroke: var(--select); stroke-width: 2; fill: none; }

/* --- hint en opnieuw proberen ---------------------------------------------- */

.assist { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn.assist-btn {
  background: transparent; border: 1px dashed var(--line); color: var(--text-dim);
  padding: 8px 13px; font-weight: 500;
}
.btn.assist-btn:hover { border-style: solid; border-color: var(--memory); color: var(--memory);
                        box-shadow: none; }
.btn.assist-btn[disabled] { opacity: .35; }

.hint-note {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: var(--sp-3); padding: 11px 14px; border-radius: var(--r-md);
  background: var(--memory-tint); border: 1px solid color-mix(in srgb, var(--memory) 40%, transparent);
  color: var(--text-dim); font-size: var(--step-0);
  animation: rise var(--dur-base) var(--ease-out);
}
.hint-note .ico { color: var(--memory); margin-top: 2px; }

.option.is-struck, .is-struck {
  opacity: .35; text-decoration: line-through; pointer-events: none;
}
.hs-group.is-dimmed { opacity: .28; pointer-events: none; }

/* --- uitslag met icoon en woord -------------------------------------------- */

.verdict { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-weight: 600; }
.verdict .badge-ico {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  flex: 0 0 auto;
}
.verdict.good .badge-ico { background: var(--ok); color: #04150e; }
.verdict.bad  .badge-ico { background: var(--no); color: #1c0406; }
.verdict.good { color: var(--ok); }
.verdict.bad  { color: var(--no); }
.verdict .word { font-size: var(--step-1); }

.insight {
  margin-top: var(--sp-3); padding: 11px 14px; border-radius: var(--r-md);
  background: var(--surface-3); border-left: 3px solid var(--select);
  color: var(--text-dim); font-size: var(--step--1);
}
.insight b { display: flex; align-items: center; gap: 7px; color: var(--select);
             margin-bottom: 3px; font-weight: 600; }

/* --- medailles -------------------------------------------------------------- */

.medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-3); }
.medal {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
  padding: var(--sp-4) var(--sp-3); border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.medal.locked { opacity: .45; }
.medal.won:hover { transform: translateY(calc(-3px * var(--motion-scale))); }
.medal .disc {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid var(--line); color: var(--muted); background: var(--surface-3);
}
.medal b { font-size: var(--step-0); }
.medal small { color: var(--muted); font-size: var(--step--1); line-height: 1.35; }
.medal .rank { font-size: 11px; letter-spacing: .04em; color: var(--muted); }

.medal.won.brons .disc      { border-color: var(--r-brons);  color: var(--r-brons);
  background: color-mix(in srgb, var(--r-brons) 14%, var(--surface-3)); }
.medal.won.zilver .disc     { border-color: var(--r-zilver); color: var(--r-zilver);
  background: color-mix(in srgb, var(--r-zilver) 14%, var(--surface-3)); }
.medal.won.goud .disc       { border-color: var(--r-goud);   color: var(--r-goud);
  background: color-mix(in srgb, var(--r-goud) 16%, var(--surface-3)); }
.medal.won.iridescent .disc { border-color: transparent; color: #04121c; background: var(--iridescent); }

.medal.won.brons      { border-color: color-mix(in srgb, var(--r-brons) 40%, var(--line)); }
.medal.won.zilver     { border-color: color-mix(in srgb, var(--r-zilver) 35%, var(--line)); }
.medal.won.goud       { border-color: color-mix(in srgb, var(--r-goud) 45%, var(--line)); }
.medal.won.iridescent { border-color: color-mix(in srgb, var(--r-iridescent) 45%, var(--line)); }
.medal.won.iridescent::after {
  content: ''; position: absolute; inset: -40% -60%;
  background: var(--iridescent); opacity: .1;
  animation: sheen calc(6s / max(var(--motion-scale), .05)) linear infinite;
}
@keyframes sheen { to { transform: translateX(35%) rotate(8deg); } }

.medal-case { display: flex; gap: 8px; flex-wrap: wrap; }
.medal-case .disc-sm {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--surface-3); color: var(--muted);
}
.medal-case .disc-sm.brons { border-color: var(--r-brons); color: var(--r-brons); }
.medal-case .disc-sm.zilver { border-color: var(--r-zilver); color: var(--r-zilver); }
.medal-case .disc-sm.goud { border-color: var(--r-goud); color: var(--r-goud); }
.medal-case .disc-sm.iridescent { border-color: transparent; background: var(--iridescent); color: #04121c; }

/* --- beleving na een antwoord ---------------------------------------------- */

.juice-canvas { position: fixed; inset: 0; z-index: 80; pointer-events: none; }

.screen-glow {
  position: fixed; inset: 0; z-index: 55; pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, var(--glow-color), transparent 62%);
  opacity: 0; animation: glow-pulse 900ms var(--ease-out) forwards; mix-blend-mode: screen;
}
@keyframes glow-pulse { 30% { opacity: .28; } 100% { opacity: 0; } }

@keyframes pop-in {
  0%   { transform: scale(1); }
  40%  { transform: scale(calc(1 + .07 * var(--motion-scale))); }
  70%  { transform: scale(calc(1 - .02 * var(--motion-scale))); }
  100% { transform: scale(1); }
}
.is-pop { animation: pop-in 420ms var(--ease-spring); }

@keyframes shake-x {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(calc(-6px * var(--motion-scale))); }
  45% { transform: translateX(calc(5px * var(--motion-scale))); }
  70% { transform: translateX(calc(-3px * var(--motion-scale))); }
}
.is-shake { animation: shake-x 380ms var(--ease-in-out); }

/* --- streak-chip met icoon --------------------------------------------------- */

.streak-chip .ico { color: var(--action); }
.streak-chip.cold .ico { color: var(--muted); }

/* --- responsive ------------------------------------------------------------- */

@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .bento { grid-template-columns: 1fr; }
  .bento .tile.span-2 { grid-column: span 1; }
  .medals { grid-template-columns: repeat(2, 1fr); }
  .assist { width: 100%; }
}

/* ==========================================================================
   Versie 4 — rangen, scorebord, studiemomenten, bonusfase, mindmap
   ========================================================================== */

/* --- beheersing in woorden -------------------------------------------------
   Het percentage staat er nog, maar klein. De rang is wat je leest. */

.rank-badge {
  display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: var(--sp-3); padding: 7px 14px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.rank-word { font-weight: 600; }
.rank-meta { color: var(--muted); font-size: var(--step--1); }

.rank-onbekend  .rank-word, .rank-inline.rank-onbekend  { color: var(--muted); }
.rank-kennis    .rank-word, .rank-inline.rank-kennis    { color: var(--text-dim); }
.rank-klein     .rank-word, .rank-inline.rank-klein     { color: var(--select); }
.rank-matig     .rank-word, .rank-inline.rank-matig     { color: var(--select); }
.rank-degelijk  .rank-word, .rank-inline.rank-degelijk  { color: var(--memory); }
.rank-kenner    .rank-word, .rank-inline.rank-kenner    { color: var(--memory); }
.rank-meester   .rank-word, .rank-inline.rank-meester   { color: var(--action); }
.rank-wetenschap .rank-word, .rank-inline.rank-wetenschap {
  background: var(--iridescent); -webkit-background-clip: text; background-clip: text;
  color: transparent; font-weight: 600;
}
.rank-badge.rank-meester   { border-color: color-mix(in srgb, var(--action) 45%, var(--line)); }
.rank-badge.rank-wetenschap { border-color: color-mix(in srgb, var(--r-iridescent) 50%, var(--line)); }

.rank-inline { font-weight: 600; font-size: var(--step--1); }

/* --- laatste studiemomenten ------------------------------------------------ */

.history-strip {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--sp-3); margin-top: var(--sp-5);
}
.hs-block { padding: var(--sp-4); border-radius: var(--r-lg);
            background: var(--surface); border: 1px solid var(--line); }
.hs-head { display: flex; align-items: center; gap: 8px; color: var(--muted);
           font-size: var(--step--1); margin-bottom: var(--sp-3); }
.hs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hs-list li { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto;
              gap: var(--sp-3); align-items: baseline; padding: 5px 0;
              border-top: 1px solid var(--line-soft); font-size: var(--step--1); }
.hs-list li:first-child { border-top: 0; }
.hs-list .when { font-family: var(--font-mono); color: var(--text-dim); }
.hs-list .what { color: var(--muted); }
.hs-list .gain { font-family: var(--font-mono); color: var(--action); }
.hs-empty { color: var(--muted); font-size: var(--step--1); }
.hs-due b { display: block; font-size: var(--step-1); }
.hs-due span { color: var(--muted); font-size: var(--step--1); }
.hs-due.now b { color: var(--action); }

/* --- keuze van sessiegrootte ------------------------------------------------ */

.session-size { display: flex; align-items: center; gap: var(--sp-3);
                flex-wrap: wrap; margin-top: var(--sp-5); }
.session-size .label { display: flex; align-items: center; gap: 8px;
                       color: var(--text-dim); font-size: var(--step--1); }
.session-size .size-note { color: var(--muted); font-size: var(--step--1); }
.session-size .seg-choice button[aria-pressed="true"] {
  background: var(--select-tint); color: var(--select);
}

/* --- bonusfase --------------------------------------------------------------- */

.boost-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px; font-size: var(--step--1);
  color: var(--action); background: var(--action-tint);
  border: 1px solid color-mix(in srgb, var(--action) 45%, transparent);
  animation: boost-pulse calc(2400ms / max(var(--motion-scale), .05)) var(--ease-in-out) infinite;
}
.boost-chip b { font-weight: 600; }
@keyframes boost-pulse {
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--action) 14%, transparent); }
}

/* --- scorebord ---------------------------------------------------------------- */

.score-row { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.score-row b { display: block; font-family: var(--font-mono); font-size: var(--step-2);
               letter-spacing: -.03em; }
.score-row small { color: var(--muted); font-size: var(--step--1); }

.spark { display: flex; align-items: flex-end; gap: 4px; height: 34px; margin-top: 6px; }
.spark span { flex: 1; border-radius: 3px 3px 0 0;
              background: color-mix(in srgb, var(--select) 45%, transparent); }
.spark span.now { background: var(--action); }

.score-head { display: flex; gap: var(--sp-6); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.score-head b { display: block; font-family: var(--font-mono); font-size: var(--step-3);
                letter-spacing: -.03em; }
.score-head span { color: var(--muted); font-size: var(--step--1); }

.score-cols { display: flex; align-items: flex-end; gap: 8px; height: 150px; }
.score-cols .col { flex: 1; display: flex; flex-direction: column; align-items: center;
                   justify-content: flex-end; gap: 5px; height: 100%; }
.score-cols .bar { width: 100%; max-width: 46px; border-radius: 6px 6px 2px 2px;
                   background: linear-gradient(180deg,
                     color-mix(in srgb, var(--select) 75%, transparent),
                     color-mix(in srgb, var(--select) 30%, transparent));
                   transition: height var(--dur-slow) var(--ease-out); }
.score-cols .col.now .bar { background: linear-gradient(180deg, var(--action),
                     color-mix(in srgb, var(--action) 35%, transparent)); }
.score-cols .val { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-dim); }
.score-cols .lab { color: var(--muted); font-size: 11px; }
.score-cols.weeks { height: 110px; }

/* --- feiten op een deelkaart ---------------------------------------------------- */

.card-facts { display: grid; gap: 5px; margin: var(--sp-3) 0 0; }
.card-facts > div { display: flex; align-items: baseline; justify-content: space-between;
                    gap: var(--sp-3); font-size: var(--step--1);
                    padding-top: 5px; border-top: 1px solid var(--line-soft); }
.card-facts dt { display: flex; align-items: center; gap: 7px; color: var(--muted); margin: 0; }
.card-facts dd { margin: 0; color: var(--text-dim); text-align: right; }
.card-facts dd.urgent { color: var(--action); font-weight: 600; }

/* --- mindmap ---------------------------------------------------------------------- */

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

.mm-map { position: relative; display: grid; gap: var(--sp-5); justify-items: center; }
.mm-centre {
  display: grid; place-items: center; text-align: center;
  min-width: 190px; max-width: 340px; padding: 14px 22px;
  border-radius: var(--r-lg); font-weight: 600;
  background: var(--memory-tint); border: 1.5px solid var(--memory); color: var(--text);
}
.mm-centre::after {
  content: ''; position: absolute; left: 50%; top: 100%;
  width: 2px; height: var(--sp-5); background: var(--line);
}

.mm-branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
               gap: var(--sp-3); width: 100%; position: relative; }
.mm-branch {
  position: relative; padding: var(--sp-3); border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line); min-height: 118px;
  cursor: pointer;
  transition: border-color var(--dur-quick) var(--ease-out),
              background var(--dur-quick) var(--ease-out);
}
.mm-branch::before {
  content: ''; position: absolute; left: 50%; bottom: 100%;
  width: 2px; height: var(--sp-4); background: var(--line);
}
.mm-branch h5 { margin: 0 0 var(--sp-2); font-size: var(--step--1); font-weight: 600;
                color: var(--text-dim); display: flex; align-items: center; gap: 7px; }
.mm-branch h5::before { content: ''; width: 3px; height: 15px; border-radius: 2px;
                        background: var(--wl, var(--select)); }
.mm-branch.armed { border-color: var(--select); background: var(--select-tint); }
.mm-drop { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; }

.mm-tray { display: flex; flex-wrap: wrap; gap: 8px; min-height: 46px;
           padding: 10px; border-radius: var(--r-md);
           background: var(--surface-2); border: 1px dashed var(--line); }
.mm-tray.is-empty { border-color: var(--line-soft); }
.mm-tray-label { color: var(--muted); font-size: var(--step--1); }

.mm-node {
  padding: 8px 13px; border-radius: 9px; cursor: grab; touch-action: none;
  background: var(--surface-3); border: 1px solid var(--line); color: var(--text-dim);
  font-size: var(--step--1); font-weight: 500; text-align: left;
  transition: border-color var(--dur-quick) var(--ease-out),
              box-shadow var(--dur-quick) var(--ease-out);
}
.mm-node:hover { border-color: var(--select); }
.mm-node[aria-pressed="true"] { border-color: var(--select); background: var(--select-tint);
                                color: var(--text); }
.mm-node.is-dragging { cursor: grabbing; z-index: 30; position: relative;
                       box-shadow: var(--shadow-3); border-color: var(--select);
                       transform-origin: center; }
.mindmap.is-dragging-any .mm-branch { border-style: dashed; }
.mm-node.correct { border-color: var(--ok); color: var(--ok); }
.mm-node.wrong { border-color: var(--no); color: var(--no); }
.mm-fix { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

@media (max-width: 680px) {
  .history-strip { grid-template-columns: 1fr; }
  .hs-list li { grid-template-columns: 1fr auto; }
  .hs-list .what { grid-column: 1 / -1; }
  .score-cols { height: 120px; }
  .mm-node { min-height: 40px; }
}

/* --- account en synchronisatie ---------------------------------------------- */

.setting.account { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--sp-3);
                   padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line-soft); }
.setting.account > div:last-child { align-self: start; }
.account-form { display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
.account-form input {
  padding: 10px 13px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  font: inherit; font-size: var(--step--1);
}
.account-form input:focus-visible { outline: 2px solid var(--select); outline-offset: 1px; }
#acc-melding:empty { display: none; }

/* --- smalle schermen: niets mag breder zijn dan het scherm -------------------
   Een raster- of flexonderdeel is standaard minstens zo breed als zijn inhoud.
   Eén brede tabel of rij duwt daardoor de hele pagina open en dan zoomt je
   telefoon uit. Deze regels zeggen: krimp gerust, en laat het brede stuk zelf
   maar schuiven. */

.study > *, .stats-grid > *, .shell > *, .card { min-width: 0; }
.stage, .rail, .card { max-width: 100%; }

@media (max-width: 680px) {
  .score-cols { overflow-x: auto; }
  .score-cols .col { min-width: 22px; }
  .seg-track { flex-wrap: wrap; row-gap: 3px; }
  .seg { min-width: 4px; }
  .hud-row { row-gap: 6px; }
  .hud-chip { flex: 1 1 auto; min-width: 0; }
  .part-head { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .mastery-dial { align-self: flex-start; }
  .level-chip { max-width: 100%; }
  .toets-strip { flex-direction: column; align-items: flex-start; }
}

/* De bovenbalk staat vast; zonder deze marge springt een element er precies
   onder wanneer de browser ernaartoe scrolt (bij het openen van het
   toetsenbord bijvoorbeeld) en tik je op de balk in plaats van op de knop. */
html { scroll-padding-top: 104px; }
.stage, .bucket, .tokens, .match-col, .mm-branch, .mm-tray, .order-item { scroll-margin-top: 104px; }