/* Helios-native dark card. No blue panel background. */
.eleon-helios-right-sticky{
  display:grid;
  gap:26px;
  margin-top:0;
  position:sticky;
  top:12px;
  align-self:flex-start;
  width:100%;
  min-width:0;
  max-height:calc(100vh - 96px);
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:2px;
  z-index:20;
  scrollbar-width:thin;
  scrollbar-color:rgba(125,135,150,.26) transparent;
}

.eleon-smart-toc{
  position:relative;
  width:100%;
  min-width:0;
  margin:0;
  padding:16px 16px 14px;
  border:1px solid var(--helios-border,#2b3038);
  border-radius:12px;
  background:var(--helios-card,#17191e);
  box-shadow:none;
  overflow:hidden;
}

.eleon-toc-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  padding-bottom:11px;
  border-bottom:1px solid rgba(255,255,255,.055);
  color:inherit;
  font-size:16px;
  font-weight:800;
}

.eleon-toc-icon{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  color:rgba(235,238,244,.84);
}

.eleon-toc-icon svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.eleon-toc-list{
  position:relative;
  min-width:0;
}

.eleon-toc-list:before{
  content:"";
  position:absolute;
  left:5px;
  top:10px;
  bottom:10px;
  width:1px;
  background:rgba(140,150,165,.22);
}

.eleon-smart-toc .eleon-toc-link{
  position:relative;
  display:flex!important;
  align-items:flex-start;
  gap:11px;
  width:100%;
  min-width:0;
  padding:6px 2px 6px 0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  color:rgba(224,228,235,.68)!important;
  text-decoration:none!important;
  font-size:13px;
  line-height:1.35;
  white-space:normal!important;
  overflow-wrap:anywhere;
}

.eleon-smart-toc .eleon-toc-link:hover{
  color:rgba(235,239,246,.94)!important;
}

.eleon-toc-dot{
  position:relative;
  z-index:2;
  flex:0 0 10px;
  width:10px;
  height:10px;
  margin-top:4px;
  border:2px solid rgba(122,132,148,.58);
  border-radius:50%;
  background:var(--helios-card,#17191e);
}

.eleon-smart-toc .eleon-toc-link.is-active{
  color:var(--helios-accent,#78a6ff)!important;
  font-weight:700;
}

.eleon-smart-toc .eleon-toc-link.is-active .eleon-toc-dot{
  border-color:var(--helios-accent,#78a6ff);
  background:var(--helios-card,#17191e);
  box-shadow:0 0 0 2px rgba(120,166,255,.08);
}

/* Never create horizontal scrolling in the right sidebar. */
.eleon-helios-right-sticky,
.eleon-smart-toc,
.eleon-smart-toc *{
  box-sizing:border-box;
  max-width:100%;
}

@media(max-width:980px){
  .eleon-helios-right-sticky{
  display:grid;
  gap:26px;
  margin-top:0;
    position:static;
  }
}

.eleon-helios-right-sticky::-webkit-scrollbar{width:5px}
.eleon-helios-right-sticky::-webkit-scrollbar-track{background:transparent}
.eleon-helios-right-sticky::-webkit-scrollbar-thumb{background:rgba(125,135,150,.24);border-radius:999px}

.eleon-helios-right-sticky > .eleon-smart-toc,
.eleon-helios-right-sticky > [data-eleon-version-history]{
  width:100%;
  min-width:0;
  flex:none;
}


/* =========================================================
   ACTIVE TOC PROGRESS RAIL
   The JS updates --eleon-toc-progress to the active dot center.
   Gray track remains behind; blue rail grows with the active section.
   ========================================================= */

.eleon-toc-list{
  --eleon-toc-progress: 10px;
}

.eleon-toc-list:after{
  content:"";
  position:absolute;
  left:5px;
  top:10px;
  width:1px;
  height:var(--eleon-toc-progress);
  border-radius:999px;
  background:var(--helios-accent,#78a6ff);
  box-shadow:0 0 8px rgba(120,166,255,.18);
  pointer-events:none;
}

.eleon-smart-toc .eleon-toc-link.is-active .eleon-toc-dot{
  border-color:var(--helios-accent,#78a6ff)!important;
  background:var(--helios-accent,#78a6ff)!important;
  box-shadow:
    0 0 0 2px rgba(120,166,255,.10),
    0 0 8px rgba(120,166,255,.25)!important;
}


/* =========================================================
   SINGLE SCROLLBAR
   Only the whole right sidebar stack scrolls.
   On This Page itself and its native Helios children must not
   create their own vertical scrollbar.
   ========================================================= */

.eleon-helios-right-sticky{
  max-height:calc(100vh - 24px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}

.eleon-smart-toc,
.eleon-smart-toc nav,
.eleon-smart-toc ul,
.eleon-smart-toc ol,
.eleon-smart-toc .helios-toc-list,
.eleon-smart-toc .toc-list,
.eleon-smart-toc [class*="toc-list"],
.eleon-smart-toc [class*="toc-content"],
.eleon-smart-toc [class*="toc-scroll"],
.eleon-smart-toc [class*="scroll"]{
  max-height:none!important;
  height:auto!important;
  overflow:visible!important;
  overflow-y:visible!important;
  overflow-x:hidden!important;
  scrollbar-width:none!important;
}

.eleon-smart-toc::-webkit-scrollbar,
.eleon-smart-toc nav::-webkit-scrollbar,
.eleon-smart-toc ul::-webkit-scrollbar,
.eleon-smart-toc ol::-webkit-scrollbar,
.eleon-smart-toc .helios-toc-list::-webkit-scrollbar,
.eleon-smart-toc .toc-list::-webkit-scrollbar,
.eleon-smart-toc [class*="toc-list"]::-webkit-scrollbar,
.eleon-smart-toc [class*="toc-content"]::-webkit-scrollbar,
.eleon-smart-toc [class*="toc-scroll"]::-webkit-scrollbar,
.eleon-smart-toc [class*="scroll"]::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}


/* =========================================================
   2.3.5 — single scrollbar + subtle centered rail
   ========================================================= */

/* Ancestor Helios sidebars must not create a second scrollbar. */
.eleon-disable-parent-scroll{
  max-height:none!important;
  overflow-y:visible!important;
  overflow-x:visible!important;
  scrollbar-width:none!important;
}
.eleon-disable-parent-scroll::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}

/* Only this wrapper is allowed to scroll vertically. */
.eleon-helios-right-sticky{
  max-height:calc(100vh - 24px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(125,135,150,.22) transparent!important;
}
.eleon-helios-right-sticky::-webkit-scrollbar{width:4px!important}
.eleon-helios-right-sticky::-webkit-scrollbar-track{background:transparent!important}
.eleon-helios-right-sticky::-webkit-scrollbar-thumb{
  background:rgba(125,135,150,.22)!important;
  border-radius:999px!important;
}

/* No nested TOC scrolling. */
.eleon-smart-toc,
.eleon-smart-toc nav,
.eleon-smart-toc ul,
.eleon-smart-toc ol,
.eleon-smart-toc [class*="toc"]{
  max-height:none!important;
  overflow:visible!important;
  overflow-x:hidden!important;
  scrollbar-width:none!important;
}
.eleon-smart-toc::-webkit-scrollbar,
.eleon-smart-toc nav::-webkit-scrollbar,
.eleon-smart-toc ul::-webkit-scrollbar,
.eleon-smart-toc ol::-webkit-scrollbar,
.eleon-smart-toc [class*="toc"]::-webkit-scrollbar{
  display:none!important;
}

/* Rail is positioned from the actual first-dot center by JS. */
.eleon-toc-list{
  --eleon-rail-x:5px;
  --eleon-rail-start:10px;
  --eleon-toc-progress:0px;
}

.eleon-toc-list:before{
  left:var(--eleon-rail-x)!important;
  top:var(--eleon-rail-start)!important;
  bottom:8px!important;
  width:1px!important;
  transform:translateX(-50%);
  background:rgba(132,143,160,.22)!important;
  box-shadow:none!important;
}

.eleon-toc-list:after{
  left:var(--eleon-rail-x)!important;
  top:var(--eleon-rail-start)!important;
  width:1px!important;
  height:var(--eleon-toc-progress)!important;
  transform:translateX(-50%);
  background:rgba(120,166,255,.42)!important;
  box-shadow:none!important;
}

.eleon-smart-toc .eleon-toc-link.is-active .eleon-toc-dot{
  border-color:rgba(120,166,255,.95)!important;
  background:rgba(120,166,255,.92)!important;
  box-shadow:0 0 0 2px rgba(120,166,255,.07)!important;
}


/* =========================================================
   2.3.6 — HELIOS DARK / LIGHT THEME
   ========================================================= */

:root{
  --est-card:#17191e;
  --est-border:#303640;
  --est-text:#eef1f5;
  --est-muted:#a4acb8;
  --est-line:rgba(140,150,165,.20);
  --est-line-active:rgba(105,153,229,.42);
  --est-accent:#78a6ff;
  --est-hover:rgba(120,166,255,.04);
}

html.eleon-sidebar-light{
  --est-card:#ffffff;
  --est-border:#d8dee8;
  --est-text:#20252d;
  --est-muted:#6f7886;
  --est-line:rgba(72,84,102,.18);
  --est-line-active:rgba(63,118,216,.35);
  --est-accent:#477bd8;
  --est-hover:rgba(63,118,216,.045);
}

/* Main On This Page card */
.eleon-smart-toc{
  border-color:var(--est-border)!important;
  background:var(--est-card)!important;
  color:var(--est-text)!important;
  box-shadow:none!important;
}

.eleon-toc-header{
  border-bottom-color:color-mix(
    in srgb,
    var(--est-border) 45%,
    transparent
  )!important;
  color:var(--est-text)!important;
}

.eleon-toc-icon{
  color:var(--est-muted)!important;
}

.eleon-smart-toc .eleon-toc-link{
  color:var(--est-muted)!important;
  text-decoration:none!important;
}

.eleon-smart-toc .eleon-toc-link:hover{
  color:var(--est-text)!important;
  background:var(--est-hover)!important;
  text-decoration:none!important;
}

.eleon-smart-toc .eleon-toc-link.is-active{
  color:var(--est-accent)!important;
  background:transparent!important;
  text-decoration:none!important;
}

.eleon-smart-toc .eleon-toc-dot{
  border-color:color-mix(
    in srgb,
    var(--est-muted) 52%,
    transparent
  )!important;
  background:var(--est-card)!important;
  box-shadow:none!important;
}

.eleon-smart-toc .eleon-toc-link.is-active .eleon-toc-dot{
  border-color:var(--est-accent)!important;
  background:var(--est-accent)!important;
  box-shadow:
    0 0 0 2px
    color-mix(
      in srgb,
      var(--est-accent) 8%,
      transparent
    )!important;
}

/* Base gray rail */
.eleon-toc-list:before{
  background:var(--est-line)!important;
  box-shadow:none!important;
}

/* Active rail */
.eleon-toc-list:after{
  background:var(--est-line-active)!important;
  box-shadow:none!important;
}

/* The single scrollbar follows the current theme */
.eleon-helios-right-sticky{
  scrollbar-color:
    color-mix(
      in srgb,
      var(--est-muted) 28%,
      transparent
    )
    transparent!important;
}

.eleon-helios-right-sticky::-webkit-scrollbar-thumb{
  background:
    color-mix(
      in srgb,
      var(--est-muted) 28%,
      transparent
    )!important;
}