/* changelog: price tags on the stall. Each release is a paper tag cut at the top corners with a punched hole, the
   version printed large like a price; its changes are listed down the tag. New is in the coral of the string,
   Improved in ink, Fixed in the muted grey. The version list is a ruler of ticks, like the hero tag's bottom edge. */

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

.rel-index { margin: 4px 0 28px; padding-bottom: 8px; background: var(--tick) repeat-x left bottom; }
.rel-index ul { display: flex; gap: 22px; overflow-x: auto; margin: 0; padding: 8px 0; list-style: none; }
.rel-index li { flex: none; display: flex; align-items: baseline; gap: 8px; margin: 0; }
.rel-index a { font-weight: 700; font-size: 17px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.rel-index a:hover, .rel-index a:focus-visible { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.rel-index time { font-size: 14px; color: var(--muted); white-space: nowrap; }

.changelog .release { position: relative; margin: 0 0 32px; padding: 34px 26px 14px; background: var(--ink); clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%, 0 20px); scroll-margin-top: 24px; }
.changelog .release::before { content: ""; position: absolute; inset: 2px; background: var(--surface); clip-path: polygon(19px 0, calc(100% - 19px) 0, 100% 19px, 100% 100%, 0 100%, 0 19px); }
.changelog .release::after { content: ""; position: absolute; top: 12px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border: 2px solid var(--ink); border-radius: 50%; background: var(--bg); }
.changelog .release > * { position: relative; }
.rel-head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.rel-head .ver { font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.rel-head .ver:hover, .rel-head .ver:focus-visible { color: var(--accent-text); }
.rel-head .date { margin-left: auto; font-size: 15px; color: var(--muted); white-space: nowrap; }

.changelog .entries { list-style: none; margin: 0; padding: 0; max-width: none; }
.changelog .entry { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 2px 14px; margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); line-height: 1.55; }
.changelog .entry:last-child { border-bottom: 0; }
.changelog .kind { align-self: start; margin-top: 3px; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.entry--new .kind { color: var(--accent-text); }
.entry--improved .kind { color: var(--ink); }
.entry--fixed .kind { color: var(--muted); }
.changelog .from-review { display: inline-block; margin-left: 8px; font-size: 13px; color: var(--accent-text); white-space: nowrap; }

@media (max-width: 560px) {
  .changelog .release { padding: 32px 16px 10px; }
  .changelog .entry { grid-template-columns: minmax(0, 1fr); }
  .rel-head .ver { font-size: 28px; }
}

@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; padding: 0 0 0 14px; background: var(--tick) repeat-y left top; background-size: 6px 12px; }
  .rel-index ul { flex-direction: column; gap: 0; overflow: visible; padding: 0; }
  .rel-index li { justify-content: space-between; padding: 6px 0; }
  .changelog .release { grid-column: 2; }
}