/* =====================================================================
 * /releases — what changed in SSHOW, line by line
 *
 * The page stands on the stage (marketing.css) the way a guide page does:
 * a text head (§8.4: label → headline → lede, 22px apart), the guide's bar
 * under it (§7.25), then the releases as rows between hairlines, never
 * cards (§7.7, §7.9). A row sets its date, line and version in a column
 * that rides along while the release is read, beside the reading column
 * (§4.8): the title (a block title, §3.3), the lede, a big release's
 * picture in the bezel (§4.9) and its items in two groups under labels
 * (§3.4). Chips are the status chips (§7.13), a beta the shared badge
 * (§7.8). No light: the words carry this page (§6.5). Dark mode swaps
 * values through the stage's tokens only.
 * ===================================================================== */
@import url('./marketing.css');

#mt-page.rl-page {
    --rl-side: 236px;                 /* the date column, as wide as the guide's chapter list */
    --rl-gap: clamp(32px, 4vw, 72px);
    --rl-read: 720px;                 /* the stage's reading column (§4.8) */
    --rl-bar-h: 52px;
    /* The header's foot, lower while an announcement shows, and the riding bar's under it. */
    --rl-header: calc(var(--header-height, 47px) + var(--announcement-h, 0px));
    --rl-top: calc(var(--rl-header) + var(--rl-bar-h));
    /* The shared buttons' curve, which the stage pages leave undefined (docs.css does the same). */
    --di-ease: var(--mt-ease);
}

/* =====================================================================
 * 01 · HEAD — a guide page's head: the header and clamp(36px, 7vh, 88px)
 * from the top (the header and 28px on phones), rising once, a line after
 * another (§5.4)
 * ===================================================================== */
.rl-head { padding: calc(var(--header-height) + clamp(36px, 7vh, 88px)) 0 clamp(28px, 4vh, 44px); }
.rl-head-inner { max-width: 860px; }
/* Two sentences, a line each (the locale breaks them). */
.rl-head-lede { margin-top: 22px; white-space: pre-line; }
.rl-head-inner > * { animation: rl-rise 0.9s var(--mt-ease-spring) backwards; }
.rl-head-inner > :nth-child(2) { animation-delay: 0.05s; }
.rl-head-inner > :nth-child(n + 3) { animation-delay: 0.1s; }
@keyframes rl-rise { from { opacity: 0; transform: translateY(12px); } }

/* =====================================================================
 * 02 · BAR — the guide's bar (docs.css §01): it waits under the head and,
 * once the script sees it ride under the header, wears the header's glass
 * and answers less transparency and more contrast as the header does
 * (§4.3). Without the script it stays in the flow. Its chips are Stage's
 * filter chips (§7.13); the one picked takes the selected fill, ink and
 * 600, so the weight says it too (§15.6).
 * ===================================================================== */
.rl-bar {
    position: sticky;
    top: var(--rl-header);
    z-index: 40;
    height: var(--rl-bar-h);
    background: transparent;
    transition: background-color 0.18s var(--mt-ease), box-shadow 0.18s var(--mt-ease);
}
#mt-page.rl-page:not(.is-rl-ready) .rl-bar { position: static; }
.rl-bar.is-stuck { background: var(--header-background-color); box-shadow: 0 1px 0 rgba(var(--mt-ink-rgb), 0.06); }
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    .rl-bar.is-stuck { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
@media (prefers-reduced-transparency: reduce) {
    .rl-bar.is-stuck { background: var(--global-body-background); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
    .rl-bar.is-stuck { background: var(--global-body-background); box-shadow: 0 1px 0 rgba(var(--global-text-color-rgb), 0.5); }
}
.rl-bar-inner { display: flex; align-items: center; gap: 12px; height: 100%; }
/* In the flow a hairline over it closes the head (§7.9); riding, the glass's edge takes over. */
.rl-bar:not(.is-stuck) .rl-bar-inner { background: linear-gradient(var(--mt-hair), var(--mt-hair)) top / 100% 1px no-repeat content-box; }
/* The chips keep to one line; a long row scrolls sideways, its padding
   holding the focus ring while the first chip keeps to the page's line. */
.rl-bar-links { display: flex; align-items: center; gap: 2px; min-width: 0; margin-left: -5px; padding: 5px; overflow-x: auto; scrollbar-width: none; }
.rl-bar-links::-webkit-scrollbar { display: none; }
/* A row longer than the bar fades the edge that hides more (releases.js), as the guide's does. */
.rl-bar-links.is-scrollable:not(.at-start) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
.rl-bar-links.is-scrollable:not(.at-end) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.rl-bar-links.is-scrollable:not(.at-start):not(.at-end) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.rl-bar-links a { flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 500; letter-spacing: -0.005em; color: var(--mt-ink-2); text-decoration: none; white-space: nowrap; transition: color 0.18s var(--mt-ease), background-color 0.18s var(--mt-ease); }
.rl-bar-links a[aria-current="page"] { background: var(--state-selected-bg); color: var(--mt-ink); font-weight: 600; }
/* The feed: a text button at the bar's end, its glyph the feed's own. */
.rl-feed { flex: none; margin-left: auto; gap: 6px; color: var(--mt-ink-2); }
.rl-feed svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.rl-feed svg circle { fill: currentColor; stroke: none; }

/* =====================================================================
 * 03 · ENTRIES — a row per release (downloads' rows, §03): the date
 * column rides along while the release is read; on the right the title,
 * the lede, the picture and the items, each item a row of its own
 * ===================================================================== */
.rl-list { padding-block: clamp(8px, 2vh, 24px) clamp(24px, 4vh, 48px); }
.rl-empty { padding-block: 48px; color: var(--mt-ink-2); }
.rl-entry {
    display: grid;
    grid-template-columns: var(--rl-side) minmax(0, var(--rl-read));
    column-gap: var(--rl-gap);
    padding-block: clamp(40px, 5vw, 64px);
    border-top: 1px solid var(--mt-hair);
}
.rl-entry:first-of-type { border-top: 0; }
.rl-meta { position: sticky; top: calc(var(--rl-top) + 28px); align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 6px; }
.rl-date { font-size: 13px; line-height: 1.4; color: var(--mt-ink-3); font-variant-numeric: tabular-nums; }
.rl-line { font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: -0.005em; color: var(--mt-ink); }
.rl-version { font-variant-numeric: tabular-nums; }
.rl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
/* A status chip (§7.13): neutral, its edge a strong hairline — downloads' chip (.dl-row-chip). */
.rl-chip { padding: 4px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--mt-hair-2); font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--mt-ink-2); white-space: nowrap; }

.rl-title { font-family: var(--global-font-title); font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; line-height: 1.25; letter-spacing: 0; color: var(--mt-ink); text-wrap: balance; }
.rl-lede { margin-top: 12px; }
.rl-picture { margin-top: 28px; }
/* A group's name is the stage's label (§3.4); only its place is set here. */
.rl-group { margin: 36px 0 14px; }
.rl-items { border-bottom: 1px solid var(--mt-hair); }
.rl-item { padding: 18px 0 20px; border-top: 1px solid var(--mt-hair); }
.rl-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rl-item-title { margin: 0; font-family: var(--global-font-title); font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: 0; color: var(--mt-ink); }
.rl-item-desc { max-width: 40em; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--mt-ink-2); text-wrap: pretty; }
/* The stage's text link (§7.16), a size down, its arrow a gap after the words. */
.rl-guide { display: inline-flex; align-items: baseline; gap: 6px; margin: 4px 0 -6px -6px; padding: 6px; font-size: 14px; text-decoration: none; }

/* =====================================================================
 * 04 · INVITE — the closing (downloads' invite, verbatim grammar)
 * ===================================================================== */
.rl-invite { padding-block: clamp(104px, 15vh, 168px) clamp(56px, 7vh, 96px); }
.rl-invite-inner { display: flex; flex-direction: column; align-items: center; padding-inline: var(--section-pad-x); text-align: center; }
.rl-invite .auth-mark { width: 26px; margin: 0 auto 28px; color: var(--mt-ink); }
.rl-invite .auth-mark svg { display: block; width: 100%; height: auto; aspect-ratio: 603 / 958; }
.rl-invite-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 36px; }

/* Anchors (#app-0.0.13) land below the header and the riding bar. */
html:has(#mt-page.rl-page) { scroll-padding-top: calc(var(--header-height, 47px) + 52px + 16px); }
html:has(body.has-announcement #mt-page.rl-page) { scroll-padding-top: calc(var(--header-height, 47px) + 40px + 52px + 16px); }

/* ---------- Pointer devices: hover answers only where there is a hover ---------- */
@media (hover: hover) {
    .rl-bar-links a:not([aria-current]):hover { background: var(--state-hover-bg); color: var(--mt-ink); }
}

/* ---------- Touch: 44 × 44px targets that keep their look (§15.2) ---------- */
@media (pointer: coarse) {
    .rl-bar-links a, .rl-feed, .rl-guide { position: relative; }
    .rl-bar-links a::before, .rl-feed::before, .rl-guide::before { content: ''; position: absolute; inset: min(0px, 50% - 22px); }
}

/* ---------- Content fold (880px): the date column becomes the row's first line ---------- */
@media (max-width: 880px) {
    .rl-entry { grid-template-columns: minmax(0, 1fr); row-gap: 14px; padding-block: 36px; }
    .rl-meta { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-top: 0; }
    .rl-chips { margin-top: 0; }
}

/* ---------- Phones (640px): the guide's head and bar; the closing's button and link stack ---------- */
@media (max-width: 640px) {
    #mt-page.rl-page { --rl-bar-h: 48px; }
    .rl-head { padding-top: calc(var(--header-height) + 28px); }
    .rl-invite-cta { flex-direction: column; gap: 0; margin-top: 28px; }
    html:has(#mt-page.rl-page) { scroll-padding-top: calc(var(--header-height, 47px) + 48px + 16px); }
    html:has(body.has-announcement #mt-page.rl-page) { scroll-padding-top: calc(var(--header-height, 47px) + 40px + 48px + 16px); }
}

/* ---------- Forced colours (§15.5): edges drawn by shadows become outlines ---------- */
@media (forced-colors: active) {
    .rl-chip { outline: 1px solid CanvasText; outline-offset: -1px; }
    .rl-bar-links a[aria-current="page"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}