/* changelog: a page of the exercise book. Releases are written straight on the sheet: the version in italic red
   like a dated entry, underlined in the margin red, the changes on the faint blue rules. New is marked in
   the green of the cover stamp, Improved in ink, Fixed underlined with the yellow highlighter. */

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

.rel-index { margin: 4px 0 26px; border-block: 1px solid var(--rule); }
.rel-index ul { display: flex; gap: 22px; overflow-x: auto; margin: 0; padding: 10px 0; list-style: none; }
.rel-index li { flex: none; display: flex; align-items: baseline; gap: 8px; margin: 0; }
.rel-index a { font-style: italic; font-weight: 600; font-size: 19px; color: var(--trans); text-decoration: none; white-space: nowrap; }
.rel-index a:hover, .rel-index a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.rel-index time { font-size: 14px; color: var(--muted); white-space: nowrap; }

.changelog .release { margin: 0 0 40px; scroll-margin-top: 24px; }
.rel-head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 6px; border-bottom: 2px solid var(--margin); }
.rel-head .ver { font-style: italic; font-weight: 600; font-size: 28px; line-height: 1.2; color: var(--trans); text-decoration: none; }
.rel-head .ver:hover, .rel-head .ver:focus-visible { text-decoration: underline; }
.rel-head .date { font-size: 16px; color: var(--muted); }

.changelog .entries { list-style: none; margin: 0; padding: 0; max-width: none; }
.changelog .entry { margin: 0; padding: 7px 0; min-height: var(--step); border-bottom: 1px solid var(--rule); font-size: 18px; line-height: 1.55; }
.changelog .entry:last-child { border-bottom: 0; }
.changelog .kind { margin-right: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.entry--new .kind { color: var(--accent); }
.entry--improved .kind { color: var(--ink); }
.entry--fixed .kind { padding: 0 4px; background: var(--mark); color: var(--mark-ink); }
.changelog .from-review { margin-left: 6px; font-size: 14px; font-style: italic; color: var(--trans); white-space: nowrap; }

@media (max-width: 560px) {
  .rel-head .ver { font-size: 24px; }
}

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