[data-role="topic-index"] { border-inline-start: 1px solid var(--line); padding-inline-start: 1.1rem; }
[data-role="topic-index"] > h2 { font-size: 1.3rem; line-height: 1.3; color: var(--muted); padding-bottom: 1rem; margin: 0; }
[data-role="topic-group"] { padding-block: 1.15rem .5rem; border-top: 1px solid var(--line); }
[data-role="topic-group"] h3 { font-family: var(--body); font-weight: 700; font-size: 1rem; line-height: 1.4; margin: 0 0 .4rem; }
[data-role="topic-group"] ul { list-style: none; padding: 0; }
[data-role="topic-link"] { display: flex; align-items: center; min-height: 44px; padding: .35rem .5rem .35rem 0; font-size: 1.125rem; line-height: 1.35; text-decoration: none; }
[data-role="topic-link"]:hover { text-decoration: underline; }
[data-role="topic-link"][aria-current="page"] { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: .3em; }
@media (max-width: 850px) {
  [data-role="topic-index"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; padding: 1.5rem 0 0; border-inline-start: none; border-top: 2px solid var(--ink); }
  [data-role="topic-index"] > h2 { grid-column: 1 / -1; font-size: 1.625rem; color: var(--ink); }
}
@media (max-width: 360px) {
  [data-role="topic-index"] { grid-template-columns: minmax(0, 1fr); }
}