/* changelog: a rank sheet of releases. Version numerals in the narrow cut like rank plates, a sticky index of every
   version on wide screens (a scrolling strip on phones), and each change marked New, Improved or Fixed in the
   product's own rise, gold and ink. Markup comes from release/changelog.py (CHANGELOG.md is the source). */

.changelog { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--s8); align-items: start; }
.changelog > h1, .changelog > .lede { grid-column: 1 / -1; }

/* version index */
.rel-index { margin: 0 0 var(--s6); border-block: 1px solid var(--line); }
.rel-index ul { display: flex; gap: var(--s5); overflow-x: auto; margin: 0; padding: var(--s3) 0; list-style: none; scrollbar-width: thin; }
.rel-index li { flex: none; margin: 0; display: flex; align-items: baseline; gap: var(--s2); }
.rel-index a { font-weight: 800; font-stretch: 62%; font-size: 1.25rem; font-variant-numeric: tabular-nums; color: var(--ink); text-decoration: none; white-space: nowrap; }
.rel-index a:hover, .rel-index a:focus-visible { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
.rel-index time { font-size: var(--t-small); color: var(--muted); white-space: nowrap; }

/* one release */
.changelog .release { border-top: 2px solid var(--ink); padding-top: var(--s4); margin: 0 0 var(--s7); scroll-margin-top: var(--s6); }
.rel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.rel-head .ver { font-weight: 800; font-stretch: 62%; font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink); text-decoration: none; }
.rel-head .ver:hover, .rel-head .ver:focus-visible { color: var(--gold-text); }
.rel-head .date { font-size: var(--t-small); color: var(--muted); white-space: nowrap; }

/* entries: kind mark in a fixed column, the change beside it */
.changelog .entries { list-style: none; margin: 0; padding: 0; max-width: none; }
.changelog .entry { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--s4); padding: var(--s3) 0; margin: 0; border-bottom: 1px solid var(--line); line-height: 1.5; }
.changelog .entry:last-child { border-bottom: 0; }
.changelog .kind { align-self: start; margin-top: 0.2em; padding-left: var(--s2); border-left: 3px solid currentColor; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; }
.entry--new .kind { color: var(--rise); }
.entry--improved .kind { color: var(--gold-text); }
.entry--fixed .kind { color: var(--muted); }
.changelog .from-review { display: inline-block; margin-left: var(--s2); padding: 0 6px; border: 1px solid var(--line); border-radius: var(--radius-s); font-size: 0.75rem; color: var(--muted); white-space: nowrap; }

@media (max-width: 560px) {
  .changelog .entry { grid-template-columns: minmax(0, 1fr); row-gap: var(--s1); }
  .changelog .kind { justify-self: start; margin-top: 0; }
}

/* wide screens: the index becomes a sticky rail beside the releases */
@media (min-width: 960px) {
  .changelog { grid-template-columns: 11rem minmax(0, 72ch); }
  .rel-index { grid-column: 1; grid-row: 3 / span 200; position: sticky; top: var(--s6); margin: 0; border: 0; }
  .rel-index ul { flex-direction: column; gap: 0; overflow: visible; padding: 0; border-left: 1px solid var(--line); }
  .rel-index li { justify-content: space-between; padding: var(--s2) 0 var(--s2) var(--s4); }
  .rel-index a { font-size: 1.125rem; }
  .changelog .release { grid-column: 2; }
}