/* Simple Sticky TOC - Clean CSS, responsive, RTL-aware */
.sstoc { position: relative; }

/* Sticky vertical panel on desktop */
@media (min-width: 1024px) {
  .sstoc { /* container appended after content; panel is fixed */ }
  .sstoc .sstoc-toggle { display: none; }
  .sstoc .sstoc-panel {
    position: fixed;
    top: 96px;
    /* Logical positioning: prefer inline-end with fallbacks */
    inset-inline-end: 24px;
    width: 260px;
    max-height: 70vh;
    overflow: auto;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding: 12px 12px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    z-index: 40;
  }
  /* Fallbacks for browsers without logical properties */
  html[dir="ltr"] .sstoc .sstoc-panel { right: 24px; left: auto; }
  html[dir="rtl"] .sstoc .sstoc-panel { left: 24px; right: auto; }

  .sstoc .sstoc-title {
    font-weight: 600;
    margin: 4px 4px 8px;
  }
}

/* Mobile: toggleable bottom sheet */
@media (max-width: 1023.98px) {
  .sstoc .sstoc-toggle {
    position: fixed;
    bottom: 16px;
    /* logical start for RTL/LTR */
    inset-inline-end: 16px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    font-size: 14px;
    z-index: 50;
    cursor: pointer;
  }
  html[dir="ltr"] .sstoc .sstoc-toggle { right: 16px; left: auto; }
  html[dir="rtl"] .sstoc .sstoc-toggle { left: 16px; right: auto; }

  .sstoc .sstoc-panel {
    position: fixed;
    left: 0; right: 0;
    bottom: -100%;
    max-height: 60vh;
    overflow: auto;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(0,0,0,.18);
    padding: 12px 16px;
    transition: bottom .25s ease;
    z-index: 49;
  }
  .sstoc.sstoc-open .sstoc-panel {
    bottom: 0;
  }
  .sstoc .sstoc-title {
    font-weight: 600;
    margin-bottom: 8px;
  }
}

.sstoc .sstoc-list {
  margin: 0;
  padding: 0 4px 8px 16px;
}

.sstoc .sstoc-item {
  list-style: none;
  margin: 4px 0;
  line-height: 1.4;
}

.sstoc .sstoc-item a {
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}

.sstoc .sstoc-item a:focus,
.sstoc .sstoc-item a:hover {
  border-color: currentColor;
}

/* Indentation by depth */
.sstoc .sstoc-level-2 { margin-inline-start: 0; }
.sstoc .sstoc-level-3 { margin-inline-start: 12px; }
.sstoc .sstoc-level-4 { margin-inline-start: 24px; }
html[dir="ltr"] .sstoc .sstoc-level-2 { margin-left: 0; }
html[dir="ltr"] .sstoc .sstoc-level-3 { margin-left: 12px; }
html[dir="ltr"] .sstoc .sstoc-level-4 { margin-left: 24px; }
html[dir="rtl"] .sstoc .sstoc-level-2 { margin-right: 0; }
html[dir="rtl"] .sstoc .sstoc-level-3 { margin-right: 12px; }
html[dir="rtl"] .sstoc .sstoc-level-4 { margin-right: 24px; }

/* Theme devs can override styles by targeting these stable classnames */