@charset "UTF-8";
/* CSS Document */

/* =========================================================
   Table of Contents styling (Freight + aligned numbering)
   ========================================================= */

:root {
    /* tune these */
    --toc-num-col: 3.2ch; /* width reserved for chapter numbers */
    --toc-gap: 1.1ch; /* gap between number and title */
    --toc-hover: rgba(
        47,
        143,
        91,
        0.14
    ); /* "very light green" (uses your green vibe) */
    --toc-rule: rgba(0, 0, 0, 0.14);
    --font-primary: "freight-sans-pro", sans-serif;
    --font-display: "dolce", sans-serif;

    --weight-book: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 900;
}

.toc {
    font-family: "freight-sans-pro", sans-serif;
    font-size: 1.25rem;
    line-height: 1.55;
    max-width: 62ch;
}

/* remove default list spacing */
.toc-front,
.toc-chapters {
    margin: 0;
    padding: 0;
}

/* ---------- Link baseline (shared hover rectangle) ---------- */

.toc a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    width: 100%;

    /* hover rectangle */
    background-image: linear-gradient(var(--toc-hover), var(--toc-hover));
    background-repeat: no-repeat;
    background-size: 0% 100%;
    background-position: 0 0;

    transition:
        background-size 0.18s ease,
        color 0.18s ease;
    border-radius: 6px;
    padding: 0.12em 0.35em; /* gives the rectangle breathing room */
}

.toc a:hover {
    background-size: 100% 100%;
}

/* ---------- PART links (clickable headings) ---------- */

.toc a.toc-part {
    display: block;
    margin-top: 1.25em;
    padding-top: 1em;

    /* separator between parts */
    border-top: 3px dotted var(--toc-rule);

    /* distinct feel */
    font-weight: 700;
    letter-spacing: 0.01em;
    font-size: 1.5rem;
}

/* optional: make PART feel slightly smaller caps-y without forcing uppercase */
.toc-part {
    font-variant-caps: all-small-caps;
}

/* ---------- Front matter + appendices (unnumbered) ---------- */
/* Align these so their LEFT EDGE matches the chapter number column */

article nav.toc ul.toc-front {
    list-style: none;
}

article nav.toc ul.toc-front li {
    margin: 0.35em 0;
    padding-left: calc(
        var(--toc-num-col) + var(--toc-gap)
    ); /* align with chapter titles */
    font-weight: var(--weight-book);
}
article nav.toc ul.toc-front li::before {
    content: none;
}

/* ---------- Chapters (numbered) ---------- */
/* Use CSS counters for consistent number column + gap */

.toc-chapters {
    list-style: none; /* hide native markers */
    counter-reset: tocItem; /* each <ol> restarts; we'll seed with data below */
    margin-top: 0.15em;
}

/* If you use <ol start="11"> etc, reflect it by seeding a CSS var on the <ol>.
   If you don't want to set vars, you can skip this and accept per-part restarts.
   Recommended: set style="--toc-start: 10" for start=11 (because counter increments). */
.toc-chapters {
    --toc-start: 0;
}
.toc-chapters {
    counter-reset: tocItem var(--toc-start);
}

.toc-chapters > li {
    counter-increment: tocItem;
    margin: 0.35em 0;

    display: grid;
    grid-template-columns: var(--toc-num-col) 1fr;
    column-gap: var(--toc-gap);
    align-items: baseline;
}

/* the number */
.toc-chapters > li::before {
    content: counter(tocItem) ".";
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: rgba(0, 0, 0, 0.6);
}

/* make the chapter link fill the title column */
.toc-chapters > li > a {
    width: 100%;
}

/* ---------- Optional: subtle hierarchy polish ---------- */

/* Slightly softer color for non-Parts vs Parts (keeps Parts distinct) */
.toc-front a,
.toc-chapters a {
    color: rgba(0, 0, 0, 0.88);
}

/* Keep hover readable */
.toc a:hover {
    color: rgba(0, 0, 0, 0.92);
}

/* Default: ignore the line break */
br.mobile-only {
    display: none;
}

/* Mobile: allow the line break */
@media (max-width: 920px) {
    br.mobile-only {
        display: inline;
    }

    /* Disable hover animation on mobile to prevent partial animation on tap */
    .toc a {
        transition: none;
        background-size: 0% 100% !important;
        background-image: none;
    }

    .toc a:hover {
        background-size: 0% 100% !important;
    }
}