.documentLayout.rootstocksLayout {
  display: grid !important;
  grid-template-columns: minmax(220px, 280px) minmax(0, 920px);
  justify-content: center;
  align-items: start;
  gap: clamp(28px, 4vw, 64px);
}

.rootstocksArticleIndex {
  border: 1px solid var(--line, rgba(19, 65, 52, .22));
  background: var(--paper, #f6f3e9);
  color: var(--ink, #0b3428);
}

.rootstocksStickyToc {
  position: sticky;
  top: 92px;
  z-index: 12;
  max-height: calc(100vh - 116px);
  overflow: hidden;
}

.rootstocksIndexHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line, rgba(19, 65, 52, .22));
  font: 700 11px/1.25 Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.rootstocksIndexHead span {
  color: var(--muted, #527267);
  font-size: 9px;
  white-space: nowrap;
}

.rootstocksIndexToggle {
  display: none;
  width: 34px;
  height: 34px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: 700 18px/1 Arial, sans-serif;
  cursor: pointer;
}

.rootstocksIndexGrid {
  display: grid;
  grid-template-columns: 1fr;
  max-height: calc(100vh - 169px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.rootstocksIndexGrid a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 16px;
  gap: 8px;
  align-items: start;
  min-height: 56px;
  padding: 12px 10px;
  border-bottom: 1px solid var(--line, rgba(19, 65, 52, .22));
  color: inherit;
  text-decoration: none;
  font: 700 10px/1.3 Arial, sans-serif;
}

.rootstocksIndexGrid a:last-child { border-bottom: 0; }
.rootstocksIndexGrid a::after { content: '\2198'; color: var(--accent, #24725b); }
.rootstocksIndexGrid a:hover,
.rootstocksIndexGrid a:focus-visible,
.rootstocksIndexGrid a.active {
  background: color-mix(in srgb, var(--accent, #24725b) 13%, transparent);
}
.rootstocksIndexGrid .rootstocksIndexNumber {
  color: var(--accent, #24725b);
  font-weight: 500;
}

html[data-theme="dark"] .rootstocksArticleIndex,
body.dark-theme .rootstocksArticleIndex {
  background: #0b2d24;
  color: #edf7f2;
  border-color: rgba(202, 231, 219, .28);
}

@media (max-width: 900px) {
  .documentLayout.rootstocksLayout {
    display: block !important;
  }
  .rootstocksStickyToc {
    top: 72px;
    max-height: min(70vh, 620px);
    margin: 0 0 28px;
  }
  .rootstocksIndexHead span { margin-left: auto; }
  .rootstocksIndexToggle { display: inline-grid; place-items: center; flex: 0 0 auto; }
  .rootstocksStickyToc:not(.open) .rootstocksIndexGrid { display: none; }
  .rootstocksStickyToc.open .rootstocksIndexGrid {
    max-height: min(58vh, 520px);
  }
}

@media (max-width: 520px) {
  .rootstocksIndexHead { padding-inline: 12px; }
  .rootstocksIndexHead span { display: none; }
  .rootstocksIndexGrid a {
    grid-template-columns: 26px minmax(0, 1fr) 14px;
    min-height: 52px;
    padding-inline: 10px;
  }
}
