/* changelog.css — the Changelog page (/changelog/, /de/aenderungen/, /nl/wijzigingen/; scripts/build_changelog.mjs),
   on top of style.css, legal.css, kitchen.css, business.css and about.css: the same banner, foot and headings as
   "About us". One section per release, one row per tool: date, tool, new or updated, keywords. */
.biz-main.cl-main { gap: 40px; max-width: 1040px; }
.cl-head { display: grid; gap: 14px; }
.cl-head h1 { margin: 0; }
.cl-current { font-size: 1.05rem; color: var(--k-muted); }
.cl-current strong { color: var(--k-ink); }
.cl-version { font-variant-numeric: tabular-nums; }
.cl-release { display: grid; gap: 10px; min-width: 0; }
.biz-main .cl-release h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; font-size: clamp(1.35rem, 3vw, 1.7rem); }
.cl-when { font: 600 1rem/1.2 var(--k-body); letter-spacing: 0; color: var(--k-muted); }
.cl-note, .cl-none { color: var(--k-muted); }
/* the table: a card with the ink outline, as the other cards of the new look */
.cl-table { background: var(--k-card); border: 2px solid var(--k-line); border-radius: var(--k-r); box-shadow: var(--k-shadow-sm); overflow-x: auto; }
.cl-table table { width: 100%; border-collapse: collapse; font-size: 1rem; table-layout: fixed; }
/* the same columns in every release's table, so they line up down the page */
.cl-table th:nth-child(1) { width: 16%; } .cl-table th:nth-child(2) { width: 36%; } .cl-table th:nth-child(3) { width: 15%; }
.cl-table th, .cl-table td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--k-faint); }
.cl-table tbody tr:last-child td { border-bottom: 0; }
.cl-table th { font: 700 .8rem/1.3 var(--k-body); letter-spacing: .06em; text-transform: uppercase; color: var(--k-muted); white-space: nowrap; }
.cl-table td.cl-day { white-space: nowrap; color: var(--k-muted); font-variant-numeric: tabular-nums; }
.cl-table td.cl-tool { font-weight: 650; }
.cl-table td.cl-what { color: var(--k-ink); }
.cl-kind { display: inline-block; font: 750 .78rem/1.5 var(--k-display); letter-spacing: .03em; padding: 0 9px; border: 2px solid var(--k-line); border-radius: 999px; color: var(--k-ink); white-space: nowrap; }
.cl-kind.cl-new { background: var(--k-mint); }
.cl-kind.cl-updated { background: var(--k-ice); }
/* the next release (review site only): dashed, so it is never taken for one that is live */
.cl-upcoming { padding: 16px; border: 2px dashed var(--k-dash); border-radius: var(--k-r); }
.cl-upcoming .cl-table { box-shadow: none; }
/* a phone: every row a small block of its own (tool and change on one line, the date and keywords under it) */
@media (max-width: 640px) {
  .cl-table { overflow: visible; }
  .cl-table table { table-layout: auto; }
  .cl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cl-table table, .cl-table tbody { display: block; }
  .cl-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 12px 14px; border-bottom: 1px solid var(--k-faint); }
  .cl-table tbody tr:last-child { border-bottom: 0; }
  .cl-table td { display: block; padding: 0; border: 0; }
  .cl-table td.cl-tool { grid-column: 1; grid-row: 1; }
  .cl-table td:nth-child(3) { grid-column: 2; grid-row: 1; }
  .cl-table td.cl-day { grid-column: 1 / -1; grid-row: 2; font-size: .9rem; }
  .cl-table td.cl-what { grid-column: 1 / -1; grid-row: 3; }
  .cl-table td.cl-what:empty { display: none; }
}