/* StudyCore Studenten — gedeelde stijlen (ankerstijl, zelfde systeem als B2B) */
:root {
  --paper:#F6F4EF;
  --surface:#FFFFFF;
  --ink:#171A1F;
  --ink-soft:#4B5563;
  --muted:#8A8F98;
  --line:#E8E5DD;
  --accent:#2E5BFF;
  --accent-deep:#1F44CC;
  --accent-soft:#EBF0FF;
  --green:#279A64;
  --green-soft:#E4F4EC;
  --amber:#DE9A26;
  --amber-soft:#FBF1DC;
  --red:#DE5B4E;
  --red-soft:#FCEAE8;
  --r-card:22px;
  --r-pill:999px;
  --shadow-card:0 1px 2px rgba(23,26,31,.05), 0 10px 30px -12px rgba(23,26,31,.12);
  --shadow-pop:0 2px 4px rgba(31,68,204,.18), 0 14px 34px -10px rgba(46,91,255,.45);
  --font-d:"Bricolage Grotesque",sans-serif;
  --font-b:"Inter",sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  /* oude namen als alias, zodat bestaande pagina-CSS die --bg/--text etc. gebruikt niet breekt */
  --bg:var(--paper);
  --bg2:var(--surface);
  --bg3:var(--paper);
  --border:var(--line);
  --text:var(--ink);
  --r:var(--r-card);
  --teal:var(--accent);
  --teal2:var(--accent);
  --blue:var(--accent-deep);
  --navy:var(--ink);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:rgba(46,91,255,.12)}
html{height:100%;scroll-padding-top:24px}
body{min-height:100vh;background:var(--paper);font-family:var(--font-b);color:var(--ink);-webkit-font-smoothing:antialiased}
button,a,input,select,textarea,[contenteditable="true"]{touch-action:manipulation}
:where(a,button,input,select,textarea,[contenteditable="true"],[tabindex]):focus-visible{outline:3px solid rgba(46,91,255,.34);outline-offset:3px}
.sc-skip-link{position:fixed;z-index:500;top:12px;left:12px;padding:10px 14px;border-radius:12px;background:var(--ink);color:#fff;font-size:.78rem;font-weight:700;text-decoration:none;transform:translateY(-160%);transition:transform 160ms var(--ease-out)}
.sc-skip-link:focus{transform:translateY(0)}

/* ── Telefoonkolom + compacte floating dock ── */
body.has-shell{padding-bottom:calc(94px + env(safe-area-inset-bottom))}
@media(min-width:520px){
  body.has-shell{padding:32px 0 calc(94px + env(safe-area-inset-bottom));background:#EDEAE2}
}
.sc-nav{
  position:fixed;
  bottom:calc(12px + env(safe-area-inset-bottom));
  left:50%;
  width:max-content;
  max-width:calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
  min-height:64px;
  display:flex;
  align-items:center;
  gap:3px;
  padding:7px;
  border:0;
  border-radius:999px;
  background:#111318;
  color:#fff;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    inset 1.8px 3px 0 -2px rgba(255,255,255,.27),
    inset -2px -2px 0 -2px rgba(255,255,255,.24),
    inset -3px -8px 1px -6px rgba(255,255,255,.18),
    inset -.3px -1px 4px 0 rgba(0,0,0,.24),
    inset -1.5px 2.5px 0 -2px rgba(0,0,0,.4),
    inset 0 3px 4px -2px rgba(0,0,0,.4),
    inset 2px -6.5px 1px -4px rgba(0,0,0,.2),
    0 1px 5px rgba(0,0,0,.2),
    0 6px 16px rgba(0,0,0,.16),
    0 28px 64px -24px rgba(8,10,14,.62);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  transform:translateX(-50%);
  isolation:isolate;
  z-index:50;
}
.sc-nav::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  background:transparent;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    inset 1.8px 3px 0 -2px rgba(255,255,255,.27),
    inset -2px -2px 0 -2px rgba(255,255,255,.24),
    inset -3px -8px 1px -6px rgba(255,255,255,.18),
    inset -.3px -1px 4px 0 rgba(0,0,0,.24),
    inset -1.5px 2.5px 0 -2px rgba(0,0,0,.4),
    inset 0 3px 4px -2px rgba(0,0,0,.4),
    inset 2px -6.5px 1px -4px rgba(0,0,0,.2);
  pointer-events:none;
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .sc-nav{
    background:rgba(7,9,13,.68);
    -webkit-backdrop-filter:blur(8px) saturate(150%);
    backdrop-filter:blur(8px) url(#sc-dock-liquid-refraction) saturate(150%);
  }
}
.sc-nav-filter{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.sc-nav-main{position:relative;z-index:2;display:flex;flex:0 0 auto;min-width:0;gap:3px}
.sc-brand,.sc-nav-account{display:none}
.sc-nav-active-indicator{
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  width:0;
  height:0;
  border:0;
  border-radius:999px;
  background:rgba(241,243,248,.8);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    inset 2px 1px 0 -1px rgba(255,255,255,.27),
    inset -1.5px -1px 0 -1px rgba(255,255,255,.24),
    inset -2px -6px 1px -5px rgba(255,255,255,.18),
    inset -1px 2px 3px -1px rgba(0,0,0,.4),
    inset 0 -4px 1px -2px rgba(0,0,0,.2),
    0 3px 6px rgba(0,0,0,.16);
  opacity:0;
  pointer-events:none;
}
.sc-nav-active-indicator.is-visible{opacity:1}
.sc-nav-active-indicator.is-animated{
  transition:
    transform 400ms cubic-bezier(1,0,.4,1),
    opacity 160ms ease;
}
.sc-nav-active-indicator.is-shifting{
  animation:sc-dock-liquid-shift 440ms ease;
}
@keyframes sc-dock-liquid-shift{
  0%,100%{scale:1 1}
  50%{scale:var(--sc-dock-stretch,1.1) 1}
}
.sc-nav-item{
  position:relative;
  z-index:2;
  width:clamp(44px,13vw,50px);
  height:50px;
  min-height:50px;
  flex:none;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:15px;
  color:#E1E5EC;
  text-decoration:none;
  font-family:var(--font-b);
  transition:background-color 160ms ease,color 160ms ease,transform 100ms var(--ease-out);
}
.sc-nav-item svg{width:21px;height:21px;stroke-width:2;stroke:currentColor}
.sc-nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.sc-nav-item.active{background:#fff;color:var(--accent)}
.sc-nav.sc-dock-enhanced .sc-nav-item.active{background:transparent;transition-property:color,transform}
.sc-nav-item.active svg{stroke:currentColor}
.sc-nav-item:active{transform:scale(.96)}
.sc-nav-item:focus-visible{outline-color:#9DB4FF;outline-offset:3px}
.sc-nav-label{display:none}
/* oude sidebar-footer (thema/uitloggen) hangt nu los boven de nav, verborgen tenzij aangeroepen */
.sc-foot{display:none}
.sc-dock-separator{position:relative;z-index:2;display:none}

/* ── Gedeelde StudyCore select + datum-wheel ── */
.sc-native-control{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  opacity:0!important;
  pointer-events:none!important;
}
.sc-select,.sc-date-control{position:relative;display:block;width:100%;min-width:0}
.sc-select-context-material-role,.sc-select-context-source-role{margin-top:8px}
.sc-select-trigger,.sc-date-trigger{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1.5px solid var(--line);
  border-radius:14px;
  background:var(--paper);
  color:var(--ink);
  padding:11px 13px;
  font:600 .82rem/1.35 var(--font-b);
  text-align:left;
  cursor:pointer;
  box-shadow:0 1px 1px rgba(23,26,31,.02);
  transition:border-color 160ms ease,box-shadow 180ms ease,background-color 160ms ease,transform 100ms var(--ease-out);
}
.sc-select-trigger:hover,.sc-date-trigger:hover{border-color:#C9C5BB;background:#FBFAF7}
.sc-select-trigger:active,.sc-date-trigger:active{transform:scale(.995)}
.sc-select-trigger[aria-expanded="true"],.sc-date-trigger[aria-expanded="true"]{
  border-color:var(--accent);
  background:var(--surface);
  box-shadow:0 0 0 4px rgba(46,91,255,.1);
}
.sc-select-trigger[aria-invalid="true"],.sc-date-trigger[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 4px rgba(222,91,78,.1)}
.sc-select-trigger:disabled,.sc-date-trigger:disabled{opacity:.5;cursor:not-allowed;transform:none}
.sc-select-value,.sc-date-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-select-trigger.is-placeholder .sc-select-value,.sc-date-trigger.is-placeholder .sc-date-value{color:var(--ink-soft);font-weight:500}
.sc-select-chevron,.sc-date-chevron{flex:none;color:var(--ink-soft);transition:transform 180ms var(--ease-out)}
.sc-select-trigger[aria-expanded="true"] .sc-select-chevron{transform:rotate(180deg)}
.sc-date-icon{flex:none;color:var(--accent)}
.sc-select-panel{
  position:fixed;
  z-index:320;
  overflow:auto;
  overscroll-behavior:contain;
  padding:6px;
  border:1px solid rgba(232,229,221,.9);
  border-radius:17px;
  background:rgba(255,255,255,.98);
  color:var(--ink);
  box-shadow:0 2px 5px rgba(23,26,31,.07),0 22px 56px -22px rgba(23,26,31,.34);
  opacity:0;
  transform:translateY(-5px) scale(.985);
  transform-origin:top center;
  transition:opacity 150ms ease,transform 190ms var(--ease-out);
}
.sc-select-panel[data-side="top"]{transform:translateY(5px) scale(.985);transform-origin:bottom center}
.sc-select-panel.is-open{opacity:1;transform:none}
.sc-select-panel[hidden]{display:none}
.sc-select-option{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 10px;
  border-radius:11px;
  color:var(--ink-soft);
  font:600 .78rem/1.35 var(--font-b);
  cursor:pointer;
  user-select:none;
}
.sc-select-option+.sc-select-option{margin-top:2px}
.sc-select-option:hover,.sc-select-option.is-active{background:var(--paper);color:var(--ink)}
.sc-select-option[aria-selected="true"]{background:var(--accent-soft);color:var(--accent-deep)}
.sc-select-option[aria-disabled="true"]{opacity:.42;cursor:not-allowed}
.sc-select-check{width:24px;height:24px;display:grid;place-items:center;flex:none;border-radius:8px;color:transparent}
.sc-select-option[aria-selected="true"] .sc-select-check{color:var(--accent)}

body.sc-control-modal-open{overflow:hidden}
.sc-date-dialog{
  position:fixed;
  inset:50% auto auto 50%;
  width:min(520px,calc(100vw - 28px));
  max-width:none;
  max-height:none;
  overflow:visible;
  margin:0;
  padding:0;
  border:0;
  border-radius:27px;
  background:transparent;
  color:var(--ink);
  opacity:0;
  transform:translate(-50%,calc(-50% + 8px)) scale(.985);
  transition:opacity 170ms ease,transform 220ms var(--ease-out),display 220ms allow-discrete,overlay 220ms allow-discrete;
}
.sc-date-dialog[open]{opacity:1;transform:translate(-50%,-50%)}
.sc-date-dialog.is-aligning .sc-date-sheet{visibility:hidden}
.sc-date-dialog::backdrop{background:rgba(23,26,31,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.sc-date-sheet{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.78);
  border-radius:27px;
  background:var(--surface);
  box-shadow:0 3px 8px rgba(23,26,31,.09),0 30px 90px -28px rgba(23,26,31,.52);
}
.sc-date-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 22px 15px}
.sc-date-kicker{display:block;margin-bottom:5px;color:var(--accent-deep);font-size:.63rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.sc-date-head h2{font:700 1.32rem/1.1 var(--font-d);letter-spacing:-.03em}
.sc-date-head p{min-height:18px;margin-top:6px;color:var(--ink-soft);font-size:.75rem;font-weight:550}
.sc-date-close{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  flex:none;
  border:0;
  border-radius:13px;
  background:var(--paper);
  color:var(--ink-soft);
  font:500 1.35rem/1 var(--font-b);
  cursor:pointer;
  transition:background-color 160ms ease,color 160ms ease,transform 100ms var(--ease-out);
}
.sc-date-close:hover{background:var(--accent-soft);color:var(--accent-deep)}
.sc-date-close:active{transform:scale(.94)}
.sc-date-wheels{
  display:grid;
  grid-template-columns:minmax(70px,.72fr) minmax(128px,1.36fr) minmax(88px,.92fr);
  gap:4px;
  margin:0 14px;
  padding:10px 8px;
  border:1px solid var(--line);
  border-radius:21px;
  background:var(--paper);
}
.sc-wheel-column{position:relative;min-width:0}
.sc-wheel-column::after{
  content:"";
  position:absolute;
  z-index:0;
  top:113px;
  left:2px;
  right:2px;
  height:44px;
  border:1px solid rgba(46,91,255,.14);
  border-radius:12px;
  background:rgba(46,91,255,.075);
  pointer-events:none;
}
.sc-wheel-label{display:block;height:17px;margin:0 0 8px;color:var(--ink-soft);font-size:.59rem;font-weight:750;letter-spacing:.08em;text-align:center;text-transform:uppercase}
.sc-wheel{
  position:relative;
  z-index:1;
  height:220px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
  padding-block:88px;
  perspective:520px;
  cursor:grab;
  touch-action:pan-y;
  mask-image:linear-gradient(to bottom,transparent 0,#000 19%,#000 81%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 19%,#000 81%,transparent 100%);
}
.sc-wheel::-webkit-scrollbar{display:none}
.sc-wheel.is-dragging{cursor:grabbing;scroll-snap-type:none}
.sc-wheel-option{
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  scroll-snap-align:center;
  color:var(--ink-soft);
  font:650 .87rem/1 var(--font-b);
  font-variant-numeric:tabular-nums;
  opacity:var(--wheel-opacity,.84);
  transform:rotateX(var(--wheel-rotate,0deg)) scale(var(--wheel-scale,1));
  transform-origin:center;
  backface-visibility:hidden;
  user-select:none;
}
.sc-wheel-column-month .sc-wheel-option{font-size:.8rem}
.sc-wheel-option[aria-selected="true"]{color:var(--ink);font-weight:750}
.sc-date-actions{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:16px;
  padding:13px 18px 15px;
  border-top:1px solid var(--line);
}
.sc-date-action-group{display:flex;align-items:center;gap:8px}
.sc-date-actions button{
  min-height:44px;
  border:0;
  border-radius:999px;
  padding:10px 15px;
  font:700 .74rem/1 var(--font-b);
  white-space:nowrap;
  cursor:pointer;
  transition:background-color 160ms ease,color 160ms ease,transform 100ms var(--ease-out);
}
.sc-date-actions button:active{transform:scale(.97)}
.sc-date-clear,.sc-date-cancel{background:transparent;color:var(--ink-soft)}
.sc-date-clear:hover,.sc-date-cancel:hover{background:var(--paper);color:var(--ink)}
.sc-date-confirm{background:var(--accent);color:#fff;box-shadow:0 7px 20px -10px rgba(46,91,255,.7)}
.sc-date-confirm:hover{background:var(--accent-deep)}
@starting-style{.sc-date-dialog[open]{opacity:0;transform:translate(-50%,calc(-50% + 8px)) scale(.985)}}
@media(max-width:600px){
  .sc-date-dialog{inset:auto 0 0;width:100%;margin:0;border-radius:27px 27px 0 0;transform:translateY(22px)}
  .sc-date-dialog[open]{transform:none}
  .sc-date-sheet{border-width:1px 0 0;border-radius:27px 27px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .sc-date-head{padding:19px 18px 13px}
  .sc-date-wheels{margin:0 10px;padding-inline:5px}
  .sc-date-actions{padding-inline:14px}
  .sc-date-actions button{padding-inline:12px}
  @starting-style{.sc-date-dialog[open]{opacity:0;transform:translateY(22px)}}
}
@media(max-width:360px){
  .sc-date-actions{gap:8px;padding-inline:12px}
  .sc-date-action-group{gap:5px}
  .sc-date-actions button{padding-inline:7px;font-size:.67rem}
}

/* ── Telefoonkolom = .page ── */
.page{max-width:430px;margin:0 auto;padding:28px 20px 20px;background:var(--paper);min-height:100vh}
@media(min-width:520px){
  .page{min-height:calc(100vh - 64px);border-radius:36px;box-shadow:0 24px 80px -24px rgba(23,26,31,.28);overflow:hidden}
}
.sc-logo-mark{width:36px;height:36px;border-radius:10px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sc-logo-mark svg{width:19px;height:19px}
.sc-logo-name{font-family:var(--font-d);font-size:1.15rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.sc-logo-sub{font-size:.68rem;color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.page-title{font-family:var(--font-d);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin-bottom:4px;color:var(--ink)}
.page-sub{font-size:.83rem;color:var(--muted);margin-bottom:22px;font-weight:500}
.card{background:var(--surface);color:var(--text);border:1px solid rgba(232,229,221,.7);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:16px 18px}
.btn{display:inline-flex;align-items:center;gap:7px;padding:12px 20px;border-radius:var(--r-pill);border:none;background:var(--accent);color:#fff;font-family:var(--font-d);font-size:.92rem;font-weight:600;cursor:pointer;transition:background .15s,transform .1s;text-decoration:none;box-shadow:var(--shadow-pop)}
.btn:hover{background:var(--accent-deep)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:default;box-shadow:none}
.btn-ghost{background:var(--surface);color:var(--ink-soft);border:1.5px solid var(--line);box-shadow:none;font-family:var(--font-b);font-weight:600}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;padding:3.5px 10px;border-radius:var(--r-pill)}
.badge-red{background:var(--red-soft);color:#B8453A}
.badge-amber{background:var(--amber-soft);color:#A9761B}
.badge-green{background:var(--green-soft);color:var(--green)}
.badge-muted{background:var(--paper);color:var(--muted);border:1px solid var(--line)}
.prog{background:var(--line);border-radius:var(--r-pill);height:6px;overflow:hidden}
.prog-fill{height:100%;width:100%;background:var(--accent);border-radius:var(--r-pill);transform:scaleX(var(--p,0));transform-origin:left center;transition:transform .5s ease}

/* ── Reveal-animatie (blur-vrij, zelfde als B2B) ── */
.reveal{opacity:0;transform:translateY(10px);transition:opacity 280ms var(--ease-out),transform 280ms var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* ===== Examenmodus: app-brede visuele stand ===== */
body.exam-mode{background:#12151A;transition:background .8s ease}
body.exam-mode .page{background:#12151A;transition:background .8s ease}
body.exam-mode .page-title,
body.exam-mode .sc-logo-name,
body.exam-mode h1{color:#F3F1EC}
body.exam-mode .page-sub{color:#9AA0AA}

/* Alle .card's (gedeeld over elke pagina) hertinten in één keer, i.p.v. elke
   pagina apart herstijlen. Overschrijft de gealiaste variabelen zodat content
   die var(--text)/var(--muted)/var(--border)/var(--bg2) gebruikt vanzelf meegaat. */
body.exam-mode .card{
  background:#1B1F26;
  border-color:rgba(255,255,255,.08);
  box-shadow:none;
  --ink:#F3F1EC;
  --text:#F3F1EC;
  --ink-soft:#C7CBD1;
  --muted:#9AA0AA;
  --line:rgba(255,255,255,.1);
  --border:rgba(255,255,255,.1);
  --bg2:#242932;
  --bg3:#242932;
  --surface:#242932;
  --paper:#242932;
  --accent-soft:rgba(46,91,255,.18);
  --green-soft:rgba(39,154,100,.18);
  --amber-soft:rgba(222,154,38,.18);
  --red-soft:rgba(222,91,78,.18);
}
body.exam-mode .sc-select-trigger,
body.exam-mode .sc-date-trigger,
body.exam-mode .sc-date-wheels{
  border-color:rgba(255,255,255,.1);
  background:#242932;
  color:#F3F1EC;
}
body.exam-mode .sc-select-trigger:hover,
body.exam-mode .sc-date-trigger:hover{border-color:rgba(157,180,255,.42);background:#292F39}
body.exam-mode .sc-select-panel,
body.exam-mode .sc-date-sheet{border-color:rgba(255,255,255,.1);background:#1B1F26;color:#F3F1EC}
body.exam-mode .sc-select-option{color:#C7CBD1}
body.exam-mode .sc-select-option:hover,
body.exam-mode .sc-select-option.is-active{background:#242932;color:#F3F1EC}
body.exam-mode .sc-select-option[aria-selected="true"]{background:rgba(46,91,255,.18);color:#C9D5FF}
body.exam-mode .sc-date-head p,
body.exam-mode .sc-wheel-label{color:#9AA0AA}
body.exam-mode .sc-date-close{background:#242932;color:#C7CBD1}
body.exam-mode .sc-wheel-column::after{border-color:rgba(157,180,255,.18);background:rgba(46,91,255,.14)}
body.exam-mode .sc-wheel-option{color:#C7CBD1}
body.exam-mode .sc-wheel-option[aria-selected="true"]{color:#F3F1EC}

.em-mode-marker{position:fixed;top:0;left:0;right:0;height:34px;display:flex;align-items:center;justify-content:center;gap:8px;background:#0D1015;color:#C9CEFF;border-bottom:1px solid rgba(157,180,255,.14);font-family:var(--font-b);font-size:.72rem;font-weight:600;letter-spacing:.02em;text-decoration:none;z-index:60;transition:background .2s,color .2s}
.em-mode-marker .em-mode-pulse{width:7px;height:7px;border-radius:50%;background:#7D8CFF;animation:emBeat 4.5s ease-in-out infinite}
.em-mode-marker .em-mode-action{display:inline-flex;align-items:center;gap:3px;margin-left:3px;padding-left:10px;border-left:1px solid rgba(201,206,255,.22);color:#fff;font-weight:700}
.em-mode-marker:hover{background:#171B23;color:#fff}
.em-mode-marker:focus-visible{outline:3px solid #9DB4FF;outline-offset:-3px}
body.exam-mode .page{padding-top:44px}

body.exam-mode .sc-nav{opacity:.4;filter:saturate(.5);transition:opacity .6s ease}
body.exam-mode .sc-nav:hover{opacity:1;filter:none}

body.exam-mode::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:40;box-shadow:inset 0 0 140px 50px rgba(0,0,0,.5);opacity:0;animation:emVignette .9s ease forwards}

@keyframes emBeat{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.5);opacity:1}}
@keyframes emVignette{to{opacity:1}}
@media (max-width:360px){.em-mode-marker{font-size:.67rem;gap:6px}.em-mode-marker .em-mode-action{padding-left:7px}}
@media (prefers-reduced-motion:reduce){.em-mode-marker .em-mode-pulse{animation:none}body.exam-mode::after{animation:none;opacity:1}}

.guest-mode-marker{position:fixed;top:0;left:0;right:0;height:34px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent-deep);color:#EAF0FF;border-bottom:1px solid rgba(255,255,255,.16);font-family:var(--font-b);font-size:.72rem;font-weight:600;letter-spacing:.02em;text-decoration:none;z-index:60;transition:background .2s}
.guest-mode-marker .guest-mode-action{display:inline-flex;align-items:center;gap:3px;margin-left:3px;padding-left:10px;border-left:1px solid rgba(234,240,255,.3);color:#fff;font-weight:700}
.guest-mode-marker:hover{background:var(--accent)}
.guest-mode-marker:focus-visible{outline:3px solid #C7D4FF;outline-offset:-3px}
body.guest-mode .page{padding-top:44px}
@media (max-width:360px){.guest-mode-marker{font-size:.67rem;gap:6px}.guest-mode-marker .guest-mode-action{padding-left:7px}}

/* ===== Volwaardige desktop-shell met compacte floating dock ===== */
@media (min-width:1024px){
  body.has-shell{
    display:block;
    min-height:100dvh;
    padding:0;
    background:#EFEDE7;
  }
  body.has-shell .page{
    width:100%;
    max-width:980px;
    min-height:100dvh;
    margin:0 auto;
    padding:42px clamp(32px,4vw,56px) 132px;
    overflow:visible;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  body.has-shell.sc-page-home .page,
  body.has-shell.sc-page-planning .page,
  body.has-shell.sc-page-groei .page,
  body.has-shell.sc-page-notes .page{
    max-width:1240px;
  }
  body.has-shell.sc-page-vakken .page{
    max-width:1080px;
    padding:32px clamp(28px,3vw,40px) 120px;
  }
  .sc-nav,
  body.notes-page .sc-nav{
    inset:auto auto 24px 50%;
    width:auto;
    max-width:calc(100vw - 32px);
    min-height:64px;
    transform:translateX(-50%);
    padding:7px;
    display:flex;
    align-items:center;
    flex-direction:row;
    gap:3px;
  }
  .sc-brand{display:none}
  .sc-nav-main{display:flex;flex:0 0 auto;gap:3px;margin:0}
  .sc-nav-item{
    position:relative;
    width:50px;
    height:50px;
    min-height:50px;
    flex:none;
    display:grid;
    place-items:center;
    padding:0;
    border-radius:15px;
    color:#E1E5EC;
    transition:background-color 160ms ease,color 160ms ease,transform 100ms var(--ease-out);
  }
  .sc-nav-item svg{width:21px;height:21px;stroke:currentColor}
  .sc-nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
  .sc-nav-item.active{background:#fff;color:var(--accent)}
  .sc-nav-item.active svg{stroke:currentColor}
  .sc-nav-item:active{transform:scale(.96)}
  .sc-nav-label{
    display:block;
    position:absolute;
    left:50%;
    bottom:calc(100% + 13px);
    z-index:2;
    width:max-content;
    max-width:160px;
    padding:7px 9px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;
    background:var(--ink);
    color:#fff;
    box-shadow:0 10px 28px -14px rgba(23,26,31,.7);
    font:650 .66rem/1 var(--font-b);
    opacity:0;
    pointer-events:none;
    transform:translate(-50%,5px) scale(.98);
    transform-origin:bottom center;
    transition:opacity 140ms ease,transform 170ms var(--ease-out);
  }
  .sc-nav-item:hover .sc-nav-label,
  .sc-nav-item:focus-visible .sc-nav-label,
  .sc-nav-account:hover .sc-nav-label,
  .sc-nav-account:focus-visible .sc-nav-label{opacity:1;transform:translate(-50%,0) scale(1)}
  .sc-nav-item:focus-visible .sc-nav-label,
  .sc-nav-account:focus-visible .sc-nav-label{transition:none}
  .sc-dock-separator{display:block;width:1px;height:30px;margin:0 5px;background:rgba(255,255,255,.15)}
  .sc-nav-account{
    position:relative;
    z-index:2;
    width:50px;
    height:50px;
    min-height:50px;
    display:grid;
    place-items:center;
    margin:0;
    padding:0;
    border-radius:15px;
    color:#E1E5EC;
    text-decoration:none;
    transition:background-color 160ms ease,color 160ms ease,transform 100ms var(--ease-out);
  }
  .sc-nav-account:hover{background:rgba(255,255,255,.08);color:#fff}
  .sc-nav-account.active{background:#fff;color:var(--accent)}
  .sc-nav.sc-dock-enhanced .sc-nav-account.active{background:transparent;transition-property:color,transform}
  .sc-nav-account:active{transform:scale(.96)}
  .sc-nav-item:focus-visible,.sc-nav-account:focus-visible{outline-color:#9DB4FF;outline-offset:3px}
  .sc-nav-account>span:not(.sc-nav-avatar):not(.sc-nav-label){display:none}
  .sc-nav-avatar{width:auto;height:auto;display:grid;place-items:center;border-radius:0;background:transparent;color:currentColor}
  .sc-nav-avatar svg{width:21px;height:21px}
  body.has-shell .page :is(.greet h1,.topbar h1){font-size:clamp(1.9rem,2.5vw,2.35rem);letter-spacing:-.04em;text-wrap:balance}
  body.has-shell .page :is(.greet .date,.topbar p){font-size:.86rem}
  body.exam-mode,
  body.guest-mode{padding-top:0}
  body.has-shell.exam-mode{background:#12151A}
  body.exam-mode .page,
  body.guest-mode .page{padding-top:56px}
  body.has-shell.exam-mode .page{background:#12151A}
  body.exam-mode .em-mode-marker,
  body.guest-mode .guest-mode-marker{left:0}
  body.exam-mode .sc-nav{opacity:.78}

  /* Mobiele sheets worden op desktop compacte, gecentreerde dialogen. */
  body.sc-page-home .ef-tip-sheet,
  body.sc-page-planning .sheet{
    top:50%;
    bottom:auto;
    max-width:460px;
    border-radius:26px;
    opacity:0;
    transform:translate(-50%,-46%) scale(.98);
    transform-origin:center;
    transition:opacity 180ms var(--ease-out),transform 220ms var(--ease-out);
  }
  body.sc-page-home .ef-tip-sheet.show,
  body.sc-page-planning .sheet.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
  body.sc-page-home .ef-tip-grab,
  body.sc-page-planning .grab{display:none}

  /* Statusmeldingen blijven boven de dock leesbaar. */
  body.has-shell .toast{bottom:112px}
}

.home-side-stack{display:contents}

@media (min-width:1180px){
  /* Home: primaire sessie links, planning en hulp rechts. */
  body.sc-page-home .page{
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(320px,.8fr);
    grid-auto-rows:max-content;
    align-content:start;
    gap:0 24px;
  }
  body.sc-page-home .page>header{grid-column:1/-1}
  body.sc-page-home .page>#daystartChip{grid-column:1/-1;justify-self:start}
  body.sc-page-home .page>#sess-wrap{grid-column:1;grid-row:3;min-width:0;align-self:start}
  body.sc-page-home .page>.home-side-stack{
    grid-column:2;
    grid-row:3;
    display:flex;
    flex-direction:column;
    align-self:start;
    min-width:0;
  }
  body.sc-page-home .home-side-stack>.agenda{order:-1;margin-top:14px;min-width:0}
  body.sc-page-home #sess-wrap>.session{height:auto;margin-top:14px;padding:26px 24px 22px}
  body.sc-page-home .session h2{font-size:1.65rem}
  body.sc-page-home .session .topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
  body.sc-page-home .session .topic-overflow{display:block;grid-column:1/-1;margin:11px 2px 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.09);color:rgba(244,243,239,.64);font-size:.76rem;font-weight:600;line-height:1.4}
  body.sc-page-home .session .start-btn{max-width:300px;margin-left:auto}
  body.sc-page-home .agenda .card{padding:8px 18px}

  /* Leren: één vak benut de inhoudsbreedte; meerdere vakken vormen vanzelf kolommen. */
  body.sc-page-vakken .vakken{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
  body.sc-page-vakken .vak-card{height:100%;padding:20px}

  /* Agenda: dag/week links, agenda-integraties als vaste rechterkolom. */
  body.sc-page-planning #mainWrap{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(340px,.75fr);
    grid-template-rows:max-content max-content max-content;
    align-items:start;
    gap:0 24px;
    margin-top:20px;
  }
  body.sc-page-planning #mainWrap>.planner-toolbar{grid-column:1;grid-row:1;min-width:0}
  body.sc-page-planning .planner-toolbar>.seg{margin-top:0}
  body.sc-page-planning #mainWrap>.agenda-notification-stack{grid-column:1;grid-row:2;min-width:0}
  body.sc-page-planning #mainWrap>.view{grid-column:1;grid-row:3}
  body.sc-page-planning #mainWrap>.sync-note{grid-column:1;grid-row:4}
  body.sc-page-planning #mainWrap>.calendar-sticky-boundary{
    grid-column:2;
    grid-row:1/span 3;
    min-width:0;
    height:100%;
  }
  body.sc-page-planning .calendar-route-slot{display:block}
  body.sc-page-planning .calendar-route-slot>.route-guide{margin-top:0}
  body.sc-page-planning .calendar-route-slot.has-guide+.calendar-sync-card{margin-top:14px}
  body.sc-page-planning .calendar-sticky-boundary>.calendar-sync-card{
    position:sticky;
    top:32px;
    margin-top:0;
  }

  /* Groei: vaardigheden en leerstatistieken naast elkaar. */
  body.sc-page-groei .page{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);
    align-content:start;
    gap:0 24px;
  }
  body.sc-page-groei .page>header{grid-column:1/-1}
  body.sc-page-groei .ef-section{grid-column:1;margin-top:28px}
  body.sc-page-groei .stats-section{grid-column:2;margin-top:28px}

  /* Notities gebruikt zijn bestaande brede editor binnen dezelfde desktop-shell. */
  body.notes-page .page{max-width:1240px;padding:42px clamp(32px,4vw,56px) 132px}

}

/* ── Gedeelde statusbadges, toast-stack en limietmodal ── */
.sc-status-badge{
  --sc-status:#606772;
  --sc-status-bg:#F0EFEA;
  --sc-status-line:#DDDAD2;
  max-width:100%;
  min-height:28px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px 4px 6px;
  border:1px solid var(--sc-status-line);
  border-radius:var(--r-pill);
  background:var(--sc-status-bg);
  color:var(--sc-status);
  font:750 .65rem/1.2 var(--font-b);
  letter-spacing:.005em;
  box-shadow:0 1px 2px rgba(23,26,31,.05);
}
.sc-status-badge[data-status="info"]{--sc-status:var(--accent-deep);--sc-status-bg:var(--accent-soft);--sc-status-line:#CFD9FF}
.sc-status-badge[data-status="loading"]{--sc-status:var(--accent-deep);--sc-status-bg:var(--accent-soft);--sc-status-line:#CFD9FF}
.sc-status-badge[data-status="success"]{--sc-status:var(--green);--sc-status-bg:var(--green-soft);--sc-status-line:#C6E8D7}
.sc-status-badge[data-status="warning"]{--sc-status:#A66C0E;--sc-status-bg:var(--amber-soft);--sc-status-line:#F0D79D}
.sc-status-badge[data-status="error"],
.sc-status-badge[data-status="danger"]{--sc-status:#B8453A;--sc-status-bg:var(--red-soft);--sc-status-line:#F2C8C3}
.sc-status-badge-icon{
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  flex:none;
  border-radius:50%;
  background:rgba(255,255,255,.58);
}
.sc-status-badge-icon svg{width:13px;height:13px}
.sc-status-badge-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-status-badge[data-pulse="true"] .sc-status-badge-icon{animation:sc-status-pulse 1.4s ease-in-out infinite}
.sc-status-badge-pop .sc-status-badge-icon{animation:sc-feedback-pop 180ms var(--ease-out)}
.sc-feedback-spinner{animation:sc-feedback-spin .78s linear infinite}
.sc-feedback-pop{animation:sc-feedback-pop 180ms var(--ease-out)}

.sc-toast-region{
  position:fixed;
  z-index:690;
  right:12px;
  bottom:calc(16px + env(safe-area-inset-bottom));
  left:12px;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
body.has-shell .sc-toast-region{bottom:calc(88px + env(safe-area-inset-bottom))}
.sc-toast-stack{
  width:min(400px,100%);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  pointer-events:none;
}
.sc-toast{
  --sc-toast-accent:#606772;
  --sc-toast-tint:#F0EFEA;
  --sc-toast-line:#DDDAD2;
  --sc-toast-drag:0px;
  position:relative;
  min-height:64px;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 30px;
  gap:9px;
  align-items:start;
  overflow:hidden;
  padding:11px 10px 11px 11px;
  border:1px solid var(--sc-toast-line);
  border-radius:18px;
  background:rgba(255,255,255,.98);
  color:var(--ink);
  box-shadow:0 2px 5px rgba(23,26,31,.08),0 20px 52px -24px rgba(23,26,31,.42);
  opacity:0;
  transform:translate3d(var(--sc-toast-drag),10px,0) scale(.985);
  transform-origin:bottom center;
  transition:opacity 150ms ease,transform 190ms var(--ease-out),border-color 160ms ease;
  pointer-events:auto;
  touch-action:pan-y;
  will-change:transform,opacity;
}
.sc-toast[data-status="info"],
.sc-toast[data-status="loading"]{--sc-toast-accent:var(--accent-deep);--sc-toast-tint:var(--accent-soft);--sc-toast-line:#CFD9FF}
.sc-toast[data-status="success"]{--sc-toast-accent:var(--green);--sc-toast-tint:var(--green-soft);--sc-toast-line:#C6E8D7}
.sc-toast[data-status="warning"]{--sc-toast-accent:#A66C0E;--sc-toast-tint:var(--amber-soft);--sc-toast-line:#F0D79D}
.sc-toast[data-status="error"],
.sc-toast[data-status="danger"]{--sc-toast-accent:#B8453A;--sc-toast-tint:var(--red-soft);--sc-toast-line:#F2C8C3}
.sc-toast.is-visible{opacity:1;transform:translate3d(var(--sc-toast-drag),0,0) scale(1)}
.sc-toast.is-dragging{transition:none}
.sc-toast.is-leaving{opacity:0;transform:translate3d(calc(100% + 28px),0,0) scale(.98)}
.sc-toast.is-leaving-left{opacity:0;transform:translate3d(calc(-100% - 28px),0,0) scale(.98)}
.sc-toast-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--sc-toast-tint);
  color:var(--sc-toast-accent);
}
.sc-toast-body{min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding-top:1px}
.sc-toast-heading{width:100%;max-width:100%;display:flex;align-items:flex-start;gap:7px}
.sc-toast-tag{
  flex:none;
  padding:3px 6px;
  border-radius:var(--r-pill);
  background:var(--sc-toast-tint);
  color:var(--sc-toast-accent);
  font-size:.59rem;
  font-weight:800;
}
.sc-toast-title{
  flex:1;
  min-width:0;
  color:var(--ink);
  font:700 .74rem/1.35 var(--font-b);
  overflow-wrap:anywhere;
  white-space:normal;
}
.sc-toast-description{max-width:100%;margin-top:5px;color:var(--ink-soft);font-size:.68rem;line-height:1.45;overflow-wrap:anywhere}
.sc-toast-action{
  min-height:28px;
  margin-top:7px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--sc-toast-accent);
  font:750 .68rem var(--font-b);
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--sc-toast-accent),transparent 55%);
  text-underline-offset:3px;
  cursor:pointer;
}
.sc-toast-close{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}

body.sc-limit-modal-open{overflow:hidden}
/* Upgrade- en tegoedvenster: warm papier bovenin, witte onderkant, geen
   badge of gloed. Zelfde taal als de goedgekeurde tegoedschets. */
.sc-limit-dialog{
  position:fixed;
  inset:0;
  width:min(480px,calc(100vw - 24px));
  max-width:none;
  max-height:min(780px,calc(100dvh - 24px));
  margin:auto;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:26px;
  background:transparent;
  color:var(--ink);
}
.sc-limit-dialog::backdrop{background:rgba(23,26,31,.32)}
.sc-limit-dialog [hidden]{display:none!important}
.sc-limit-surface{
  position:relative;
  max-height:min(780px,calc(100dvh - 24px));
  overflow:auto;
  overscroll-behavior:contain;
  border-radius:26px;
  background:var(--surface);
  box-shadow:0 2px 6px rgba(23,26,31,.08),0 30px 70px -20px rgba(23,26,31,.34);
  opacity:0;
  transform:translateY(10px) scale(.98);
  transition:opacity 280ms var(--ease-out),transform 280ms var(--ease-out);
}
.sc-limit-dialog.is-open .sc-limit-surface{opacity:1;transform:none}
.sc-limit-dialog.is-closing .sc-limit-surface{opacity:0;transform:translateY(6px) scale(.985);transition-duration:180ms}
.sc-limit-hero{position:relative;padding:22px 26px 20px;background:var(--paper)}
.sc-limit-close{
  position:absolute;
  z-index:4;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:11px;
  background:var(--surface);
  color:var(--muted);
  cursor:pointer;
  transition:color 150ms ease,transform 120ms var(--ease-out);
}
.sc-limit-close::after{content:"";position:absolute;inset:-4px}
.sc-limit-close:active{transform:scale(.94)}
.sc-limit-badge-slot{display:block;margin-bottom:10px}
.sc-limit-badge-slot:empty{display:none}
.sc-limit-eyebrow{padding-right:44px;color:var(--muted);font:700 .6875rem/1.3 var(--font-b);letter-spacing:.08em;text-transform:uppercase}
.sc-limit-hero h2{margin:6px 0 8px;padding-right:32px;color:var(--ink);font:800 1.6875rem/1.1 var(--font-d);letter-spacing:-.025em;text-wrap:balance}
#sc-limit-description{color:var(--ink-soft);font-size:.9rem;line-height:1.55}
.sc-limit-visual{margin-top:14px}
.sc-limit-meter{margin-top:16px;padding:12px;border-radius:14px;background:var(--surface)}
.sc-limit-meter-copy{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:.75rem}
.sc-limit-meter-copy strong{color:var(--ink);font-size:.78rem;font-variant-numeric:tabular-nums}
.sc-limit-meter-track{height:6px;margin-top:8px;overflow:hidden;border-radius:var(--r-pill);background:var(--line)}
.sc-limit-meter-track span{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.sc-limit-body{padding:18px 26px 22px}
.sc-limit-plan{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-bottom:10px}
.sc-limit-plan b{font:700 1.125rem var(--font-d);white-space:nowrap}
.sc-limit-plan span{color:var(--muted);font-size:.8125rem;font-variant-numeric:tabular-nums}
.sc-limit-next{margin-bottom:12px;color:var(--ink-soft);font-size:.84rem;line-height:1.5}
.sc-limit-features{display:grid;gap:9px;margin:0 0 16px;padding:0;list-style:none}
.sc-limit-features:empty{display:none}
.sc-limit-features li{display:flex;gap:10px;align-items:flex-start;color:var(--ink);font-size:.875rem;line-height:1.45}
.sc-limit-check{flex:0 0 20px;margin-top:1px}
.sc-limit-check rect{fill:var(--green-soft)}
.sc-limit-check path{fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sc-limit-lock{flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sc-limit-actions{display:grid;gap:8px}
.sc-limit-primary,.sc-limit-secondary{
  width:100%;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 16px;
  border:0;
  border-radius:12px;
  font:600 .875rem var(--font-b);
  cursor:pointer;
  transition:transform 120ms var(--ease-out),background-color 150ms ease,color 150ms ease,filter 150ms ease;
}
.sc-limit-primary{background:var(--accent);color:#fff}
.sc-limit-secondary{min-height:44px;background:transparent;color:var(--ink-soft)}
.sc-limit-primary:active,.sc-limit-secondary:active{transform:scale(.97)}
.sc-limit-free{margin-top:12px;color:var(--muted);font-size:.78rem;text-align:center}
.sc-limit-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Proefpakket op: mini-versies van wat je echt deed. */
.sc-limit-collage{position:relative;height:182px;margin:0 0 14px}
.sc-limit-mini{
  position:absolute;
  display:grid;
  align-content:start;
  padding:12px 14px;
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 1px 2px rgba(23,26,31,.06),0 14px 30px -14px rgba(23,26,31,.25);
  transform:rotate(var(--r));
  animation:sc-limit-drop .5s var(--ease-out) both;
}
.sc-limit-mini.is-q{left:0;top:26px;width:196px;--r:-3deg;animation-delay:.08s}
.sc-limit-mini.is-m{left:150px;top:0;z-index:2;width:176px;--r:2.5deg;animation-delay:.16s}
.sc-limit-mini.is-v{right:0;top:82px;z-index:3;width:168px;--r:-1.5deg;animation-delay:.24s}
.sc-limit-k{color:var(--muted);font:700 .625rem var(--font-b);letter-spacing:.07em;text-transform:uppercase}
.sc-limit-bubble{display:grid;gap:5px;margin-top:6px;padding:8px 9px;border-radius:10px;background:var(--accent-soft)}
.sc-limit-bubble i{display:block;height:6px;border-radius:3px;background:var(--accent);opacity:.3}
.sc-limit-ln{display:block;height:6px;margin-top:7px;border-radius:3px;background:var(--line)}
.sc-limit-big{margin-top:4px;font:800 1.375rem/1 var(--font-d);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sc-limit-wave{display:flex;align-items:center;gap:2px;height:26px;margin-top:6px}
.sc-limit-wave span{width:3px;border-radius:2px;background:var(--accent);opacity:.85;animation:sc-limit-bar 1.1s var(--ease-in-out) infinite alternate}
.sc-limit-dots{display:flex;gap:6px;margin-top:10px}
.sc-limit-dots i{width:12px;height:12px;border-radius:50%;background:var(--amber);animation:sc-limit-green .5s var(--ease-out) forwards}
.sc-limit-recap{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:8px}
.sc-limit-recap div{padding:11px 10px;border-radius:14px;background:var(--surface);text-align:center}
.sc-limit-recap b{display:block;font:800 1.5rem/1.1 var(--font-d);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sc-limit-recap span{color:var(--muted);font-size:.72rem;line-height:1.3}

/* Op slot: alle acht vaardigheden, de aangetikte licht op. */
.sc-limit-skills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sc-limit-skill{
  position:relative;
  min-height:58px;
  padding:10px 10px 9px;
  border-radius:14px;
  background:var(--surface);
  color:var(--muted);
  font-size:.7rem;
  font-weight:600;
  line-height:1.3;
  hyphens:auto;
  overflow-wrap:anywhere;
  animation:sc-limit-up .35s var(--ease-out) both;
  animation-delay:calc(var(--i,0) * 40ms);
}
.sc-limit-skill-ring{display:block;width:16px;height:16px;margin-bottom:6px;border:2px solid var(--line);border-radius:50%}
.sc-limit-skill .sc-limit-lock{position:absolute;top:8px;right:8px;width:13px;height:13px;opacity:.55}
.sc-limit-skill.is-on{color:var(--ink)}
.sc-limit-skill.is-on .sc-limit-skill-ring{border-color:var(--green);background:var(--green-soft)}
.sc-limit-skill.is-tap{outline:2px solid var(--accent);color:var(--ink)}
.sc-limit-skill.is-tap .sc-limit-lock{opacity:1;animation:sc-limit-wiggle .5s var(--ease-in-out) .45s 1}

/* Maandtegoed op: volle ring en de aanvuldatum. */
.sc-limit-gauge{display:flex;align-items:center;gap:18px}
.sc-limit-ring{position:relative;flex:0 0 auto;width:96px;height:96px}
.sc-limit-ring svg{display:block}
.sc-limit-ring-track{fill:none;stroke:var(--line);stroke-width:12}
.sc-limit-ring-arc{fill:none;stroke:var(--accent);stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset 900ms var(--ease-out)}
.sc-limit-ring>span{position:absolute;inset:0;display:grid;place-items:center;font:800 1.25rem var(--font-d);font-variant-numeric:tabular-nums}
.sc-limit-small{color:var(--muted);font-size:.78rem}
.sc-limit-refill{margin:3px 0 4px;font:800 1.875rem/1 var(--font-d);letter-spacing:-.02em}

@keyframes sc-limit-drop{from{opacity:0;transform:translateY(14px) rotate(var(--r)) scale(.96)}to{opacity:1;transform:rotate(var(--r))}}
@keyframes sc-limit-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes sc-limit-bar{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
@keyframes sc-limit-green{to{background:var(--green)}}
@keyframes sc-limit-wiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-12deg)}60%{transform:rotate(9deg)}}
@media(max-width:520px){
  .sc-limit-hero{padding:20px 20px 18px}
  .sc-limit-body{padding:16px 20px 20px}
  .sc-limit-mini.is-m{left:112px}
  .sc-limit-mini.is-v{display:none}
  .sc-limit-skills{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sc-limit-skill{min-height:48px;padding-right:26px}
}

/* Seintje: één rustige regel met de ademende stip, alleen bij de laatste
   proefkeer of vlak voor een opname met weinig tegoed. */
.sc-credit-hint{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 12px;
  margin-top:14px;
  padding:4px 6px 4px 14px;
  border-radius:14px;
  background:var(--paper);
  color:var(--ink-soft);
  font-size:.84rem;
  line-height:1.45;
  animation:sc-limit-up .32s var(--ease-out) both;
}
.sc-credit-hint b{color:var(--ink);font-weight:650}
.sc-credit-hint-text{flex:1 1 220px;display:grid;gap:6px;min-width:0;padding:8px 0}
.sc-credit-hint-link{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  margin-left:auto;
  padding:0 8px;
  border-radius:10px;
  color:var(--accent-deep);
  font-weight:650;
  white-space:nowrap;
  text-decoration:none;
}
.sc-credit-breath{position:relative;flex:0 0 auto;width:10px;height:10px}
.sc-credit-breath i{position:absolute;inset:0;border-radius:50%;background:var(--accent)}
.sc-credit-breath i+i{opacity:.35;animation:sc-credit-breath 2.4s var(--ease-out) infinite}
.sc-credit-minis{display:flex;gap:3px}
.sc-credit-minis span{width:10px;height:5px;border-radius:3px;background:var(--accent)}
.sc-credit-minis span.is-used{background:var(--line)}
@keyframes sc-credit-breath{0%{transform:scale(1);opacity:.4}70%{transform:scale(2.4);opacity:0}100%{opacity:0}}
@media(max-width:420px){
  .sc-credit-hint{padding-right:14px}
  .sc-credit-hint-link{padding:0}
}

/* Accountpagina: proefpakket en maandtegoed. */
.sc-credit-card{padding:20px 22px}
.sc-credit-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px}
.sc-credit-title{font:700 1.19rem var(--font-d);letter-spacing:-.01em}
.sc-credit-meta{color:var(--muted);font-size:.78rem}
.sc-credit-chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--r-pill);background:var(--green-soft);color:var(--green);font:650 .75rem var(--font-b)}
.sc-credit-verdict{max-width:30ch;margin:14px 0 4px;font:750 1.5rem/1.25 var(--font-d);letter-spacing:-.02em;text-wrap:balance;animation:sc-limit-up .35s var(--ease-out) both}
.sc-credit-verdict em{font-style:normal;color:var(--accent-deep)}
.sc-credit-verdict.is-warn em{color:#B4761A}
.sc-credit-sub{margin:0 0 16px;color:var(--ink-soft);font-size:.84rem;line-height:1.5;animation:sc-limit-up .35s var(--ease-out) .06s both}
.sc-credit-pace{position:relative;margin:30px 0 4px}
.sc-credit-track{height:10px;overflow:hidden;border-radius:var(--r-pill);background:var(--line)}
.sc-credit-fill{width:100%;height:100%;border-radius:inherit;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform 900ms var(--ease-out)}
.sc-credit-fill.is-warn{background:var(--amber)}
.sc-credit-today{position:absolute;top:-6px;width:2px;height:22px;border-radius:1px;background:var(--ink)}
.sc-credit-today span{position:absolute;top:-20px;left:50%;transform:translateX(-50%);color:var(--ink);font:600 .6875rem var(--font-b);white-space:nowrap}
.sc-credit-pace-row{display:flex;justify-content:space-between;gap:12px;margin-top:8px;color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}
.sc-credit-small{margin:0;color:var(--muted);font-size:.78rem;line-height:1.5}
.sc-credit-eq{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.sc-credit-eq div{padding:12px;border-radius:14px;background:var(--paper);color:var(--ink-soft);font-size:.78rem;animation:sc-limit-up .35s var(--ease-out) both;animation-delay:calc(var(--i,0) * 60ms)}
.sc-credit-eq svg,.sc-credit-item svg{display:block;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sc-credit-eq svg{margin-bottom:8px}
.sc-credit-eq b{display:block;color:var(--ink);font:700 1rem var(--font-b);font-variant-numeric:tabular-nums}
.sc-credit-trial{display:grid;gap:12px;margin-top:16px}
.sc-credit-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--paper);animation:sc-limit-up .35s var(--ease-out) both;animation-delay:calc(var(--i,0) * 60ms)}
.sc-credit-item-title{font-size:.875rem;font-weight:600}
.sc-credit-item-left{color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}
.sc-credit-mini-ring circle{fill:none;stroke-width:5}
.sc-credit-mini-ring .is-track{stroke:var(--line)}
.sc-credit-mini-ring .is-arc{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset 900ms var(--ease-out)}
.sc-credit-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px}
.sc-credit-actions .btn{min-height:44px}
.sc-credit-foot{margin:14px 0 0}
.sc-credit-error{color:var(--muted);font-size:.82rem;line-height:1.5}
@media(max-width:520px){.sc-credit-eq{grid-template-columns:repeat(2,minmax(0,1fr))}.sc-credit-verdict{font-size:1.3rem}}
:root[data-sc-theme="dark"] .sc-credit-verdict.is-warn em{color:var(--amber)}

@media(hover:hover) and (pointer:fine){
  .sc-toast-close:hover{background:var(--paper);color:var(--ink)}
  .sc-limit-close:hover{color:var(--ink)}
  .sc-limit-primary:hover{filter:brightness(.92)}
  .sc-limit-secondary:hover{background:var(--paper);color:var(--ink)}
  .sc-credit-hint-link:hover{background:var(--surface)}
}
@media(min-width:1024px){
  body.has-shell .sc-toast-region{bottom:112px}
  .sc-toast-region{right:28px;left:auto;width:400px}
}

@keyframes sc-feedback-spin{to{transform:rotate(360deg)}}
@keyframes sc-feedback-pop{0%{opacity:.25;transform:scale(.72)}70%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes sc-status-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sc-status),transparent 68%)}50%{box-shadow:0 0 0 5px transparent}}

@media (prefers-reduced-transparency:reduce){
  .sc-nav{background:var(--ink);box-shadow:0 10px 32px -18px rgba(0,0,0,.7);-webkit-backdrop-filter:none;backdrop-filter:none}
  .sc-nav::before{display:none}
  .sc-nav-active-indicator{background:#fff;box-shadow:none}
  .sc-date-dialog::backdrop{background:rgba(23,26,31,.66);backdrop-filter:none;-webkit-backdrop-filter:none}
  .sc-toast{background:#fff}
  .sc-limit-dialog::backdrop{background:rgba(15,17,21,.72);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-contrast:more){
  .sc-nav{background:var(--ink);border-color:rgba(255,255,255,.62);box-shadow:0 10px 32px -18px rgba(0,0,0,.7);-webkit-backdrop-filter:none;backdrop-filter:none}
  .sc-nav::before{display:none}
  .sc-nav-active-indicator{background:#fff;box-shadow:none}
  .sc-nav-item,.sc-nav-account{color:#fff}
  .card,.sc-select-trigger,.sc-date-trigger,.sc-date-wheels{border-color:currentColor}
}
@media (forced-colors:active){
  .sc-nav{border:2px solid CanvasText;background:Canvas;color:CanvasText;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;forced-color-adjust:auto}
  .sc-nav::before,.sc-nav-active-indicator{display:none}
  .sc-nav-item,.sc-nav-account{color:LinkText}
  .sc-nav.sc-dock-enhanced .sc-nav-item.active,
  .sc-nav.sc-dock-enhanced .sc-nav-account.active,
  .sc-nav-item.active,.sc-nav-account.active{background:Highlight;color:HighlightText;outline:2px solid ButtonText;outline-offset:-3px}
  .sc-dock-separator{background:CanvasText}
}
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .sc-nav,.sc-nav::before,.sc-nav-item,.sc-nav-account,.sc-nav-active-indicator{animation:none!important;transition:none!important}
  .sc-nav-item:active,.sc-nav-account:active{transform:none}
  .sc-wheel-option{transform:none!important}
  .sc-toast,.sc-limit-surface{transform:none!important;clip-path:none!important}
  .sc-credit-breath i+i{display:none}
  .sc-limit-dialog *,.sc-credit-hint,.sc-credit-card *{animation-delay:0ms!important}
  .sc-limit-wave span{animation:none!important}
}

/* One StudyCore — globale volgende actie op Home (Stage 5D).
   Rustig en feitelijk: één actie, één reden, altijd weg te klikken. */
.sc-next-action{position:relative}
.sc-next-meta{margin-top:6px;font-size:.76rem;color:var(--muted);font-weight:600}
.sc-next-actions{display:flex;gap:14px;margin-top:12px;flex-wrap:wrap}
.sc-next-link{border:0;background:none;padding:0;font:inherit;font-size:.76rem;font-weight:650;
  color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sc-next-link:hover{color:var(--ink)}
.sc-next-why{margin-top:12px;padding:12px 14px;border-radius:14px;
  background:rgba(255,255,255,.08);font-size:.78rem;line-height:1.55}

/* One StudyCore — eisen per leerdoel (pilotlaag).
   Compact en rustig: dit is een bevestigstap, geen dashboard. */
.sc-req-panel{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.sc-req-head{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:750}
.sc-req-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.sc-req{display:grid;gap:3px}
.sc-req-kind{font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent);font-weight:750}
.sc-req-text{font-size:.82rem;line-height:1.45;font-weight:600}
.sc-req-state{font-size:.72rem;color:var(--muted);font-weight:650}
.sc-req-reason{font-size:.72rem;color:var(--muted);line-height:1.45}
.sc-req-actions{display:flex;gap:8px;margin-top:5px}
.sc-req-btn{min-height:32px;padding:0 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:.74rem;font-weight:700;cursor:pointer}
.sc-req-btn.primary{border-color:transparent;background:var(--accent);color:#fff}
.sc-req-btn:disabled{opacity:.5;cursor:default}
.sc-req-foot{margin-top:10px;font-size:.7rem;color:var(--muted);line-height:1.45}

/* Ingang naar het Leerdoelenlab. Een regel, geen kaart: de leerdoellijst
   eronder is al de inhoud; dit is alleen de deur. */
.goal-lab-link{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  color:var(--accent);text-decoration:none;font-size:.82rem;font-weight:700;
  border-radius:8px;padding:2px 0}
.goal-lab-link:hover{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}
.goal-lab-link:focus-visible{outline:3px solid var(--accent-soft);outline-offset:3px}
.sc-req-intro{margin-top:6px;font-size:.72rem;color:var(--ink-soft);line-height:1.5;max-width:56ch}

/* Bèta-functies: de student zette Meeschrijven uit op beta.html. Alleen de
   ingangen verdwijnen (zijbalk, dock, Notities); de pagina's blijven bereikbaar. */
html.sc-no-meeschrijven .scis-item[data-key="meeschrijven"],
html.sc-no-meeschrijven .sc-smart-dock-item[data-sc-dock-key="meeschrijven"],
html.sc-no-meeschrijven #notesLectureLauncher{display:none!important}

/* ── Uitleg-rij onderin de zijbalk (sinds 28 september 2026) ──
   shell.js zet hem vóór de accountrij (met data-tour-help), de gedeelde weergave
   guided-tour-presenter.js koppelt klik en detailregel. Zelfde vorm als in B2B:
   vorm en hover komen van .scis-account (gedeelde zijbalk-CSS), ingevouwen blijft
   alleen de cirkel staan, en het vraagteken staat op zacht kobalt zodat de rij
   niet leest als een tweede account. */
.sc-student-help + .scis-account{margin-top:2px}
/* Plaatshouder (is-pending): tot de sessie bekend is. Onzichtbaar, maar de
   hoogte telt al, dus de voet verspringt niet; daarna vaagt de rij kort in. */
.sc-student-help{transition:background-color 160ms var(--ease-out,ease),opacity 200ms var(--ease-out,ease)}
.sc-student-help.is-pending{visibility:hidden;opacity:0}
@media (prefers-reduced-motion:reduce){
  .sc-student-help{transition:none}
}
.sc-student-help .scis-avatar{
  background:var(--accent-soft,#EBF0FF);
  color:var(--accent,#2E5BFF);
  font-family:var(--font-d,"Bricolage Grotesque",sans-serif);
  font-size:.9rem;
  font-weight:700;
  line-height:1;
}
/* ── Feedback-rij bovenin de zijbalkvoet (sinds 28 september 2026) ──
   De zwevende knop van de gedeelde widget viel op desktop over de voet. Zolang
   de zijbalk er is, is deze rij (shell.js) de ingang en blijft die knop weg;
   met ?sidebar=0 (dock) en in de iPhone-app (zijpaneel) staat hij er zoals
   altijd. Zelfde vorm, plaatshouder en overgang als de Uitleg-rij en als in B2B. */
html:not([data-shell="ios"]) body.sc-island-shell .sc-feedback-trigger{display:none}
.sc-student-feedback + .scis-account{margin-top:2px}
.sc-student-feedback{transition:background-color 160ms var(--ease-out,ease),opacity 200ms var(--ease-out,ease)}
.sc-student-feedback.is-pending{visibility:hidden;opacity:0}
@media (prefers-reduced-motion:reduce){
  .sc-student-feedback{transition:none}
}
.sc-student-feedback .scis-avatar{
  background:var(--accent-soft,#EBF0FF);
  color:var(--accent,#2E5BFF);
}
.sc-student-feedback .scis-avatar svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* iPhone-app: schuift het zijpaneel open, dan blijft de stip van de rondleiding
   niet boven het paneel hangen; de kaart met het anker schuift immers weg. */
html[data-shell="ios"] body.sc-ios-panel-moving .sc-mtour-dot{opacity:0;pointer-events:none}

/* iPhone-app: html[data-shell="ios"] wordt gezet door mobile/web/mobile-bridge.js.
   data-ios-only verschijnt alleen daar, data-ios-hide verdwijnt daar. */
html:not([data-shell="ios"]) [data-ios-only]{display:none!important}
html[data-shell="ios"] [data-ios-hide]{display:none!important}
.ios-reminder-card{padding:6px 18px}
.ios-reminder-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;font-size:.92rem}
.ios-reminder-row + .ios-reminder-row{border-top:1px solid var(--line, rgba(0,0,0,.08))}
.ios-reminder-row small{color:var(--muted);font-size:.8rem}
.ios-reminder-row input[type="checkbox"]{width:22px;height:22px;accent-color:var(--accent, #2E5BFF)}
.ios-reminder-row select{font:inherit;padding:6px 10px;border-radius:10px;border:1px solid var(--line, rgba(0,0,0,.12));background:var(--surface, #fff);color:inherit}
.ios-reminder-note{font-size:.8rem;color:var(--muted);padding:0 0 12px}
.ios-reminder-offer{margin-top:14px}
.ios-reminder-copy{margin:6px 0 12px;line-height:1.5}

/* iPhone-app: de webview loopt onder de statusbalk door (viewport-fit=cover).
   De zijbalkstrook met de zijbalkknop en de pagina schuiven de safe area op,
   anders valt de knop over de klok. In Safari is die inset 0; daar verandert niets. */
html[data-shell="ios"] .scis-topbar{top:env(safe-area-inset-top)}
@media (max-width:1023px){
  html[data-shell="ios"] body.sc-island-shell.sc-island-framed{padding-top:calc(var(--scis-bar) + env(safe-area-inset-top))}
  html[data-shell="ios"] .scis{padding-top:calc(var(--scis-bar) + env(safe-area-inset-top))}
}
/* De gast- en examenbalk (34px) staan in de iPhone-app onder de statusbalk in
   plaats van onder de klok; de zijbalkstrook en de pagina schuiven 34px mee. */
html[data-shell="ios"] :is(.guest-mode-marker,.em-mode-marker){top:env(safe-area-inset-top)}
html[data-shell="ios"] body:is(.guest-mode,.exam-mode) .scis-topbar{top:calc(env(safe-area-inset-top) + 34px)}
@media (max-width:1023px){
  html[data-shell="ios"] body:is(.guest-mode,.exam-mode).sc-island-shell.sc-island-framed{padding-top:calc(var(--scis-bar) + 34px + env(safe-area-inset-top))}
  html[data-shell="ios"] body:is(.guest-mode,.exam-mode) .scis{padding-top:calc(var(--scis-bar) + 34px + env(safe-area-inset-top))}
}