/* The changelog (changelog.html; changelog.mjs fills the list from GitHub's API).
   Each release is an entry in a printed log: its version in big serif figures on the left, held in view while
   its notes pass by, a thread with one dot per release in between, the notes in the docs' type on the right.
   Built on the tokens of site.css and the new look. The strip and the entries arrive with the shared building blocks
   (data-reveal in changelog.html and changelog.mjs; look.css and chrome.mjs drive them), "reduce motion" stops it. */

.log-page {
  --log-col: clamp(150px, 19vw, 220px);
  --log-gap: clamp(28px, 5vw, 72px);
  --log-pad: 52px;
  --log-v: clamp(2.1rem, 1.5rem + 1.6vw, 2.9rem);
}

.log-hero .feat-hero__eyebrow { justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; max-width: 860px; }
.log-hero__links { display: inline-flex; flex-wrap: wrap; gap: 8px 22px; }
.log-hero__gh { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0.02em; text-decoration: none; border-bottom: 1px solid var(--line-2); }
.log-hero__gh:hover { color: var(--ink); }

/* how an update reaches the app: four cells on one strip of the look's paper, perforated between them,
   printed in one after the other. The paper is light in both themes, so it brings its own ink. */
.log-how {
  --how-r: 9px; --how-hole: 1.6px; --how-pitch: 8px;
  --how-cut: #0000 var(--how-r), #000 calc(var(--how-r) + 0.6px);
  --how-punch: #0000 var(--how-hole), #000 calc(var(--how-hole) + 0.6px);
  --how-whole: linear-gradient(#000 0 0);
  max-width: 1000px; margin-top: clamp(44px, 6vw, 76px);
}
.log-how__title { margin: 0 0 18px; color: var(--muted); font: 600 0.74rem/1.3 var(--font-mono); letter-spacing: 0.09em; text-transform: uppercase; }
.log-how__strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none;
  rotate: -0.4deg; filter: drop-shadow(0 1px 1px rgb(4 2 10 / 0.18)) drop-shadow(var(--look-print));
}
.log-how__cell {
  /* each seam: a notch at both ends and half a hole on either side, so the holes go right through */
  --how-start: radial-gradient(circle at 0 0, var(--how-cut)), radial-gradient(circle at 0 100%, var(--how-cut)), radial-gradient(circle at 0 50%, var(--how-punch)) 0 50% / 100% var(--how-pitch) repeat-y;
  --how-end: radial-gradient(circle at 100% 0, var(--how-cut)), radial-gradient(circle at 100% 100%, var(--how-cut)), radial-gradient(circle at 100% 50%, var(--how-punch)) 0 50% / 100% var(--how-pitch) repeat-y;
  position: relative; display: grid; align-content: start; gap: 6px; padding: 20px 22px 24px;
  background: linear-gradient(172deg, color-mix(in oklab, var(--look-paper) 94%, #fff), var(--look-paper) 60%);
  color: #1c1820;
  -webkit-mask: var(--how-start), var(--how-end); -webkit-mask-composite: source-in;
  mask: var(--how-start), var(--how-end); mask-composite: intersect;
}
.log-how__cell:first-child { --how-start: var(--how-whole); border-radius: 14px 0 0 14px; }
.log-how__cell:last-child { --how-end: var(--how-whole); border-radius: 0 14px 14px 0; }
.log-how__no { color: #6b2fd6; font: italic 420 1.05rem/1 var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 36; }
.log-how__cell b { font: 560 1.45rem/1.1 var(--font-serif); letter-spacing: -0.02em; font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 72; }
.log-how__cell span:last-child { color: #5a5262; font-size: 0.9rem; line-height: 1.5; }
.log-how__channel { max-width: 70ch; margin: 22px 0 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }

/* the list starts on a hairline, and Rio stands on it */
.log { position: relative; margin-top: clamp(56px, 8vw, 96px); border-top: 1px solid var(--line-2); }
.perch--log { right: clamp(16px, 9%, 120px); translate: 0 -87.5%; }
/* The releases come from GitHub after the first frame. Until then the list holds a screen of room, so the end of
   the page never stands on screen above them and jumps away when they land (a layout shift). Without script no
   list comes, and after an error the room goes again. */
@media (scripting: enabled) {
  .log:not(:has([data-changelog-error]:not([hidden]))) { min-height: 100vh; }
}

/* every version on the page, to skip through a long list; the newest one in ember */
.log__index { display: flex; flex-wrap: wrap; gap: 4px; padding: 26px 0 0; font: 500 0.78rem/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.log__index[hidden] { display: none; }
.log__index a { padding: 7px 9px; border-radius: 8px; color: var(--muted); text-decoration: none; }
.log__index a:hover { background: var(--panel); color: var(--ink); }
.log__index a.is-latest { color: var(--look-ember); }
.log__index a.is-latest::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }

.log__status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; max-width: 680px; margin: 0; padding: 40px 0 8px; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.log__status a, .log__more a { color: var(--accent-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent-ink) 40%, transparent); text-underline-offset: 3px; }
.log__status a:hover, .log__more a:hover { color: var(--ink); }
.log__loading { font: 500 0.88rem/1.6 var(--font-mono); letter-spacing: 0.02em; }
.log__loading::after { content: ""; display: inline-block; width: 0.5em; height: 1.05em; margin-left: 6px; vertical-align: -0.2em; background: var(--look-ember); animation: log-caret 1.1s steps(1, end) infinite; }
@keyframes log-caret { 50% { opacity: 0; } }

/* the thread through the releases, one dot per release, the newest lit */
.log__list { position: relative; }
.log__list::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--log-col) + var(--log-gap) / 2); width: 1px; background: linear-gradient(var(--line-2), var(--line) 80%, transparent); }

.log__entry {
  position: relative; display: grid; grid-template-columns: var(--log-col) minmax(0, 1fr); column-gap: var(--log-gap);
  padding: var(--log-pad) 0; scroll-margin-top: 88px;
}
.log__entry::before {
  content: ""; position: absolute; top: calc(var(--log-pad) + var(--log-v) * 0.52 - 5px); left: calc(var(--log-col) + var(--log-gap) / 2 - 5px);
  width: 10px; height: 10px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--faint);
}
.log__entry:first-child::before { background: var(--look-ember); box-shadow: 0 0 0 5px color-mix(in srgb, var(--look-ember) 20%, transparent); }
.log__entry:target::before { background: var(--accent-bar); box-shadow: 0 0 0 5px var(--accent-soft); }

/* left: the version, its day and platforms, held in view while the notes pass */
.log__head { grid-column: 1; grid-row: 1 / span 4; align-self: start; position: sticky; top: 96px; }
.log__entry > :not(.log__head) { grid-column: 2; }
.log__version { font: 360 var(--log-v)/1 var(--font-serif); font-optical-sizing: auto; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144; letter-spacing: -0.035em; font-variant-numeric: lining-nums; }
.log__version a { color: var(--ink); text-decoration: none; }
.log__version a:hover, .log__entry:target .log__version a { color: var(--accent-ink); }
.log__v { margin-right: 0.03em; color: var(--faint); font-size: 0.62em; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72; }
.log__date { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 16px 0 0; color: var(--muted); font: 500 0.78rem/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.log__latest { padding: 3px 8px 2px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--look-ember) 50%, transparent); background: color-mix(in srgb, var(--look-ember) 11%, transparent); color: var(--look-ember); }
.log__meta { display: grid; gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--faint); font: 500 0.76rem/1.45 var(--font-mono); }
/* the newest release: the way to its download, right under its number */
.log__get { margin-top: 20px; min-height: 40px; padding: 8px 16px; border-radius: 11px; font-size: 0.9rem; }

/* right: the notes, in the docs' type; the opening line reads like a printed standfirst */
.log__other { margin: 0 0 14px; color: var(--faint); font: 500 0.8rem/1.4 var(--font-mono); letter-spacing: 0.02em; }
.log__notes.doc { max-width: 70ch; margin: 0; }
.log__notes .log__lead { color: var(--ink); font: 380 clamp(1.18rem, 1.06rem + 0.45vw, 1.42rem)/1.42 var(--font-serif); font-optical-sizing: auto; font-variation-settings: "SOFT" 100, "WONK" 0; letter-spacing: -0.012em; text-wrap: pretty; }
.log__notes .log__lead--long { font-size: clamp(1.06rem, 1rem + 0.25vw, 1.18rem); line-height: 1.55; }
.log__notes .log__lead code { font-size: 0.72em; }

/* section names in mono, each with its own colour: new, better, fixed, security */
.log__notes .log__sec { display: flex; align-items: center; gap: 10px; margin-top: 32px; color: var(--muted); font: 600 0.74rem/1.3 var(--font-mono); letter-spacing: 0.09em; text-transform: uppercase; }
.log__notes .log__sec::before { content: ""; flex: none; width: 7px; height: 7px; rotate: 45deg; background: var(--log-kind, var(--faint)); }
.log__notes .log__sec + * { margin-top: 10px; }
.log__notes.doc > :first-child { margin-top: 0; }
.log__sec--new, .log__sec--new + .doc-list { --log-kind: var(--accent-bar); }
.log__sec--improved, .log__sec--improved + .doc-list { --log-kind: var(--look-ember); }
.log__sec--fixed, .log__sec--fixed + .doc-list { --log-kind: var(--done); }
.log__sec--security, .log__sec--security + .doc-list { --log-kind: var(--minus); }
.log__notes.doc ul.doc-list li::before { background: var(--log-kind, var(--accent-bar)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--log-kind, var(--accent-bar)) 16%, transparent); }
.log__notes .doc-list .doc-list { margin-top: 6px; }
.log__notes .doc-list .doc-list li { margin-top: 4px; font-size: 0.96rem; }
.log__steps { margin: 12px 0 0; padding-left: 1.5em; }
.log__steps li { margin-top: 6px; padding-left: 4px; }
.log__steps li::marker { color: var(--faint); font: 500 0.88em var(--font-mono); }
.log__code { margin: 16px 0 0; padding: 14px 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font: 500 0.85rem/1.6 var(--font-mono); }
.log__notes .log__code code { padding: 0; background: none; font: inherit; }
.log__notes .doc-table th, .log__notes .doc-table td { white-space: normal; }
.log__notes .is-center { text-align: center; }
.log__notes .is-right { text-align: right; }

.log__gh { margin: 26px 0 0; }
.log__gh a { color: var(--muted); font: 500 0.8rem/1.4 var(--font-mono); letter-spacing: 0.02em; text-decoration: none; border-bottom: 1px solid var(--line-2); }
.log__gh a::after { content: " ↗"; }
.log__gh a:hover { color: var(--ink); border-bottom-color: var(--faint); }

.log__more { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 8px 0 0; padding-left: calc(var(--log-col) + var(--log-gap)); }
.log__more .btn:disabled { opacity: 0.6; cursor: progress; }

/* phones: one column, the thread gives way to hairlines between the releases */
@media (max-width: 760px) {
  .log-page { --log-pad: 36px; }
  .log__list::before, .log__entry::before { display: none; }
  .log__entry { grid-template-columns: minmax(0, 1fr); }
  .log__entry + .log__entry { border-top: 1px solid var(--line); }
  .log__head { position: static; grid-row: auto; margin-bottom: 20px; }
  .log__entry > :not(.log__head) { grid-column: 1; }
  /* a wide table keeps readable columns and scrolls sideways in its own frame */
  .log__notes .doc-table:has(th:nth-child(4)) { min-width: 44rem; }
  .log__more { padding-left: 0; }
  /* the strip stands upright, its seams run across */
  .log-how__strip { grid-template-columns: minmax(0, 1fr); rotate: none; }
  .log-how__cell {
    --how-start: radial-gradient(circle at 0 0, var(--how-cut)), radial-gradient(circle at 100% 0, var(--how-cut)), radial-gradient(circle at 50% 0, var(--how-punch)) 50% 0 / var(--how-pitch) 100% repeat-x;
    --how-end: radial-gradient(circle at 0 100%, var(--how-cut)), radial-gradient(circle at 100% 100%, var(--how-cut)), radial-gradient(circle at 50% 100%, var(--how-punch)) 50% 0 / var(--how-pitch) 100% repeat-x;
    grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; padding: 18px 20px;
  }
  .log-how__cell:first-child { border-radius: 14px 14px 0 0; }
  .log-how__cell:last-child { border-radius: 0 0 14px 14px; }
  .log-how__no { grid-row: span 2; padding-top: 4px; }
  /* the index scrolls inside itself instead of piling up */
  .log__index { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .log__index::-webkit-scrollbar { display: none; }
  .log__index a { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .log__loading::after { animation: none; }
}