/* What's new, one piece of code for every app on omggg.wtf: Levo's changelog (levo/changelog/) and the apps' beta pages
   (glide/, elevate/, amply/, through app-page.css). One row per release, the latest open. A row is its version and
   date, a line across to a chevron that points right, and down while the row is open.

   The markup, newest first, the latest with `open`:
     <details class="release" open>
       <summary><h2 or h3>0.2</h2 or h3><time datetime="…">3 November 2026</time><span class="rule" aria-hidden="true"></span>
         <svg class="chev" width="14" height="14" viewBox="0 0 14 14" aria-hidden="true"><path d="M5.5 3 9.5 7 5.5 11"
         fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
       <div class="notes">…</div>
     </details>
   inside a `.releases` box (Levo) or the `.updates` section (the apps' pages), whose page sets --muted and --text, and
   --rim and --lit (Levo) or --line (the apps' pages). Older releases may sit in <details class="more"><summary>More
   updates</summary>…</details>. */

.art .releases { margin-top: 32px; }

.release summary {
	display: flex; align-items: center; gap: 12px; padding: 12px 0;
	list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.release summary::-webkit-details-marker { display: none; }
.release summary:focus-visible { outline: 2px solid var(--lit, var(--text)); outline-offset: 4px; border-radius: 6px; }
.release summary :is(h2, h3) {
	margin: 0; font-size: 17px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; white-space: nowrap;
}
.release time { font-size: 15px; color: var(--muted); white-space: nowrap; }
.release .rule { flex: 1; min-width: 16px; height: 1px; background: var(--rim, var(--line)); }
.release .chev { flex: none; color: var(--muted); transition: transform .25s cubic-bezier(.23, 1, .32, 1); }
.release[open] .chev { transform: rotate(90deg); }
@media (hover: hover) and (pointer: fine) { .release summary:hover .chev { color: var(--text); } }

.release .notes { padding: 4px 0 20px; }
.release .notes > :first-child { margin-top: 0; }

/* More updates: the older releases, behind one quiet pill that goes once it opens. */
.more { display: grid; }
.more > summary {
	justify-self: start; margin-top: 8px; cursor: pointer; list-style: none; color: var(--muted); font-weight: 600;
	border: 1px solid var(--rim, var(--line)); border-radius: 999px; padding: 6px 14px;
}
.more > summary::-webkit-details-marker { display: none; }
.more[open] > summary { display: none; }
.more > summary:focus-visible { outline: 2px solid var(--lit, var(--text)); outline-offset: 2px; }

/* Opening glides where the browser can size to auto; elsewhere it opens at once. */
@supports (interpolate-size: allow-keywords) {
	:is(.releases, .updates) { interpolate-size: allow-keywords; }
	.release::details-content {
		height: 0; overflow: clip;
		transition: height .3s cubic-bezier(.23, 1, .32, 1), content-visibility .3s allow-discrete;
	}
	.release[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.release .chev, .release::details-content { transition: none; }
}