/* Índice lateral: cuando la pantalla es lo bastante ancha, el índice del artículo
   (<details class="toc"> dentro de .article) sale de la columna de lectura y se
   queda a la izquierda, siempre visible y pegado al hacer scroll. Por debajo de
   ese ancho no hace nada: sigue siendo el índice colapsable de arriba.
   El JS (indice-lateral.js) lo despliega y marca la sección en curso. */
@media (min-width: 1280px) {
  .layout > .article > details.toc {
    float: left;
    position: sticky;
    top: 7.5rem;
    width: 210px;
    margin: 0 0 0 -250px;
    max-height: calc(100vh - 9.5rem);
    overflow-y: auto;
    border: 0;
    border-left: 2px solid var(--fg);
    box-shadow: none;
    background: transparent;
  }
  .layout > .article > details.toc > summary {
    pointer-events: none;
    min-height: 0;
    padding: 0 0 var(--space-2) var(--space-4);
    border-bottom: 0;
  }
  .layout > .article > details.toc > summary::after {
    display: none;
  }
  .layout > .article > details.toc ol {
    padding: 0 0 var(--space-2) var(--space-4);
    gap: 0;
  }
  .layout > .article > details.toc a {
    font-size: var(--text-xs);
    line-height: 1.35;
    padding: var(--space-1) 0;
  }
  .layout > .article > details.toc a.on {
    color: var(--fg);
    font-weight: 600;
  }
}