/* One shared "On This Page" index (owner G5). Looks like the blog post index everywhere.
   Markup: nav.bd-toc > details.bd-toc__box > summary.bd-toc__title + ol.bd-toc__list > li > a.bd-toc__a > i + text.
   Specificity is high on purpose: it replaces the old per-family index looks (boxes, pills, shadows, other bars). */

html:root nav.bd-toc {
    position: sticky; top: var(--bd-sticky-top, 96px); align-self: start; z-index: 5;
    display: block; flex: 0 0 auto; width: auto; max-width: 100%; max-height: none; overflow: visible;
    margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; transform: none;
    font-family: "Brandefense Sans", "Helvetica Neue", Arial, sans-serif; font-size: 13.5px; line-height: 1.35;
    letter-spacing: normal; text-transform: none; will-change: auto;
}
@media (min-width: 1000px) { html:root nav.bd-toc:not(.bd-toc--rail) { flex: 0 0 200px; width: 200px; min-width: 200px; max-height: calc(100vh - var(--bd-sticky-top, 96px) - 24px); overflow-y: auto; scrollbar-width: thin; } }
html:root nav.bd-toc .bd-toc__box { display: block; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
html:root nav.bd-toc .bd-toc__title {
    display: block; list-style: none; cursor: pointer; margin: 0 0 10px; padding: 0; background: none; border: 0;
    font-family: inherit; font-size: 13px; line-height: 1.5; font-weight: 600; color: #5f6a85;
    letter-spacing: normal; text-transform: none; pointer-events: none;
}
html:root nav.bd-toc .bd-toc__title::-webkit-details-marker { display: none; }
html:root nav.bd-toc .bd-toc__title::marker { content: ""; }
html:root nav.bd-toc .bd-toc__title::before { content: none; }
html:root nav.bd-toc .bd-toc__title::after { content: none; }
html:root nav.bd-toc .bd-toc__list {
    display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; border: 0; background: none;
    max-height: none; overflow: visible;
}
html:root nav.bd-toc .bd-toc__list li { display: block; list-style: none; margin: 0; padding: 0; border: 0; background: none; }
html:root nav.bd-toc a.bd-toc__a {
    display: grid; grid-template-columns: 2px minmax(0, 1fr); gap: 12px; align-items: stretch;
    width: auto; height: auto; margin: 0; padding: 7px 0; background: none; border: 0; border-radius: 0; box-shadow: none; transform: none;
    font-family: inherit; font-size: 13.5px; line-height: 1.35; font-weight: 500; color: #5f6a85;
    letter-spacing: normal; text-transform: none; text-decoration: none; text-shadow: none; opacity: 1; white-space: normal;
    transition: color .15s ease;
}
html:root nav.bd-toc a.bd-toc__a::before, html:root nav.bd-toc a.bd-toc__a::after { content: none; }
html:root nav.bd-toc a.bd-toc__a > i {
    display: block; width: 2px; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 1px; background: #e3e7ef; transform: none;
}
html:root nav.bd-toc a.bd-toc__a:hover, html:root nav.bd-toc a.bd-toc__a:focus-visible { color: #11193f; background: none; box-shadow: none; }
/* Current item: dark text and a coral bar. The weight stays 500; the text-shadow thickens the strokes without moving a pixel. */
html:root nav.bd-toc a.bd-toc__a.is-current, html:root nav.bd-toc a.bd-toc__a[aria-current="true"] {
    color: #11193f; font-weight: 500; background: none; box-shadow: none; text-shadow: .4px 0 0 currentColor;
}
html:root nav.bd-toc a.bd-toc__a.is-current > i, html:root nav.bd-toc a.bd-toc__a[aria-current="true"] > i { background: #ff5247; }

/* Stacked, collapsible box where there is no room for a side index (same as the blog on phones). */
@media (max-width: 999px) {
    html:root nav.bd-toc { position: static; width: 100%; }
    html:root nav.bd-toc .bd-toc__box { border-radius: 10px; background: #f6f8f9; box-shadow: inset 0 0 0 1px #e3e7ef; padding: 0 18px; }
    html:root nav.bd-toc .bd-toc__title { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 16px 0; color: #11193f; pointer-events: auto; }
    html:root nav.bd-toc .bd-toc__title::after { content: "+"; color: #ff5247; font-size: 20px; font-weight: 400; }
    html:root nav.bd-toc .bd-toc__box[open] .bd-toc__title::after { content: "\2212"; }
    html:root nav.bd-toc .bd-toc__list { padding-bottom: 14px; }
}

/* Pages without a side column (use cases, long product pages): on wide screens the index sits in the left margin and
   follows the scroll; below that it is the same stacked box in the page flow. */
html:root nav.bd-toc.bd-toc--rail { height: 0; width: 100%; max-width: none; overflow: visible; }
@media (min-width: 1740px) {
    html:root nav.bd-toc.bd-toc--rail .bd-toc__box { position: absolute; top: 0; left: calc(50% - var(--bd-wrap-max, 1280px) / 2 - 224px); width: 200px; }
}
@media (min-width: 1000px) and (max-width: 1739px) {
    html:root nav.bd-toc.bd-toc--rail { position: static; height: auto; width: auto; max-width: var(--bd-wrap, 1280px); margin: 20px auto 0; }
    html:root nav.bd-toc.bd-toc--rail .bd-toc__box { border-radius: 10px; background: #f6f8f9; box-shadow: inset 0 0 0 1px #e3e7ef; padding: 0 18px; }
    html:root nav.bd-toc.bd-toc--rail .bd-toc__title { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 16px 0; color: #11193f; pointer-events: auto; }
    html:root nav.bd-toc.bd-toc--rail .bd-toc__title::after { content: "+"; color: #ff5247; font-size: 20px; font-weight: 400; }
    html:root nav.bd-toc.bd-toc--rail .bd-toc__box[open] .bd-toc__title::after { content: "\2212"; }
    html:root nav.bd-toc.bd-toc--rail .bd-toc__list { padding-bottom: 14px; }
}
@media (max-width: 999px) {
    html:root nav.bd-toc.bd-toc--rail { height: auto; width: auto; max-width: var(--bd-wrap, 1280px); margin: 16px auto 0; }
}
@media print { nav.bd-toc { display: none !important; } }