/* ============================================================
   glossary.css — the words used in a report.

   Loaded after yuzutrace.css, which owns the shell and the tokens. Every class
   here was checked as free in yuzutrace.css before being written.

   Set as a definition list rather than as cards: the page is prose about
   vocabulary, and boxing each term would make fourteen short paragraphs look
   like fourteen products.
   ============================================================ */

.glossbody .col { max-width: var(--column); }

.gloss { margin: 0; display: grid; gap: 0; }

.gloss__entry {
    display: grid;
    gap: .45rem;
    padding: 1.6rem 0;
    border-top: 1px solid var(--hair);
}
.gloss__entry:first-child { border-top: 0; padding-top: .25rem; }
.gloss__entry:last-child { border-bottom: 1px solid var(--hair); }

/* Term and definition side by side once there is room, so the eye can run
   down the terms alone without reading the prose. */
@media (min-width: 860px) {
    .gloss__entry {
        grid-template-columns: 13rem 1fr;
        column-gap: 2.25rem;
        align-items: baseline;
    }
}

.gloss dt {
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.35rem;
    line-height: 1.2;
    color: var(--bone);
}

.gloss dd {
    margin: 0;
    font-size: .97rem;
    line-height: 1.68;
    color: var(--bone-2);
    max-width: 62ch;
}

/* The three severity rungs are the only words on this page set in bold, and
   they are bold because the report sets them that way too. */
.gloss dd b { font-weight: 500; color: var(--bone); }
.gloss dd i { font-style: italic; color: var(--bone); }