/* ---- /changelog: the homepage's parts (spotlight cards, the mark's halftone tiles, the docs contents and code
   wells) arranged as a release rail. Tokens and spacing come from styles.css; badges and the contents from tools.css
   and docs.css. */

/* hero: the line on the left, what the file is on the right, aligned to its foot */
.chero { padding-top: var(--s-7); }
.chero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); column-gap: var(--col-gap); align-items: end; }
.ch1 { font-size: 3.5rem; max-width: 15ch; }
.chero-copy { display: flex; flex-direction: column; gap: var(--s-4); }
.chero .lede { font-size: 1rem; line-height: 1.65; }
.chero .lede a, .ccard a:not(.ccard-ver a), .cmeta a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-4); text-underline-offset: 0.25em; transition: text-decoration-color 200ms var(--ease-smooth); }
@media (hover: hover) { .chero .lede a:hover, .ccard a:not(.ccard-ver a):hover, .cmeta a:hover { text-decoration-color: var(--pop-up); } }
.cmeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); margin: 0; font: 400 0.8125rem/1.6 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.cmeta a { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: calc(-1 * var(--s-3)); color: var(--ink-2); }

/* ---- the rail: contents on the left, the line of releases on the right */
.clog { padding-top: var(--s-7); padding-bottom: var(--section); }
.cdocs { grid-template-columns: 13rem minmax(0, 54rem); margin-top: 0; }
.ctoc { background: var(--bg); box-shadow: 0 0 0 var(--s-3) var(--bg); }
.ctoc .toc-list a { display: flex; justify-content: space-between; gap: var(--s-3); font-variant-numeric: tabular-nums; }
.ctoc .toc-list a time { color: var(--ink-3); }

.crail { position: relative; --node: 2.5rem; --node-lead: 3.5rem; --rail-gap: var(--s-5); }
/* the track runs through the node centres; the fill is the progress line, lit as you read (changelog.js) */
.crail-line { position: absolute; left: calc(var(--node-lead) / 2 - 1px); top: var(--s-6); bottom: var(--s-6); width: 2px; border-radius: 2px; background: var(--line-strong); pointer-events: none; }
.crail-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--pop-up); transform-origin: 50% 0; }
.crail[data-rail-on] .crail-fill { transform: scaleY(0); }
.crail-list { position: relative; display: flex; flex-direction: column; gap: var(--s-6); margin: 0; padding: 0; list-style: none; }
.rel { display: grid; grid-template-columns: var(--node-lead) minmax(0, 1fr); column-gap: var(--rail-gap); align-items: start; scroll-margin-top: calc(var(--bar-h) + var(--s-5)); }

/* a node: the approved mark's material, its halftone tiles (solgent-mark.svg: dots on a 4 unit grid) set as a
   keycap ring around a centre tile. Lit nodes step up the ink; the one you are reading carries the green tile. */
.rel-node { position: relative; display: grid; place-items: center; justify-self: center; width: var(--node); height: var(--node); margin-top: var(--s-4); border-radius: 0.625rem; background: var(--bg); }
.rel-node::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 0.5rem; background: radial-gradient(circle, var(--ink-2) 0 1.1px, transparent 1.5px) 0 0 / 4px 4px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); transition: opacity 400ms var(--ease-smooth); }
.rel-node i { position: relative; width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--ink); transition: background-color 400ms var(--ease-smooth), transform 400ms var(--ease-osmo); }
.rel-lead .rel-node { --node: var(--node-lead); margin-top: var(--s-5); border-radius: 0.875rem; }
.rel-lead .rel-node::before { padding: 0.75rem; background-image: radial-gradient(circle, var(--ink) 0 1.2px, transparent 1.6px); }
.rel-lead .rel-node i { width: 0.75rem; height: 0.75rem; }
.rel[data-status='inactive'] .rel-node::before { opacity: 0.4; }
.rel[data-status='inactive'] .rel-node i { background: var(--ink-4); }
.rel[data-current] .rel-node i { background: var(--pop-up); transform: scale(1.15); }

/* ---- a release card: the homepage card surface; the newest is the React Bits Spotlight Card (ui.js spotlight),
   the rest share one grid light (ui.js spotlightGrid draws --sx, --sy, --sp) */
.ccard { --sx: 50%; --sy: 0%; --sp: 0; position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; padding: var(--s-5); border-radius: 16px; background: #0e1310; box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 1px 0 rgb(255 255 255 / 0.04), 0 30px 60px -30px rgb(0 0 0 / 0.9); }
.ccard-light, .ccard-edge { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--sp); }
.ccard-light { z-index: -1; }
.ccard-edge { z-index: 2; padding: 1px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.ccard[data-lit] .ccard-light { background: radial-gradient(circle 16rem at var(--sx) var(--sy), rgb(74 222 128 / 0.1), rgb(74 222 128 / 0.03) 45%, transparent 72%); }
.ccard[data-lit] .ccard-edge { background: radial-gradient(circle 10rem at var(--sx) var(--sy), rgb(74 222 128 / 0.85), rgb(74 222 128 / 0.2) 50%, transparent 80%); }
.rel:target .ccard { box-shadow: inset 0 0 0 1px #3a4c41, inset 0 1px 0 rgb(255 255 255 / 0.06), 0 30px 60px -30px rgb(0 0 0 / 0.9); }

.ccard-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); }
.ccard-ver { margin: 0; font: 600 1.375rem/1.1 var(--font-mono); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; font-feature-settings: "liga" 0; white-space: nowrap; }
.ccard-ver a { color: var(--ink); transition: color 160ms var(--ease-smooth); }
@media (hover: hover) { .ccard-ver a:hover { color: var(--pop-up); } }
.ccard-v { color: var(--ink-3); }
.ccard-date { font: 400 0.8125rem var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ccard-latest { align-self: center; color: var(--ink); }
.ccard-gh { margin-left: auto; font: 500 0.75rem var(--font-mono); }
.ccard-intro { margin: 0; max-width: 58ch; font-size: 0.9375rem; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.ccard code, .chero code { padding: 0.0625rem 0.25rem; border-radius: 4px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-strong); font: 400 0.8125em var(--font-mono); font-feature-settings: "liga" 0; color: var(--ink); overflow-wrap: anywhere; }
.ccard b { font-weight: 600; color: var(--ink); }

/* the newest release: larger, its version at title size, decrypting in */
.ccard-lead { gap: var(--s-4); padding: var(--s-6) var(--s-5); }
.ccard-lead .ccard-ver { font-size: 3rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.ccard-lead .ccard-date { font-size: 0.875rem; }
.ccard-lead .ccard-intro { font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }

/* ---- a release's sections: Osmo Accordion CSS Animation. The row is the toggle; the body opens by its grid row,
   so it animates to its own height. The static page has every section open. */
.csecs { display: flex; flex-direction: column; margin-top: var(--s-2); border-top: 1px solid var(--line); }
.csec { border-bottom: 1px solid var(--line); }
.csec:last-child { border-bottom: 0; }
.csec-h { margin: 0; font: inherit; }
.csec-toggle { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 2.75rem; padding: 0; text-align: left; font: 500 0.875rem var(--font-mono); color: var(--ink); }
.csec-title { letter-spacing: -0.01em; }
.csec-n { font: 400 0.75rem var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.csec-toggle svg { flex: none; width: 0.875rem; height: 0.875rem; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; color: var(--ink-3); transition: color 200ms var(--ease-smooth); }
@media (hover: hover) { .csec-toggle:hover svg { color: var(--ink); } }
.csec-toggle:focus-visible { outline-offset: 2px; }
.csec[data-accordion-status='active'] .faq-plus { display: none; }
html:not(.js) .csec-toggle { pointer-events: none; }
html:not(.js) .csec-toggle svg { display: none; }
.csec-bottom { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 600ms var(--ease-osmo); }
.csec[data-accordion-status='not-active'] .csec-bottom { grid-template-rows: 0fr; }
.csec-wrap { min-height: 0; overflow: hidden; }
.csec[data-accordion-status='not-active'] .csec-wrap { visibility: hidden; transition: visibility 0s linear 600ms; }
html[data-log-init] .csec-bottom, html[data-log-init] .csec-wrap { transition: none; }

.csec-list { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; padding: 0 0 var(--s-4); list-style: none; }
.csec-list li { position: relative; max-width: 64ch; padding-left: var(--s-5); font-size: 0.9375rem; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; overflow-wrap: anywhere; }
/* each entry hangs from one tile of the mark */
.csec-list li::before { content: ''; position: absolute; left: 0.25rem; top: 0.6875rem; width: 0.3125rem; height: 0.3125rem; border-radius: 1px; background: var(--ink-3); }
.csec-p { margin: 0 0 var(--s-3); max-width: 68ch; color: var(--ink-2); }
/* known issues: the homepage's amber note */
.csec-known-issues .csec-list { margin-bottom: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: 12px; background: rgb(217 180 106 / 0.06); box-shadow: inset 0 0 0 1px rgb(217 180 106 / 0.22); }
.csec-known-issues .csec-list li::before { background: var(--warn); }
.csec-known-issues .csec-list b { color: var(--pop-warn); font-weight: 500; }
.csec-known-issues .csec-title { color: var(--warn); }

/* ---- narrower */
@media (max-width: 1079px) {
  .chero-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); }
  .chero-copy { max-width: 40rem; }
}
@media (max-width: 991px) {
  .cdocs { grid-template-columns: minmax(0, 1fr); }
  .ctoc { top: var(--bar-h); box-shadow: inset 0 0 0 1px var(--line-strong), 0 16px 32px -16px rgb(0 0 0 / 0.9), 0 calc(-1 * var(--s-2)) 0 var(--bg); }
}
@media (max-width: 767px) {
  .chero { padding-top: var(--s-6); }
  .ch1 { font-size: 2.375rem; line-height: 1.08; }
  .clog { padding-top: var(--s-5); }
  .crail { --node: 1.75rem; --node-lead: 2.25rem; --rail-gap: var(--s-3); }
  .crail-list { gap: var(--s-5); }
  .rel-node { margin-top: var(--s-4); border-radius: 0.5rem; }
  .rel-node::before { padding: 0.375rem; }
  .rel-node i { width: 0.375rem; height: 0.375rem; }
  .rel-lead .rel-node { margin-top: var(--s-4); border-radius: 0.625rem; }
  .rel-lead .rel-node::before { padding: 0.5rem; }
  .rel-lead .rel-node i { width: 0.5rem; height: 0.5rem; }
  .ccard { padding: var(--s-4); }
  .ccard-lead { padding: var(--s-5) var(--s-4); }
  .ccard-lead .ccard-ver { font-size: 2.25rem; }
  .ccard-lead .ccard-intro { font-size: 1rem; }
  .csec-list li { padding-left: var(--s-4); }
  .csec-list li::before { left: 0.125rem; }
  .csec-known-issues .csec-list { padding: var(--s-3) var(--s-4); }
}
@media (prefers-reduced-motion: reduce) { .csec-bottom, .csec-wrap, .rel-node::before, .rel-node i { transition: none; } }