/* ═══════════════════════════════════════════════════════════════
   Public changelog page  (/changelog)
   Namespace: .chg

   Public page, so it uses the landing tokens (--lp-*) — those already
   resolve light/dark from [data-theme] and the nav height from
   --lp-nav-height. No new color literals.
   ═══════════════════════════════════════════════════════════════ */

/* ── Page head ──
   Modelled on .doc-hero (/components), the repo's inner-page head.
   Deliberately NOT .lp-section-*: those are CENTERED landing-section
   classes, and .lp-section-subtitle carries `margin: 0 auto`, which
   indented the subtitle 191px inside a left-aligned column. */
.chg-hero {
    margin-bottom: 2.25rem;
}

.chg-hero h1 {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--lp-text);
    margin: 0 0 0.5rem;
}

.chg-hero-sub {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--lp-text-secondary);
    max-width: 640px;
    margin: 0;
}

.chg-hero-meta {
    font-size: 0.82rem;
    color: var(--lp-text-muted);
    margin: 0.5rem 0 0;
}

/* The running build's version, inside the meta line. Slightly dimmer than the counts
   so it reads as reference, not as a headline figure — but present, because "which
   version am I on" is the question the release sections answer. */
.chg-hero-version {
    color: var(--lp-text-muted);
    opacity: 0.85;
}

/* ── Shell: sticky rail + fluid content ──
   The nav is position:fixed at --lp-nav-height. The legal pages get their
   offset from .legal-hero's 9rem top padding; a sidebar layout has no hero,
   so the rail pays that offset itself or its first item hides behind the nav. */
.chg-shell {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);   /* NOT bare 1fr — see notes */
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: calc(var(--lp-nav-height) + 3rem) 1.5rem 5rem;
    align-items: start;
}

/* Grid items default to min-width:auto, i.e. min-content. Anything unshrinkable
   inside (a nowrap chip row, a long word) then floors the track and the content
   is clipped by an ancestor's overflow-x:hidden while scrollWidth still reads 0.
   Same defect class as issues #176 and #90. */
.chg-shell > * {
    min-width: 0;
}

/* ── Left rail ── */
.chg-side {
    position: sticky;
    top: calc(var(--lp-nav-height) + 1.5rem);
    max-height: calc(100vh - var(--lp-nav-height) - 3rem);
    overflow-y: auto;
    padding-right: 0.25rem;
}

.chg-nav-section {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lp-text-muted);
    padding: 1rem 0.6rem 0.4rem;
}

.chg-nav-section:first-child {
    padding-top: 0;
}

.chg-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--lp-text-secondary);
    font-size: 0.84rem;
    font-weight: 500;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.chg-nav-item:hover {
    background: var(--lp-bg-alt);
    color: var(--lp-text);
}

.chg-nav-item.is-active {
    background: var(--lp-primary-light);
    color: var(--lp-primary);
    font-weight: 600;
}

/* Dark: --lp-primary-light is a translucent tint, so the active label needs the
   brighter primary to stay legible on it. */
[data-theme="dark"] .chg-nav-item.is-active {
    color: var(--lp-primary-hover);
}

.chg-nav-count {
    font-size: 0.72rem;
    color: var(--lp-text-muted);
    font-variant-numeric: tabular-nums;
}

.chg-nav-item.is-active .chg-nav-count {
    color: inherit;
    opacity: 0.75;
}

/* ── Entries ── */
/* A release section is a jump target. Without this the heading lands under the
   fixed nav. Same pattern as .doc-group on /components. */
.chg-release {
    scroll-margin-top: calc(var(--lp-nav-height) + 1.5rem);
    margin-bottom: 2.5rem;
}

/* The section gap above exists so this heading has something to separate; without
   both, two releases ran together with a 0px gap and nothing naming either. */
.chg-release:last-child {
    margin-bottom: 0;
}

/* Mirrors /components' .doc-group-heading so the two list pages read as one family. */
.chg-release-head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--lp-border);
}

.chg-release-head h2 {
    font-size: 1.15rem;
    margin: 0;
}

.chg-release-meta {
    font-size: 0.78rem;
    color: var(--lp-text-muted);
}

.chg-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.chg-entry {
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-white);
    padding: 1.15rem 1.35rem;
}

.chg-entry-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}

.chg-entry-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--lp-text);
    margin: 0;
}

.chg-entry-meta {
    font-size: 0.78rem;
    color: var(--lp-text-muted);
    white-space: nowrap;
}

.chg-entry-items {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.chg-entry-items li {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--lp-text-secondary);
}

/* ── "Built, but not switched on yet" ──
   Work that is finished and deliberately off. Shown BELOW the live list, never
   inside it, and styled as visibly inactive so it cannot read as shipped. */
.chg-notyet {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--lp-border);
}

.chg-notyet-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--lp-text);
    margin: 0 0 0.5rem;
}

.chg-notyet-sub {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--lp-text-secondary);
    max-width: 640px;
    margin: 0 0 1.25rem;
}

.chg-entry--notyet {
    /* the whole card reads as inactive, not just its pill */
    border-style: dashed;
    background: transparent;
}

.chg-entry--notyet .chg-entry-title {
    color: var(--lp-text-secondary);
}

.chg-notyet-reason {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--lp-text-secondary);
    background: var(--lp-bg-alt);
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    margin: 0 0 0.75rem;
}

.chg-notyet-reason i {
    flex: none;
    margin-top: 0.15rem;
    opacity: 0.8;
}

/* The "Not yet" pill. Deliberately neutral — not a NEW/FIX/PERF colour, so it
   never reads as a shipped change. */
.chg-tag--soon {
    background: var(--lp-bg-alt);
    color: var(--lp-text-muted);
    border: 1px solid var(--lp-border);
}

/* ── Tag pill ── */
.chg-tag {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.14rem 0.45rem;
    border-radius: 0.375rem;
}

/* Light-theme tag colors. Dark equivalents below — the dark tints fail
   contrast on a white card, so each theme gets its own pair. */
.chg-tag--new {
    background: rgba(22, 163, 74, 0.14);
    color: #15803D;
}

.chg-tag--fix {
    background: rgba(37, 99, 235, 0.14);
    color: #1D4ED8;
}

.chg-tag--perf {
    background: rgba(217, 119, 6, 0.14);
    color: #B45309;
}

[data-theme="dark"] .chg-tag--new {
    background: rgba(22, 163, 74, 0.18);
    color: #4ADE80;
}

[data-theme="dark"] .chg-tag--fix {
    background: rgba(59, 130, 246, 0.18);
    color: #60A5FA;
}

[data-theme="dark"] .chg-tag--perf {
    background: rgba(217, 119, 6, 0.18);
    color: #FBBF24;
}

/* ── Empty state (a filter with nothing behind it) ── */
.chg-empty {
    border: 1px dashed var(--lp-border);
    border-radius: var(--lp-radius-lg);
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--lp-text-muted);
    font-size: 0.9rem;
}

.chg-empty i {
    display: block;
    font-size: 1.6rem;
    margin-bottom: 0.6rem;
    opacity: 0.7;
}

/* ════════════════ Mobile ════════════════ */
@media (max-width: 900px) {
    .chg-shell {
        /* minmax(0,1fr), not bare 1fr: the collapsed rail is a nowrap chip row
           whose min-content width would otherwise floor the track. */
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
        padding: calc(var(--lp-nav-height) + 1.5rem) 1.25rem 3.5rem;
    }

    /* Stacking the full rail above the content costs ~300px of furniture
       before the first entry, so at phone width it collapses to one
       horizontally-scrolling chip row instead. */
    .chg-side {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
        margin: 0 -1.25rem;
        padding-left: 1.25rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .chg-side::-webkit-scrollbar {
        display: none;
    }

    .chg-side-inner {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        min-width: 0;
        width: max-content;
        padding-right: 1.25rem;
    }

    .chg-nav-section {
        display: none;
    }

    .chg-nav-item {
        flex: 0 0 auto;
        width: auto;
        border: 1px solid var(--lp-border);
        border-radius: 999px;
        padding: 0.35rem 0.7rem;
        white-space: nowrap;
        background: var(--lp-white);
    }

    .chg-nav-item.is-active {
        border-color: var(--lp-primary);
    }

    .chg-nav-count {
        display: none;
    }

    .chg-hero h1 {
        font-size: 1.5rem;
    }

    .chg-entry {
        padding: 1rem 1.05rem;
    }
}

@media (max-width: 480px) {
    .chg-entry-items {
        padding-left: 1rem;
    }

    .chg-entry-items li {
        font-size: 0.85rem;
    }
}

/* ── Motion: respect a reduced-motion preference ── */
@media (prefers-reduced-motion: reduce) {
    .chg-nav-item {
        transition: none;
    }
}


/* ───────────────────────────────────────────────────────────────
   L1 · the changelog on the document sheet (feature 032)

   Same rail and entries as before — the filters are real links with
   server-computed counts — restyled to the sheet: sand rail, Fraunces
   headings, one 66ch measure, church red for the current state.
   ─────────────────────────────────────────────────────────────── */

.chg-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 56px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 8.5rem 1.5rem 5rem;
    align-items: start;
}

.chg-side { position: sticky; top: 96px; }

.chg-side-inner { background: var(--bf-sand, #e9e1d4); padding: 1.25rem 1.15rem; }

.chg-nav-section {
    margin: 0 0 0.6rem;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--bf-muted, #5d4440);
}

.chg-nav-section + .chg-nav-item { margin-top: 0; }
.chg-nav-item + .chg-nav-section { margin-top: 1.25rem; }

.chg-nav-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 0.35rem 0;
    font-size: 0.84375rem;
    line-height: 1.4;
    color: var(--bf-ink, #241413);
    text-decoration: none;
}

.chg-nav-item:hover { color: var(--bf-red, #7d0c14); }
.chg-nav-item.is-active { color: var(--bf-red, #7d0c14); font-weight: 600; }
.chg-nav-count { font-size: 0.75rem; color: var(--bf-muted, #5d4440); }

.chg-hero { max-width: 700px; }

.chg-hero h1 {
    margin: 0;
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-weight: 600;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: var(--bf-ink, #241413);
}

.chg-hero-sub {
    margin: 1.1rem 0 0;
    max-width: 52ch;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--bf-muted, #5d4440);
}

.chg-hero-meta { margin: 1.2rem 0 2.5rem; font-size: 0.8125rem; color: var(--bf-muted, #5d4440); }
.chg-hero-version { color: var(--bf-muted, #5d4440); }

.chg-release { margin: 0 0 2.75rem; }

.chg-release-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 0.9rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--bf-sand, #e9e1d4);
}

.chg-release-head h2 {
    margin: 0;
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-weight: 600;
    font-size: 1.625rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--bf-ink, #241413);
}

.chg-release-meta { font-size: 0.8125rem; color: var(--bf-muted, #5d4440); }

.chg-list { list-style: none; margin: 0; padding: 0; }

.chg-entry { padding: 0.9rem 0; border-top: 2px solid var(--bf-paper, #f2f0eb); }
.chg-entry:first-child { border-top: 0; }

.chg-entry-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }

.chg-entry-title {
    margin: 0;
    font-family: "DM Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--bf-ink, #241413);
}

.chg-entry-meta { font-size: 0.75rem; color: var(--bf-muted, #5d4440); white-space: nowrap; }

.chg-entry-items {
    margin: 0.45rem 0 0;
    padding-left: 1.15rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--bf-ink, #241413);
}

.chg-notyet {
    margin: 0 0 2rem;
    padding: 1rem 1.25rem;
    background: var(--bf-sand, #e9e1d4);
    border-left: 4px solid var(--bf-ink, #241413);
}

.chg-notyet-title { margin: 0 0 0.3rem; font-weight: 600; font-size: 1rem; color: var(--bf-ink, #241413); }
.chg-notyet-sub, .chg-notyet-reason { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--bf-muted, #5d4440); }

.chg-empty { padding: 2rem 0; color: var(--bf-muted, #5d4440); }

@media (max-width: 900px) {
    .chg-shell { grid-template-columns: 1fr; gap: 1.5rem; padding: 6.5rem 1.25rem 3rem; }
    .chg-side { position: static; }
    .chg-nav-item { padding: 0.3rem 0; }
    .chg-hero h1 { font-size: 2.25rem; }
}


/* L1 resets — the legacy changelog chrome (rail scrollbox, uppercase labels,
   card entries, pill badges) is replaced rather than inherited. */
.chg-side { max-height: none; overflow: visible; padding-right: 0; }

.chg-nav-section {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--bf-muted, #5d4440);
    padding: 0 0 0.5rem;
}

.chg-nav-item { border-radius: 0; padding: 0.35rem 0; color: var(--bf-ink, #241413); }
.chg-nav-item:hover { background: transparent; color: var(--bf-red, #7d0c14); }
.chg-nav-item.is-active { background: transparent; color: var(--bf-red, #7d0c14); }

.chg-entry { border: 0; border-radius: 0; background: transparent; padding: 0.9rem 0; }

.chg-entry-head { align-items: baseline; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 0.35rem; }
.chg-entry-title { order: 1; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.chg-entry-meta { order: 2; margin-left: auto; font-size: 0.75rem; }
.chg-tag {
    order: 3;
    flex: 0 0 auto;
    margin-left: 0.5rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bf-muted, #5d4440);
}

/* The rail's first label repeats the page title; the title is the heading. */
.chg-side-inner > .chg-nav-section:first-child { display: none; }