/* Reference pages: bibliographies, tables, datasets, and calculators.
   Loaded after articles.css, which supplies the body typography; this file
   only adds what a reference page has and an article does not.
   Colors and fonts come from the brand tokens in dimeshooters/style.css. */

/* ---- Layout: outline beside the reading column ----
   Three columns so the reading column stays exactly where it sits on an
   article page, centred in the viewport, with the outline in the margin
   beside it rather than pushing it across. ---- */

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

.reference-body {
    grid-column: 2;
}

.reference-outline {
    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;
}

.reference-outline-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 */
}

.reference-outline-heading::-webkit-details-marker {
    display: none;
}

.reference-outline-heading:hover {
    color: var(--ds-ink);
}

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

.reference-outline li a {
    display: block;
    padding: .3rem .7rem;
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--ds-secondary);
    text-decoration: none;
}

.reference-outline li a:hover {
    color: var(--ds-ink);
}

/* Where the reader currently is. Set by reference_outline.js; without the
   script every link simply stays in the resting state. */
.reference-outline li a.is-current {
    border-left-color: var(--ds-accent);
    color: var(--ds-ink);
    font-weight: 600;
}

.reference-outline-toggle-all {
    margin-top: .9rem;
    padding: 0;
    background: none;
    border: none;
    font-family: var(--ds-heading-font);
    font-size: .85rem;
    font-weight: 600;
    color: var(--ds-accent-on-light);
    cursor: pointer;
}

.reference-outline-toggle-all:hover {
    text-decoration: underline;
}

/* Below the point where a margin column fits, the outline becomes a block
   above the page rather than disappearing: on a phone this page is longest
   and needs it most. */
@media (max-width: 1200px) {
    .reference-layout {
        display: block;
    }

    .reference-outline {
        position: static;
        /* Explicit rather than auto: a closed <details> sizes to its summary,
           which would leave the closed outline as a small pill floating 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. */
    .reference-outline-heading {
        margin-bottom: 0;
        list-style: revert;
    }

    .reference-outline-heading::-webkit-details-marker {
        display: revert;
    }

    .reference-outline[open] .reference-outline-heading {
        margin-bottom: .6rem;
    }

    .reference-outline ol {
        border-left: none;
        columns: 2;
        column-gap: 1.5rem;
    }

    .reference-outline li a {
        padding: .2rem 0;
        border-left: none;
    }

    .reference-outline li a.is-current {
        border-left: none;
    }
}

@media (max-width: 560px) {
    .reference-outline ol {
        columns: 1;
    }
}

/* ---- Collapsible sections ----
   The toggle is added by the script; a section is open until a reader folds
   it, so find-in-page reaches everything by default. ---- */

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

.reference-section-toggle {
    margin-left: .5rem;
    padding: 0;
    width: 1.1rem;
    height: 1.1rem;
    vertical-align: middle;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ds-secondary);
}

.reference-section-toggle::before {
    content: "";
    display: block;
    width: .45rem;
    height: .45rem;
    margin: 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform .15s ease;
}

.reference-section-toggle[aria-expanded="false"]::before {
    transform: translateX(-25%) rotate(-45deg);
}

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

/* ---- Masthead badge: says which content type this is, since a reference
   page deliberately lacks an article's lead summary and key takeaways. ---- */

.reference-badge {
    font-family: var(--ds-heading-font);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ds-accent-on-light);
    border: 1px solid var(--ds-accent-on-light);
    border-radius: .375rem;
    padding: .25rem .7rem;
}

/* ---- Library list: the reference group under the articles ---- */

.reference-list-header {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(26, 23, 20, 0.12);
}

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

/* ---- Bibliography entries ---- */

.reference-entry {
    /* Deep links from the reading paths must clear the sticky site header,
       or the entry they point at lands underneath it. */
    scroll-margin-top: 5.5rem;
    background: var(--ds-white);
    border: 1px solid rgba(26, 23, 20, 0.12);
    border-left: 3px solid var(--ds-accent);
    border-radius: .375rem;
    padding: .9rem 1.1rem;
    margin: 1rem 0;
}

/* The citation line, then the annotation, then the two footers. Tighter than
   body prose: an entry is scanned far more often than it is read. */
.reference-entry p {
    margin-bottom: .5rem;
}

.reference-entry p:last-child {
    margin-bottom: 0;
}

/* A deep link from a reading path lands on an entry; tint it briefly enough
   to find, quietly enough not to shout. */
.reference-entry:target {
    border-left-color: var(--ds-accent-on-light);
    background: var(--ds-light);
}

.reference-access {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .75rem;
    font-size: .9rem;
}

.reference-access a {
    font-family: var(--ds-heading-font);
    font-weight: 600;
    color: var(--ds-accent-on-light);
    text-decoration: none;
    /* Long archive URLs must not push the card wide on a phone. */
    overflow-wrap: anywhere;
}

.reference-access a:hover {
    text-decoration: underline;
}

.reference-access span {
    color: var(--ds-secondary);
}

/* Public domain is the one status worth calling out: it means the reader can
   have the source outright rather than through a publisher. */
.reference-access-public-domain span {
    color: var(--ds-accent-on-light);
    font-weight: 600;
}

/* An entry whose source has no reliable home left. Saying so is the point;
   the muted treatment keeps it from reading as an error. */
.reference-access-unavailable a {
    color: var(--ds-secondary);
}

.reference-rights {
    font-size: .85rem;
    line-height: 1.5;
    color: var(--ds-secondary);
}

/* ---- Print ---- */

@media print {
    .reference-entry {
        break-inside: avoid;
    }

    .reference-badge,
    .reference-outline,
    .reference-section-toggle {
        display: none;
    }

    /* The grid collapses so the reading column takes the page. Sections are
       forced open here as well as by the script's beforeprint handler, which
       browsers do not all fire. */
    .reference-layout {
        display: block;
    }

    .reference-section-body[hidden] {
        display: block !important;
    }
}