/* =====================================================================
 *  Article contents list ("On This Page"): one row per section, numbered
 *  in reading order, a hairline between rows, and the section the reader
 *  is in marked with aria-current (set by the script in article/_toc.php).
 *  Sized so thirteen sections still fit the sticky column on a 900px screen.
 * ===================================================================== */

.iw-toc-title {
    margin: 0 0 2px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(86, 19, 113, 0.22);
}
.iw-toc-list { list-style: none; margin: 0; padding: 0; }
.iw-toc-item { border-top: 1px solid rgba(86, 19, 113, 0.10); }
.iw-toc-item:first-child { border-top: 0; }
.iw-toc-link {
    display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: 0.3rem; align-items: baseline;
    padding: 5px 0;
    font-family: var(--font-body), serif; font-size: 14px; line-height: 1.32;
    color: var(--color-on-surface-variant, #49454f);
    text-decoration: none;
    transition: color 120ms ease;
}
.iw-toc-num {
    font-family: var(--font-label), serif;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    color: rgba(86, 19, 113, 0.55);
}
.iw-toc-text { text-wrap: pretty; }
.iw-toc-link:hover { color: var(--color-primary, #561371); }
.iw-toc-link:hover .iw-toc-num { color: var(--color-primary, #561371); }
.iw-toc-link[aria-current="true"] { color: var(--color-primary, #561371); font-weight: 600; }
.iw-toc-link[aria-current="true"] .iw-toc-num { color: var(--color-primary, #561371); }
.iw-toc-link:focus-visible { outline: 2px solid var(--color-primary, #561371); outline-offset: 2px; border-radius: 4px; }

/* The phone panel: the same rows, a touch more room for a finger. */
.iw-toc--mobile .iw-toc-link { padding: 9px 0; font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
    .iw-toc-link { transition: none; }
}