/* Articles section: article list and article pages.
   Colors and fonts come from the brand tokens in dimeshooters/style.css. */

/* ---- Article list ---- */

.article-list {
    max-width: 46rem;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
}

.article-list-header h1 {
    font-family: var(--ds-heading-font);
    font-weight: 700;
    margin-bottom: .5rem;
}

.article-list-header p {
    color: var(--ds-secondary);
    max-width: 40rem;
}

.article-card {
    display: block;
    background: var(--ds-white);
    border: 1px solid rgba(26, 23, 20, 0.12);
    border-left: 4px solid var(--ds-accent);
    border-radius: .5rem;
    padding: 1.1rem 1.3rem;
    margin: 1.25rem 0;
    text-decoration: none;
    color: var(--ds-ink);
    transition: box-shadow .15s ease;
}

.article-card:hover {
    box-shadow: 0 4px 14px rgba(26, 23, 20, 0.12);
    color: var(--ds-ink);
}

.article-card h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: .4rem;
}

.article-card p {
    color: var(--ds-secondary);
    margin-bottom: .5rem;
}

.article-card-cta {
    color: var(--ds-accent-on-light);
    font-weight: 600;
    font-size: .95rem;
}

/* ---- Article masthead: the full brand lockup (logo + wordmark) heads every
   article, so shared or printed copies carry the brand. Same geometry as the
   site header lockup, recolored for the light surface. ---- */

.article-masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: .6rem;
    border-bottom: 1px solid rgba(26, 23, 20, 0.12);
    margin-bottom: 1rem;
}

.article-masthead-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.24em;
    font-family: var(--ds-wordmark-font);
    font-weight: 600;
    font-size: 1.45rem;
    text-transform: lowercase;
    letter-spacing: -0.01em;
    color: var(--ds-ink);
    text-decoration: none;
}

.article-masthead-brand:hover {
    color: var(--ds-ink);
}

.article-masthead-brand img {
    height: 1em;
    width: auto;
}

.article-masthead-brand .ds-wordmark-accent {
    color: var(--ds-accent-on-light);
}

.article-pdf-button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--ds-heading-font);
    font-weight: 600;
    font-size: .95rem;
    color: var(--ds-accent-on-light);
    border: 1px solid var(--ds-accent-on-light);
    border-radius: .375rem;
    padding: .3rem .8rem;
    text-decoration: none;
}

.article-pdf-button:hover {
    background: var(--ds-accent-on-light);
    color: var(--ds-white);
}

/* ---- Article body ---- */

.article-body {
    max-width: 46rem;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
    font-size: 1.05rem;
    line-height: 1.65;
}

.article-body h1 {
    font-size: 1.9rem;
    font-weight: 700;
    margin: .75rem 0 1rem;
    line-height: 1.25;
}

.article-body h2 {
    font-size: 1.45rem;
    font-weight: 600;
    margin: 2.25rem 0 .75rem;
}

.article-body img {
    max-width: 100%;
    height: auto;
}

/* Figures: block images centered; captions (tagged .article-caption by the
   renderer: paragraphs that are entirely one <em>) read as quiet left-aligned
   text under the figure. */
.article-body p > img:only-child {
    display: block;
    margin: 1.75rem auto .25rem;
}

.article-body p.article-caption {
    color: var(--ds-secondary);
    font-size: .92rem;
    text-align: left;
    margin: 0 0 1.75rem;
}

/* A figure of a single group (one target, no side-by-side comparison) is shown
   at about the width of one panel of a two-up figure, rather than filling the
   column, so a lone group does not dominate the page. The source image is full
   resolution and only its displayed width is capped, so it stays crisp. Centred
   like any block figure; self-contained so it works whether or not the image is
   wrapped in a paragraph. */
.article-body img.article-figure-solo {
    display: block;
    margin: 1.75rem auto .25rem;
    max-width: 24rem;
}

/* Collapsible Deep Dives: technical content, collapsed by default. */
.article-body details {
    background: var(--ds-light);
    border-left: 3px solid var(--ds-accent-on-light);
    border-radius: .375rem;
    padding: .8rem 1.1rem;
    margin: 1.5rem 0;
}

.article-body details summary {
    cursor: pointer;
    color: var(--ds-accent-on-light);
    font-weight: 600;
}

.article-body details[open] summary {
    margin-bottom: .75rem;
}

.article-body table {
    border-collapse: collapse;
    margin: 1rem auto;
}

.article-body th,
.article-body td {
    border: 1px solid rgba(26, 23, 20, 0.18);
    padding: .35rem .8rem;
    text-align: left;
}

.article-body th {
    background: var(--ds-light);
    font-weight: 600;
}

.article-body .katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    padding: .25rem 0;
}

.article-body hr {
    margin: 2.5rem 0 1.5rem;
}

/* ---- Article navigation tree ----
   A sticky column in the left margin on a wide screen: every article listed,
   the current one expanded to its own sections, so a reader can move across the
   Library and within the article from one place. Below the width where a margin
   column fits, it folds into a disclosure above the article. Modeled on the
   reference page's outline, but kept as its own classes so the two can diverge.
   The reading column stays put at grid-column 2, centred in the viewport, with
   the tree in the margin beside it rather than pushing it across. ---- */

.library-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 46rem) minmax(0, 1fr);
    column-gap: 1.5rem;
}

.library-layout .article-body {
    grid-column: 2;
}

.library-nav {
    grid-column: 1;
    justify-self: end;
    position: sticky;
    top: 5.5rem;
    align-self: start;
    width: min(15rem, 100%);
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    margin-top: 4.5rem;   /* clears the masthead, so it aligns with the title */
    padding-bottom: 1rem;
    font-size: .9rem;
    line-height: 1.4;
}

.library-nav-heading {
    font-family: var(--ds-heading-font);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ds-secondary);
    margin-bottom: .6rem;
    cursor: pointer;
    list-style: none;   /* no disclosure triangle in the margin column */
}

.library-nav-heading::-webkit-details-marker {
    display: none;
}

.library-nav-heading:hover {
    color: var(--ds-ink);
}

.library-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid rgba(26, 23, 20, 0.14);
}

.library-nav-item {
    position: relative;
}

.library-nav-item > a {
    display: block;
    padding: .3rem 1.6rem .3rem .7rem;
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--ds-secondary);
    text-decoration: none;
}

.library-nav-item > a:hover {
    color: var(--ds-ink);
}

/* The article the reader is on. */
.library-nav-item.is-current-article > a {
    border-left-color: var(--ds-accent);
    color: var(--ds-ink);
    font-weight: 600;
}

/* The current article's own sections, nested beneath it. */
.library-nav-sections {
    list-style: none;
    margin: .1rem 0 .4rem;
    padding: 0;
}

.library-nav-sections li a {
    display: block;
    padding: .2rem .7rem .2rem 1.4rem;
    color: var(--ds-secondary);
    text-decoration: none;
}

.library-nav-sections li a:hover {
    color: var(--ds-ink);
}

/* Where in the article the reader is. Set by library_nav.js; without the
   script every section link simply stays in the resting state. */
.library-nav-sections li a.is-current {
    color: var(--ds-ink);
    font-weight: 600;
}

/* Each article can expand to its own sections; library_nav.js adds this toggle
   at the row's right edge, leaving the article title a full-width link. Without
   the script every article's sections simply stay open. */
.library-nav-toggle {
    position: absolute;
    top: .15rem;
    right: 0;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ds-secondary);
}

.library-nav-toggle::before {
    content: "";
    display: block;
    width: .42rem;
    height: .42rem;
    margin: 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateX(-15%) rotate(-45deg);   /* points right: collapsed */
    transition: transform .15s ease;
}

.library-nav-toggle[aria-expanded="true"]::before {
    transform: translateY(-20%) rotate(45deg);     /* points down: expanded */
}

.library-nav-toggle:hover {
    color: var(--ds-accent-on-light);
}

/* Deep links and section-nav clicks must clear the sticky site header. */
.article-body h2 {
    scroll-margin-top: 5.5rem;
}

/* Below the point where a margin column fits, the tree becomes a block above
   the article rather than disappearing. */
@media (max-width: 1200px) {
    .library-layout {
        display: block;
    }

    .library-nav {
        position: static;
        /* Explicit rather than auto: a closed <details> sizes to its summary,
           which would leave the closed tree as a small pill over the page
           instead of a full-width row. */
        width: 100%;
        max-width: 46rem;
        max-height: none;
        margin: 1rem auto 0;
        padding: .9rem 1.1rem;
        background: var(--ds-white);
        border: 1px solid rgba(26, 23, 20, 0.12);
        border-radius: .375rem;
    }

    /* Closed here by the script, so the summary reads as a tappable row. */
    .library-nav-heading {
        margin-bottom: 0;
        list-style: revert;
    }

    .library-nav-heading::-webkit-details-marker {
        display: revert;
    }

    .library-nav[open] .library-nav-heading {
        margin-bottom: .6rem;
    }

    .library-nav-list {
        border-left: none;
    }

    .library-nav-item > a {
        border-left: none;
        padding-left: 0;
    }

    .library-nav-item.is-current-article > a {
        border-left: none;
    }
}

/* ---- Print / PDF ----
   These rules shape the downloadable PDF (built with headless Chromium by
   articles/scripts/build_article_pdf.mjs) as well as a plain browser print.
   The build script opens every Deep Dive first; paper cannot be clicked. */
@media print {
    /* Paper is white: drop the warm on-screen page and container surfaces.
       Tinted design elements inside the article (Deep Dive boxes, figure
       panels) keep their colors via printBackground. */
    body,
    .container {
        background: var(--ds-white) !important;
    }

    .ds-sticky-nav-wrapper,
    .article-pdf-button,
    .library-nav {
        display: none;
    }

    /* The reading column takes the page; no navigation margin in print. */
    .library-layout {
        display: block;
    }

    .article-body {
        max-width: none;
        padding: 0;
        font-size: 10.5pt;
    }

    .article-body img,
    .article-body table {
        break-inside: avoid;
    }

    .article-body p.article-caption {
        break-before: avoid;
    }

    .article-body h2 {
        break-after: avoid;
    }
}