/* changelog.php — page-specific styles only. Shared tokens, nav, footer,
   .btn base styles come from landing.css (loaded first by head.php); the
   .policy-hero/.policy-lead/.policy-body shell comes from legal.css
   (already reused by security.php for the same reason: one shared page
   frame beats forking a near-identical one). This page is currently a
   single v1.0.0 release card grouped into themed categories, not a
   per-date entry list — kept as its own small file rather than folded
   into legal.css since a future v1.0.x release will reuse this exact
   card shape. */

/* Two-column layout: release content + a right-hand list of past
   releases (currently just the one v1.0.0 link — the sidebar is built
   now so a future v1.0.x entry only needs one new <a>, not a layout
   change). Sidebar goes first in source order on narrow screens (see
   media query) since "which releases exist" is useful context before
   reading the current one, same reasoning docs sites use for this
   pattern. No max-width/margin here on purpose — this element already
   carries the shared .container class in the markup (same one
   policy-hero/policy-lead above use), so its edges line up with the
   rest of the page instead of floating narrower in the middle of it. */
.changelog-layout {
    padding: 8px 0 56px;
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 40px;
    align-items: start;
}

.changelog-sidebar {
    position: sticky;
    top: 24px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    background: var(--white);
}
.changelog-sidebar-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ash);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 12px;
}
.changelog-sidebar-list { display: flex; flex-direction: column; gap: 2px; }
.changelog-sidebar-link {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
}
.changelog-sidebar-link:hover { background: var(--paper); }
.changelog-sidebar-link.is-current { background: var(--green-light); }
.changelog-sidebar-version {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
}
.changelog-sidebar-label { font-size: 12px; color: var(--ash); }

.changelog-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.changelog-entry {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 32px 32px 8px;
}

.changelog-entry-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.changelog-version {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: white;
    background: var(--ink);
    padding: 3px 10px;
    border-radius: 6px;
    letter-spacing: 0.02em;
}

.changelog-date {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ash);
}

.changelog-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
    margin: 6px 0 0;
    flex: 1 1 100%;
}

.changelog-category {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--green-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 26px 0 10px;
}
.changelog-group:first-child .changelog-category { margin-top: 0; }

.changelog-group ul {
    margin: 0 0 14px;
    padding-left: 22px;
    color: var(--text);
    font-size: 15px;
}
.changelog-group li { margin-bottom: 7px; }
.changelog-group li:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
    .changelog-layout { grid-template-columns: 1fr; }
    .changelog-sidebar { position: static; order: -1; }
}

@media (max-width: 700px) {
    .changelog-entry { padding: 24px 20px 6px; }
}