/* =========================================================================
   scrollspy.css — section scroll-spy: thin hover-rail (desktop) + top bar (mobile)
   Loaded by every content page. Auto-hidden in teacher presenter mode.
   Labels reuse each heading's .Lar/.he spans, so they follow the AR/HE toggle.
   ========================================================================= */

html.pr-on .spy,
html.pr-on .spy-bar,
html.pr-on .spy-sheet { display:none !important; }

/* scroll target offset so headings clear the sticky top bar */
.spy-target{ scroll-margin-top:100px; }

/* ---------- Desktop: thin numbered rail, expands to labels on hover ------- */
.spy{
  position:fixed; inset-block-start:50%; inset-inline-start:8px; transform:translateY(-50%);
  z-index:35; display:none; flex-direction:column; gap:4px; padding:8px 6px;
  max-height:82vh; overflow-y:auto; overflow-x:hidden;
  background:rgba(20,18,44,.55); backdrop-filter:blur(9px);
  border:1px solid rgba(255,255,255,.09); border-radius:16px;
  font-family:"Cairo","Heebo",sans-serif; transition:background .2s;
}
.spy::-webkit-scrollbar{ width:0 }
.spy.ready{ display:flex; }
.spy:hover{ background:rgba(20,18,44,.93); box-shadow:0 18px 44px -18px rgba(0,0,0,.65); }

.spy a{ display:flex; align-items:center; text-decoration:none; color:#CFCDEC; }
.spy .dot{
  width:28px; height:28px; border-radius:9px; flex-shrink:0;
  display:grid; place-items:center;
  font-family:"JetBrains Mono",monospace; font-size:.74rem; font-weight:700;
  background:rgba(255,255,255,.06); color:#9694C0; transition:background .15s,color .15s;
}
.spy a:hover .dot{ background:rgba(255,255,255,.14); color:#fff; }
.spy a.on .dot{ background:linear-gradient(135deg,#22D3B0,#5B8DEF); color:#04231D; }
.spy .lbl{
  max-width:0; opacity:0; overflow:hidden; white-space:nowrap; padding:0;
  font-size:.83rem; font-weight:700; line-height:1.3;
  transition:max-width .2s ease,opacity .2s ease,padding .2s ease;
}
.spy:hover .lbl{ max-width:200px; opacity:1; padding-inline-start:9px; padding-inline-end:4px; }
.spy a.on .lbl{ color:#fff; }
/* keep the emoji glyphs inside headings from bloating the label */
.spy .lbl .em{ margin-inline-end:2px; }

/* ---------- Mobile / narrow: sticky top bar + dropdown sheet -------------- */
.spy-bar{
  position:sticky; inset-block-start:60px; z-index:34; display:none;
  align-items:center; gap:10px; padding:9px 16px; cursor:pointer;
  background:rgba(20,18,44,.96); backdrop-filter:blur(10px);
  border-block-end:1px solid rgba(255,255,255,.10);
  font-family:"Cairo","Heebo",sans-serif;
}
.spy-bar .ic{ font-size:1rem; flex-shrink:0; }
.spy-bar .cur{ flex:1; min-width:0; font-size:.86rem; font-weight:700; color:#EEEDFB;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spy-bar .pct{ font-family:"JetBrains Mono",monospace; font-size:.72rem; color:#9694C0; flex-shrink:0; }
.spy-bar .chev{ transition:transform .2s; color:#9694C0; flex-shrink:0; }
.spy-bar.open .chev{ transform:rotate(180deg); }
.spy-bar .bar{ position:absolute; inset-block-end:0; inset-inline-start:0; height:2px;
  background:linear-gradient(90deg,#9BE15D,#22D3B0); width:0; transition:width .2s; }

.spy-sheet{
  position:fixed; inset-inline:0; inset-block-start:0; z-index:60; display:none;
  max-height:72vh; overflow-y:auto; padding:10px;
  background:#1D1A42; border-block-end:1px solid rgba(255,255,255,.12);
  box-shadow:0 22px 54px -20px rgba(0,0,0,.72);
}
.spy-sheet.open{ display:block; }
.spy-sheet a{ display:flex; align-items:center; gap:10px; text-decoration:none;
  color:#CFCDEC; font-size:.92rem; font-weight:600; padding:11px 12px; border-radius:10px; }
.spy-sheet a .n{ font-family:"JetBrains Mono",monospace; font-size:.75rem; color:#9694C0; flex-shrink:0; }
.spy-sheet a.on{ background:linear-gradient(135deg,#22D3B0,#5B8DEF); color:#04231D; font-weight:800; }
.spy-sheet a.on .n{ color:#04231D; }

@media (max-width:1023px){
  .spy.ready{ display:none; }
  .spy-bar.ready{ display:flex; }
}