:root{
  --sc-shell-paper:#F6F4EF;
  --sc-shell-ink:#171A1F;
  --sc-shell-accent:#2E5BFF;
  --sc-shell-ease:cubic-bezier(.22,.9,.3,1);
}

html{scroll-padding-top:24px}
body.sc-school-shell{padding-bottom:calc(94px + env(safe-area-inset-bottom))}
body.sc-school-shell :where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid rgba(46,91,255,.34);
  outline-offset:3px;
}
.sc-school-skip{
  position:fixed;
  top:12px;
  left:12px;
  z-index:500;
  padding:10px 14px;
  border-radius:12px;
  background:var(--sc-shell-ink);
  color:#fff;
  font:700 .76rem/1 "Inter",sans-serif;
  text-decoration:none;
  transform:translateY(-170%);
  transition:transform 160ms var(--sc-shell-ease);
}
.sc-school-skip:focus{transform:translateY(0)}

/* De studentdock is één gedeeld component. De vervormingslaag is functioneel:
   hij breekt alleen de achtergrond achter het glas en tekent geen textuur. */
.sc-school-nav{
  position:fixed;
  left:50%;
  bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:80;
  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;
  isolation:isolate;
  transform:translateX(-50%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 1.8px 3px 0 -2px rgba(255,255,255,.28),
    inset -2px -2px 0 -2px rgba(255,255,255,.24),
    inset -3px -8px 1px -6px rgba(255,255,255,.18),
    inset -.3px -1px 4px rgba(0,0,0,.24),
    inset -1.5px 2.5px 0 -2px rgba(0,0,0,.42),
    inset 0 3px 4px -2px rgba(0,0,0,.42),
    0 1px 5px rgba(0,0,0,.2),
    0 8px 18px rgba(0,0,0,.16),
    0 30px 66px -24px rgba(8,10,14,.66);
}
.sc-school-nav::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 1.8px 3px 0 -2px rgba(255,255,255,.28),
    inset -2px -2px 0 -2px rgba(255,255,255,.24),
    inset -3px -8px 1px -6px rgba(255,255,255,.18);
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .sc-school-nav{
    background:rgba(7,9,13,.68);
    -webkit-backdrop-filter:blur(8px) saturate(150%);
    backdrop-filter:blur(8px) url(#sc-school-liquid-refraction) saturate(150%);
  }
}
.sc-school-nav-filter{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.sc-school-nav-main{position:relative;z-index:2;display:flex;gap:3px}
.sc-school-nav-item,
.sc-school-nav-account{
  position:relative;
  z-index:2;
  width:clamp(44px,13vw,50px);
  height:50px;
  min-height:50px;
  display:grid;
  place-items:center;
  flex:none;
  padding:0;
  border:0;
  border-radius:15px;
  color:#E1E5EC;
  text-decoration:none;
  transition:background-color 160ms ease,color 160ms ease,transform 100ms var(--sc-shell-ease);
}
.sc-school-nav-item svg,
.sc-school-nav-account svg{width:21px;height:21px;fill:none;stroke:currentColor}
.sc-school-nav-item:hover,
.sc-school-nav-account:hover{background:rgba(255,255,255,.08);color:#fff}
.sc-school-nav-item.active,
.sc-school-nav-account.active{background:#fff;color:var(--sc-shell-accent)}
.sc-school-nav.is-enhanced :is(.sc-school-nav-item,.sc-school-nav-account).active{background:transparent}
.sc-school-nav-item:active,
.sc-school-nav-account:active{transform:scale(.96)}
.sc-school-nav-label{display:none}
.sc-school-nav-account,.sc-school-nav-separator{display:none}
.sc-school-nav-indicator{
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  width:0;
  height:0;
  border-radius:999px;
  background:rgba(241,243,248,.8);
  opacity:0;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 2px 1px 0 -1px rgba(255,255,255,.28),
    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);
}
.sc-school-nav-indicator.is-visible{opacity:1}
.sc-school-nav-indicator.is-animated{
  transition:transform 400ms cubic-bezier(1,0,.4,1),opacity 160ms ease;
}
.sc-school-nav-indicator.is-shifting{animation:sc-school-liquid-shift 440ms ease}
@keyframes sc-school-liquid-shift{
  0%,100%{scale:1 1}
  50%{scale:var(--sc-school-dock-stretch,1.1) 1}
}

/* Meldingen zijn inhoud, geen afgesneden pill. */
body.sc-school-shell .toast{
  bottom:calc(92px + env(safe-area-inset-bottom));
  width:min(400px,calc(100vw - 24px));
  max-width:400px;
  padding:12px 16px;
  border-radius:18px;
  line-height:1.45;
  white-space:normal;
  overflow-wrap:anywhere;
}

@media(min-width:1024px){
  body.sc-school-shell{
    display:block;
    min-height:100dvh;
    padding:0;
    background:#EFEDE7;
  }
  body.sc-school-shell>.app{
    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.sc-school-page-home>.app,
  body.sc-school-page-agenda>.app,
  body.sc-school-page-groei>.app{max-width:1240px}
  body.sc-school-page-leren>.app{max-width:1120px}
  body.sc-school-page-hulp>.app{max-width:900px}
  body.sc-school-page-account>.app{max-width:760px}
  body.sc-school-shell>.app :is(.greet h1,.top h1){font-size:clamp(1.9rem,2.5vw,2.35rem);letter-spacing:-.035em;text-wrap:balance}

  .sc-school-nav{bottom:24px}
  .sc-school-nav-item,.sc-school-nav-account{width:50px}
  .sc-school-nav-label{
    display:block;
    position:absolute;
    left:50%;
    bottom:calc(100% + 13px);
    z-index:2;
    width:max-content;
    max-width:170px;
    padding:7px 9px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;
    background:var(--sc-shell-ink);
    color:#fff;
    box-shadow:0 10px 28px -14px rgba(23,26,31,.7);
    font:650 .66rem/1 "Inter",sans-serif;
    opacity:0;
    pointer-events:none;
    transform:translate(-50%,5px) scale(.98);
    transform-origin:bottom center;
    transition:opacity 140ms ease,transform 170ms var(--sc-shell-ease);
  }
  :is(.sc-school-nav-item,.sc-school-nav-account):is(:hover,:focus-visible) .sc-school-nav-label{
    opacity:1;
    transform:translate(-50%,0) scale(1);
  }
  .sc-school-nav-separator{
    position:relative;
    z-index:2;
    display:block;
    width:1px;
    height:30px;
    margin:0 5px;
    background:rgba(255,255,255,.15);
  }
  .sc-school-nav-account{display:grid}
  body.sc-school-shell .toast{bottom:112px}

  body.sc-school-page-hulp .composer{
    left:50%;
    bottom:96px;
    width:min(820px,calc(100vw - 64px));
    max-width:820px;
    border-radius:22px;
    box-shadow:0 18px 50px -22px rgba(23,26,31,.34);
    transform:translateX(-50%);
  }
}

@media(min-width:1180px){
  body.sc-school-page-home>.app{
    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-school-page-home>.app>header,
  body.sc-school-page-home>.app>#daystartChip{grid-column:1/-1}
  body.sc-school-page-home>.app>#daystartChip{justify-self:start}
  body.sc-school-page-home>.app>.session{grid-column:1;grid-row:3;min-width:0;align-self:start;height:auto}
  body.sc-school-page-home>.app>.home-side-stack{
    grid-column:2;
    grid-row:3;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-self:start;
    gap:14px;
  }
  body.sc-school-page-home>.app>.home-side-stack>.agenda{order:-1;margin-top:0}
  body.sc-school-page-home>.app>.home-side-stack>.ef-tip{margin-top:0}
  body.sc-school-page-home .session .topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
  body.sc-school-page-home .session .start-btn{max-width:310px;margin-left:auto}

  body.sc-school-page-leren:not(.sc-school-vak-detail) .vakken{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
    gap:16px;
  }

  body.sc-school-page-agenda>.app{
    display:grid;
    grid-template-columns:minmax(0,680px) minmax(340px,1fr);
    grid-auto-rows:max-content;
    align-content:start;
    gap:0 24px;
  }
  body.sc-school-page-agenda>.app>header{grid-column:1/-1}
  body.sc-school-page-agenda>.app>.seg,
  body.sc-school-page-agenda>.app>.planner-actions,
  body.sc-school-page-agenda>.app>.agenda-notification-stack,
  body.sc-school-page-agenda>.app>.view,
  body.sc-school-page-agenda>.app>.sync-note{grid-column:1}
  body.sc-school-page-agenda>.app>.calendar-connect{
    grid-column:2;
    grid-row:2/span 4;
    position:sticky;
    top:32px;
    margin-top:18px;
  }

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

@media(prefers-reduced-transparency:reduce){
  .sc-school-nav{background:var(--sc-shell-ink);-webkit-backdrop-filter:none;backdrop-filter:none}
  .sc-school-nav::before{display:none}
  .sc-school-nav-indicator{background:#fff;box-shadow:none}
}
@media(prefers-contrast:more){
  .sc-school-nav{background:var(--sc-shell-ink);border:1px solid #fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  .sc-school-nav::before{display:none}
  .sc-school-nav-indicator{background:#fff;box-shadow:none}
  .sc-school-nav-item,.sc-school-nav-account{color:#fff}
}
@media(forced-colors:active){
  .sc-school-nav{border:2px solid CanvasText;background:Canvas;color:CanvasText;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .sc-school-nav::before,.sc-school-nav-indicator{display:none}
  .sc-school-nav-item,.sc-school-nav-account{color:LinkText}
  .sc-school-nav :is(.sc-school-nav-item,.sc-school-nav-account).active{background:Highlight;color:HighlightText}
}
@media(prefers-reduced-motion:reduce){
  .sc-school-skip,.sc-school-nav,.sc-school-nav::before,.sc-school-nav-item,.sc-school-nav-account,.sc-school-nav-indicator{
    animation:none!important;
    transition:none!important;
  }
  .sc-school-nav-item:active,.sc-school-nav-account:active{transform:none}
  .sc-school-exam-pulse{animation:none}
}

/* ---------- Examenmodus: gedeelde topbalk + nav-demping ---------- */
body.exam-mode .sc-school-nav{opacity:.55;filter:saturate(.6);transition:opacity .6s var(--sc-shell-ease)}
body.exam-mode .sc-school-nav:hover,
body.exam-mode .sc-school-nav:focus-within{opacity:1;filter:none}
body.exam-mode .app{padding-top:34px}

.sc-school-exam-marker{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:34px;
  background:#0D1015;color:#C9CEFF;
  font:700 .7rem/1 "Inter",sans-serif;letter-spacing:.02em;
  text-decoration:none;
  transition:background .2s;
}
.sc-school-exam-marker:hover{background:#171B23;color:#fff}
.sc-school-exam-pulse{width:7px;height:7px;border-radius:50%;background:#7D8CFF;animation:sc-school-exam-beat 4.5s ease-in-out infinite}
.sc-school-exam-action{opacity:.85}
@keyframes sc-school-exam-beat{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.5);opacity:1}}
@media(min-width:1024px){
  .sc-school-exam-marker{height:38px;font-size:.72rem}
  body.exam-mode .app{padding-top:38px}
}