/* /changelog (templates/changelog.html): the release page's pieces (whats-new.css, notation.css) for the whole
history. Refs: the version and date in a column of their own beside what changed (Raycast, Stripe), the latest
release opened up with its picture and the rest kept to ruled lists (Linear), groups named the way the list
reads (New, Improvements, Fixes). */
/* ---------- A: the latest release, a chapter with the real window ---------- */
.cx .cl-latest { padding-top: 112px; }
.cx .cl-feature { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 72px; align-items: center; }
.cx .cl-feature h2 { margin: 18px 0 0; }
.cx .cl-big { display: block; font: 700 clamp(72px, 9vw, 128px)/.9 var(--serif); font-variant-numeric: lining-nums; letter-spacing: -2.5px; color: var(--fg); }
.cx .cl-when { margin: 18px 0 0; font-size: 14.5px; color: var(--fg2); font-variant-numeric: tabular-nums; }
.cx .cl-headline { margin-top: 22px; max-width: 46ch; text-wrap: pretty; }
.cx .cl-tour { margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line2); }
.cx .cl-tour li { border-bottom: 1px solid var(--line2); }
.cx .cl-tour a { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) 16px; align-items: baseline; gap: 14px; padding: 13px 0; color: inherit; text-decoration: none; }
.cx .cl-tour a::after { content: "→"; color: var(--fg2); transition: translate .3s var(--spring), color .2s; }
.cx .cl-tour b { font: 500 21px/1.2 var(--serif); color: var(--fg); }
.cx .cl-tour span { font-size: 14px; color: var(--fg2); }
.cx .cl-tour a:hover::after, .cx .cl-tour a:focus-visible::after { translate: 4px 0; color: var(--fg); }
.cx .cl-tour a:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cx .cl-go { margin-top: 28px; height: 52px; padding: 0 26px; border-radius: 10px; font-size: 15px; }
.cx .cl-win { margin: 0; }
.cx .cl-win .wn-win { display: block; transition: border-color .2s; }
.cx .cl-win .wn-win:hover { border-color: var(--fg2); }
.cx .cl-win figcaption { margin-top: 14px; font-size: 14.5px; color: var(--fg2); }
.cx .cl-win figcaption b { color: var(--fg); font-weight: 600; }
.cx .cl-list-latest { margin-top: 72px; }
@media (max-width: 900px) {
.cx .cl-latest { padding-top: 72px; }
.cx .cl-feature { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.cx .cl-tour a { grid-template-columns: minmax(0, 1fr) 16px; gap: 2px 14px; }
.cx .cl-tour span { grid-column: 1; }
.cx .cl-tour a::after { grid-row: 1; grid-column: 2; }
}
/* ---------- a release: version and date beside what changed ---------- */
.cx .cl-list { border-top: 1px solid var(--line2); }
.cx .cl-rel { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; padding: 36px 0 40px; border-bottom: 1px solid var(--line2); scroll-margin-top: 96px; }
.cx .cl-meta { position: sticky; top: 96px; align-self: start; display: grid; gap: 4px; margin: 0; padding: 0; }
.cx .cl-ver { margin: 0; font: 500 40px/1 var(--serif); font-variant-numeric: lining-nums; letter-spacing: -.02em; color: var(--fg); }
.cx .cl-all { margin: 0; font: 500 28px/1.15 var(--serif); letter-spacing: -.01em; color: var(--fg); text-wrap: balance; }
.cx .cl-meta time { margin-top: 8px; font-size: 14px; color: var(--fg2); font-variant-numeric: tabular-nums; }
.cx .cl-plat { font-size: 13px; color: var(--fg2); }
.cx .cl-body { min-width: 0; }
.cx .cl-body ul { margin: 0; padding: 0; list-style: none; }
.cx .cl-body li { position: relative; padding: 9px 0 9px 20px; font-size: 15.5px; line-height: 1.6; color: var(--fg3); text-wrap: pretty; }
.cx .cl-body li::before { content: ""; position: absolute; left: 2px; top: 1.15em; width: 8px; height: 1px; background: var(--fg2); }
.cx .cl-body li b { color: var(--fg); font-weight: 600; }
.cx .cl-group + .cl-group { margin-top: 28px; }
.cx .cl-group h4 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; font: 500 24px/1.2 var(--serif); color: var(--fg); }
.cx .cl-group h4 span { font: 400 13px var(--ui); color: var(--fg2); }
.cx .cl-note { margin: 0 0 18px; padding: 0 0 0 16px; border-left: 2px solid var(--line3); max-width: 70ch; font-size: 15px; line-height: 1.6; color: var(--fg3); }
.cx .cl-note b { color: var(--fg); font-weight: 600; }
@media (max-width: 800px) {
.cx .cl-rel { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 28px 0 30px; }
.cx .cl-meta { position: static; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 14px; }
.cx .cl-meta time { margin-top: 0; }
}
/* ---------- B and C ---------- */
.cx .cl-earlier { padding-top: 112px; }
.cx .cl-earlier .cl-list, .cx .cl-before .cl-list { margin-top: 44px; }
.cx .cl-before { padding-top: 112px; padding-bottom: 112px; }
.cx .cl-before-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cx .cl-before .seg small { margin-left: 4px; font-size: 11px; font-weight: 600; color: var(--fg2); }
.cx .cl-compact .cl-rel { padding: 24px 0 26px; }
.cx .cl-compact .cl-ver { font-size: 30px; }
@media (max-width: 900px) { .cx :is(.cl-earlier, .cl-before) { padding-top: 72px; } .cx .cl-before { padding-bottom: 72px; } }
/* Phone reading sizes: what people read is 16px, fine print and credits 15, specs and data 14. */
@media (max-width: 700px) {
.cx .cl-body li, .cx .cl-note, .cx .cl-tour span { font-size: 16px; }
.cx .cl-win figcaption { font-size: 15px; }
}
/* ---------- an engine number Cantai skipped (engine_only): the same grid, shorter and quieter ---------- */
.cx .cl-skip { padding: 18px 0 20px; }
.cx .cl-skip .cl-ver { font-size: 28px; color: var(--fg2); }
.cx .cl-skip .cl-meta time { margin-top: 4px; }
.cx .cl-skip .cl-body p { margin: 0; max-width: 70ch; font-size: 15px; line-height: 1.6; color: var(--fg2); text-wrap: pretty; }
.cx .cl-skip .cl-body b { color: var(--fg3); font-weight: 600; }
.cx :is(.cl-skip .cl-body, .cl-note) a { color: var(--fg2); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cx :is(.cl-skip .cl-body, .cl-note) a:hover { color: var(--fg); }
.cx .cl-numbers a { text-decoration: underline; text-underline-offset: 3px; }
/* ---------- ?since=: what is new since the musician's version ---------- */
.cx .cl-since { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--fg); }
.cx .wn-lede a { color: inherit; text-underline-offset: 3px; }
@media (max-width: 800px) { .cx .cl-skip { padding: 16px 0 18px; } }
@media (max-width: 700px) { .cx .cl-skip .cl-body p { font-size: 16px; } }
/* Phones only: the earlier releases fold to one row each (site.js adds .m-fold and the .cl-sum line);
tapping the row opens it. Linear's changelog folds its groups the same way. */
.cx .cl-sum { display: none; }
@media (max-width: 760px) {
.cx .cl-rel.m-fold { gap: 0; padding: 0; }
.cx .cl-rel.m-fold .cl-meta { position: relative; top: auto; display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-auto-flow: row; align-items: baseline; gap: 4px 12px; padding: 18px 32px 18px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cx .cl-rel.m-fold .cl-meta::after { content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); rotate: 45deg; transition: rotate 300ms var(--spring), margin-top 300ms var(--spring); }
.cx .cl-rel.m-fold.open .cl-meta::after { rotate: 225deg; margin-top: -2px; }
.cx .cl-rel.m-fold .cl-meta:focus-visible { outline: 2px solid var(--a300); outline-offset: 2px; border-radius: 4px; }
.cx .cl-rel.m-fold .cl-ver { font-size: 30px; }
.cx .cl-rel.m-fold.cl-skip .cl-ver { color: var(--muted); }
.cx .cl-rel.m-fold .cl-meta time { font-size: 13.5px; color: var(--muted); }
.cx .cl-rel.m-fold .cl-plat { display: none; }
.cx .cl-rel.m-fold .cl-sum { display: block; grid-column: 1 / -1; font: 400 13px/1.4 var(--ui); color: var(--muted); }
.cx .cl-rel.m-fold .cl-body { display: none; padding: 0 0 24px; }
.cx .cl-rel.m-fold.open .cl-body { display: block; }
}