/* Changelog page (1.6.0). One block per release, newest first: date + release on the left, tag + headline + bullets on the
   right (stacked on phones). Chips on top filter by area. Uses the kit's tokens only, so light and dark both work. */

/* Filter chips: plain links, so they work without JS; 44 px tall on touch */
.cl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.ss .cl-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--ss-line-strong);
  border-radius: var(--ss-r-pill); color: var(--ss-text); text-decoration: none; font: 500 14px/1 var(--ss-font-body);
  transition: background var(--ss-ease), border-color var(--ss-ease), color var(--ss-ease); }
.ss .cl-chip:hover { border-color: var(--ss-text-2); background: var(--ss-raised); }
.ss .cl-chip[aria-current="true"] { background: var(--ss-accent); border-color: var(--ss-accent); color: var(--ss-on-accent); }
.ss .cl-chip[aria-current="true"]:hover { background: var(--ss-accent-hover); border-color: var(--ss-accent-hover); }
@media (pointer: coarse) { .ss .cl-chip { min-height: 44px; } }

.cl-count { margin: 0 0 8px; font-size: 13px; color: var(--ss-text-3); }

/* The list */
.cl-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ss-line); }
.cl-entry { display: grid; gap: 14px; padding: 28px 0; border-bottom: 1px solid var(--ss-line); scroll-margin-top: 88px; }
.cl-entry[hidden] { display: none; }
.cl-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.cl-date { font-size: 14px; color: var(--ss-text-2); }
.cl-ver { font-size: 13px; color: var(--ss-text-3); }
.cl-body { min-width: 0; display: grid; gap: 12px; justify-items: start; }
@media (min-width: 760px) {
  .cl-entry { grid-template-columns: 190px minmax(0, 1fr); gap: 32px; padding: 36px 0; }
  .cl-meta { display: grid; align-content: start; gap: 6px; position: sticky; top: 96px; align-self: start; }
}

/* New / Improved / Fixed (and the Proposed draft tag) */
.cl-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-tag { display: inline-flex; align-items: center; padding: 2px 10px; border: 1px solid currentColor; border-radius: var(--ss-r-pill);
  font-size: 12px; line-height: 1.6; white-space: nowrap; }
.cl-tag-new { color: var(--ss-accent); }
.cl-tag-improved { color: var(--ss-text-2); }
.cl-tag-fixed { color: var(--ss-ok); }
.cl-tag-proposed { color: var(--ss-warn); border-style: dashed; }
.cl-tags:empty { display: none; }

.ss .cl-h { margin: 0; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; }
.ss .cl-h a { color: inherit; text-decoration: none; }
.ss .cl-h a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cl-bullets { margin: 0; padding-left: 20px; color: var(--ss-text-2); font-size: 16px; line-height: 1.6; max-width: 64ch; }
.cl-bullets li + li { margin-top: 6px; }
.ss .cl-link { font: 500 14px/1.4 var(--ss-font-mono); }
@media (pointer: coarse) { .ss .cl-link { display: inline-flex; align-items: center; min-height: 44px; } }

/* A proposed block (preview only) reads as a draft */
.cl-entry.is-proposed .cl-body { padding-left: 14px; border-left: 2px dashed var(--ss-warn); }

.ss .cl-preview { margin: 0 0 20px; color: var(--ss-text-2); font-size: 15px; line-height: 1.6; max-width: 70ch; }
.ss .cl-preview strong { color: var(--ss-text); }
.cl-empty { margin: 28px 0 0; color: var(--ss-text-2); font-size: 17px; line-height: 1.6; }
.cl-empty[hidden] { display: none; }

/* The page head already leaves a gap below it */
.section.cl { padding-top: 0; }