/* Scroll long article/product/category TOCs without hiding the toggle. */
body #main-content :is(.journal-article__toc [data-toc-list], .product-toc [data-toc-list], .catalog-toc) {
    max-height: min(420px, 55vh);
    max-height: min(420px, 55dvh);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: #0052cc #f1f5f9;
    scrollbar-gutter: stable;
    padding-inline-end: 10px;
    scroll-padding-block: 8px;
}

body #main-content .catalog-toc > a {
    flex-shrink: 0;
    overflow-wrap: anywhere;
}

body #main-content :is(.journal-article__toc [data-toc-list], .product-toc [data-toc-list], .catalog-toc):focus-visible {
    outline: 2px solid #0052cc;
    outline-offset: 3px;
}

@media (max-width: 760px) {
    body #main-content :is(.journal-article__toc [data-toc-list], .product-toc [data-toc-list], .catalog-toc) {
        max-height: min(300px, 45vh);
        max-height: min(300px, 45dvh);
    }
}

/* Supporting notes in CMS content, distinct from the main reading flow.
   Cobalt #0052cc and slate #f8fafc follow the approved prose/reference palette. */
body #main-content :is(#journal-article-content, #product-seo-content, .cms-prose--category, .cms-prose--page) blockquote {
    margin: 24px 0;
    padding: 16px 20px;
    border: 1px solid #e2e8f0;
    border-inline-start: 3px solid #0052cc;
    border-radius: 4px;
    background: #f8fafc;
    color: #475569;
    font: 400 14px/1.75 "Inter", sans-serif;
    box-shadow: none;
    overflow-wrap: anywhere;
}

body #main-content :is(#journal-article-content, #product-seo-content, .cms-prose--category, .cms-prose--page) blockquote p {
    margin: 0 0 10px;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

body #main-content :is(#journal-article-content, #product-seo-content, .cms-prose--category, .cms-prose--page) blockquote > :first-child {
    margin-top: 0;
}

body #main-content :is(#journal-article-content, #product-seo-content, .cms-prose--category, .cms-prose--page) blockquote > :last-child {
    margin-bottom: 0;
}

body #main-content :is(#journal-article-content, #product-seo-content, .cms-prose--category, .cms-prose--page) blockquote cite {
    display: block;
    margin-top: 10px;
    color: #64748b;
    font-size: 12px;
}

/* Scoped CMS hierarchy. Cobalt follows the approved reference/prose palette. */
body #main-content :is(#journal-article-content, #product-seo-content, .cms-prose--page) :is(h2, h3, h4) {
    font-family: "Geist", "Inter", sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -.015em;
    text-align: start !important;
    text-transform: none;
    overflow-wrap: anywhere;
    scroll-margin-top: 110px;
}

body #main-content :is(#journal-article-content, #product-seo-content, .cms-prose--page) h2 {
    margin: 40px 0 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #0052cc !important;
    font-size: clamp(26px, 2.2vw, 32px) !important;
}

body #main-content :is(#journal-article-content, #product-seo-content, .cms-prose--page) h3 {
    margin: 28px 0 12px;
    padding: 0;
    border: 0;
    color: #006a61 !important;
    font-size: clamp(21px, 1.8vw, 24px) !important;
}

body #main-content :is(#journal-article-content, #product-seo-content, .cms-prose--page) h4 {
    margin: 20px 0 8px;
    padding: 0;
    border: 0;
    color: #334155 !important;
    font-size: 18px !important;
    letter-spacing: 0;
}

/* Prevent editor formatting from overriding heading levels. */
body #main-content :is(#journal-article-content, #product-seo-content, .cms-prose--page) :is(h2, h3, h4) :is(span, strong, b, em, a) {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

body #main-content :is(#journal-article-content, #product-seo-content, .cms-prose--page) > :is(h2, h3, h4):first-child {
    margin-top: 0;
}

body #main-content :is(#journal-article-content, #product-seo-content, .cms-prose--page) :is(h2, h3, h4) + :is(h3, h4) {
    margin-top: 16px;
}

body #main-content :is(.journal-article__toc, .product-toc) ol {
    padding: 0;
    list-style: none;
}

body #main-content :is(.journal-article__toc, .product-toc) li {
    margin: 0 0 6px;
}

body #main-content :is(.journal-article__toc, .product-toc) a {
    display: block;
    padding: 7px 8px;
    color: #334155;
    font: 400 13px/1.6 "Inter", sans-serif;
    overflow-wrap: anywhere;
    border-radius: 4px;
    text-decoration: none;
}

body #main-content :is(.journal-article__toc, .product-toc) .toc-level-2 > a {
    color: #0052cc;
    font-weight: 700;
}

body #main-content :is(.journal-article__toc, .product-toc) .toc-level-3 {
    margin-inline-start: 12px;
    border-inline-start: 1px solid #e2e8f0;
}

body #main-content :is(.journal-article__toc, .product-toc) .toc-level-4 {
    margin-inline-start: 24px;
    border-inline-start: 1px solid #e2e8f0;
}

body #main-content :is(.journal-article__toc, .product-toc) a:is(:hover, [aria-current]) {
    color: #0052cc;
    background: #f1f5f9;
}

body #main-content :is(.journal-article__toc, .product-toc) a:focus-visible {
    outline: 2px solid #0052cc;
    outline-offset: 2px;
}

@media (max-width: 600px) {
    body #main-content :is(#journal-article-content, #product-seo-content, .cms-prose--page) h2 {
        margin-top: 32px;
        padding: 0;
    }
}

/* Static CMS pages follow the article reading typography. Keep these rules
   scoped to the content body, leaving page titles and site chrome unchanged. */
body #main-content .cms-prose--page {
    font: 400 16px/1.85 "Inter", sans-serif;
    color: #334155;
    overflow-wrap: anywhere;
}
body #main-content .cms-prose--page :is(p, ul, ol) {
    margin: 0 0 18px;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit;
}
body #main-content .cms-prose--page :is(ul, ol) { padding-inline-start: 24px; }
body #main-content .cms-prose--page li + li { margin-top: 8px; }
body #main-content .cms-prose--page :is(span, strong, b, em, a, li) {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}
body #main-content .cms-prose--page :is(h5, h6) {
    font: 700 16px/1.35 "Geist", "Inter", sans-serif !important;
    margin: 20px 0 8px;
    color: #334155;
}
body #main-content .cms-prose--page figcaption {
    font: 400 11px/1.7 "Inter", sans-serif;
    color: #64748b;
}
body #main-content .cms-prose--page table { font: 400 12px/1.7 "Inter", sans-serif; }
body #main-content .cms-prose--page :is(th, td) { font-size: inherit; line-height: inherit; }
body #main-content .cms-prose--page th { font-family: "JetBrains Mono", monospace; }
body #main-content .cms-prose--page > :last-child { margin-bottom: 0; }
@media(max-width:760px) { body #main-content .cms-prose--page { font-size: 15px; } }
