/* changelog: the edit timeline. Releases are clips laid on the dark bay: each opens with a film strip (sprocket
   holes on the reel black) carrying the version in JetBrains Mono, then its changes as rows on the clip. New is the
   capture magenta, Improved the film grey, Fixed outlined in the link pink. The version list is the track head. */

main.doc.changelog { max-width: 1040px; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 36px; align-items: start; }
.changelog > h1, .changelog > .lede { grid-column: 1 / -1; }

.rel-index { margin: 4px 0 26px; background: var(--reel); border: 1px solid var(--line); border-radius: var(--radius); }
.rel-index ul { display: flex; gap: 18px; overflow-x: auto; margin: 0; padding: 10px 14px; list-style: none; }
.rel-index li { flex: none; display: flex; align-items: baseline; gap: 8px; margin: 0; }
.rel-index a { font-family: var(--mono); font-size: 14px; color: var(--reel-text); text-decoration: none; white-space: nowrap; }
.rel-index a:hover, .rel-index a:focus-visible { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.rel-index time { font-size: 12px; color: var(--reel-muted); white-space: nowrap; }

.changelog .release { margin: 0 0 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); scroll-margin-top: 24px; }
.rel-head { display: flex; align-items: center; gap: 14px; padding: 18px 16px 12px; background-color: var(--reel); background-image: repeating-linear-gradient(90deg, var(--reel-clip) 0 8px, transparent 8px 16px); background-size: 100% 5px; background-repeat: no-repeat; background-position: 0 5px; border-bottom: 2px solid var(--accent); }
.rel-head .ver { font-family: var(--mono); font-size: 20px; color: var(--reel-text); text-decoration: none; }
.rel-head .ver:hover, .rel-head .ver:focus-visible { color: var(--link); }
.rel-head .date { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--reel-muted); white-space: nowrap; }

.changelog .entries { list-style: none; margin: 0; padding: 4px 16px 6px; max-width: none; }
.changelog .entry { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 12px; margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); line-height: 1.55; }
.changelog .entry:last-child { border-bottom: 0; }
.changelog .kind { justify-self: start; align-self: start; margin-top: 2px; padding: 1px 8px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; line-height: 1.6; }
.entry--new .kind { background: var(--accent); color: var(--accent-ink); }
.entry--improved .kind { background: var(--seg); color: var(--ink); }
.entry--fixed .kind { border: 1px solid var(--link); color: var(--link); }
.changelog .from-review { display: inline-block; margin-left: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }

@media (max-width: 560px) {
  .changelog .entries { padding: 2px 12px 4px; }
  .changelog .entry { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 940px) {
  main.doc.changelog { grid-template-columns: 160px minmax(0, 1fr); }
  .rel-index { grid-column: 1; grid-row: 3 / span 200; position: sticky; top: 24px; margin: 0; }
  .rel-index ul { flex-direction: column; gap: 0; overflow: visible; padding: 6px 12px; }
  .rel-index li { justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); }
  .rel-index li:last-child { border-bottom: 0; }
  .changelog .release { grid-column: 2; }
}