/* ── changelog ──
 * The /changelog view (src/changelog.js) and the `changelog +N` button in /help's
 * footer. Theme tokens throughout, so it opens in the reader's own theme. The kind
 * colours are mixed toward --fg: lighter on dark themes, darker on light ones, so a
 * fixed hue stays legible on both. */

#changelog {
  --cl-new: var(--accent);
  --cl-better: color-mix(in srgb, #5b9bff 72%, var(--fg));
  --cl-fixed: color-mix(in srgb, var(--warn) 78%, var(--fg));
  position: fixed; inset: 0; z-index: 150;          /* over the palette (100), under the tooltip (200) */
  overflow-y: auto; background: var(--bg-page); color: var(--fg);
}
#changelog.hidden { display: none; }
#changelog button { font: inherit; }
#changelog :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cl-page { max-width: 820px; margin: 0 auto; padding: 36px 20px 64px; }
.cl-crumbs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; color: var(--fg-dim); font-size: 12px; }
.cl-path b { color: var(--accent); font-weight: 400; }
.cl-back, .cl-copy { border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; font-size: inherit; }
.cl-back:hover, .cl-copy:hover { text-decoration: underline; }

#changelog h1 { font-size: 26px; font-weight: 600; letter-spacing: -.5px; margin: 26px 0 6px; text-wrap: balance; }
.cl-cur { display: inline-block; width: .55em; height: 1em; margin-left: 6px; vertical-align: -2px; background: var(--accent); animation: cl-blink 1.1s steps(1) infinite; }
@keyframes cl-blink { 50% { opacity: 0; } }
.cl-lede { margin: 0; max-width: 62ch; color: var(--fg-dim); line-height: 1.65; }

.cl-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 26px 0 8px; }
#changelog .cl-chip { border: 1px solid var(--border); background: none; color: var(--fg-dim); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; line-height: 1.4; cursor: pointer; }
#changelog .cl-chip[aria-pressed="true"] { border-color: var(--accent-line); color: var(--fg); background: var(--accent-soft); }
#changelog .cl-chip .n { margin-left: 4px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }

.cl-log { margin-top: 10px; }
.cl-day { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 22px; padding: 18px 0; border-top: 1px solid var(--border-soft); }
.cl-day[hidden], .cl-entry[hidden], .cl-rule[hidden] { display: none; }
.cl-when { position: sticky; top: 12px; align-self: start; color: var(--fg-dim); font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.cl-when b { display: block; color: var(--fg); font-weight: 600; font-size: 13px; }
.cl-entries { display: grid; gap: 14px; min-width: 0; }

.cl-entry { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; }
.cl-kind { position: relative; padding-top: 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; }
.cl-entry[data-kind="new"] .cl-kind    { color: var(--cl-new); }
.cl-entry[data-kind="better"] .cl-kind { color: var(--cl-better); }
.cl-entry[data-kind="fixed"] .cl-kind  { color: var(--cl-fixed); }
/* An unread entry's sign — + new, ~ better, ✓ fixed — hangs in the margin. */
.cl-sign { position: absolute; left: -14px; top: 0; font-size: 13.5px; font-weight: 700; line-height: 1.45; }
.cl-entry[data-kind="fixed"] .cl-sign { font-size: 11.5px; top: 1px; }
.cl-text { min-width: 0; }
.cl-entry h3 { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: color-mix(in srgb, var(--fg) 80%, var(--bg-page)); }
.cl-entry.unseen h3 { color: var(--fg); }
.cl-entry p { margin: 3px 0 0; color: var(--fg-dim); line-height: 1.6; font-size: 12.5px; }
.cl-entry kbd { font: inherit; color: var(--fg); background: var(--bg-code); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; }

/* Where you stopped reading last time. Between days, or inside one. */
.cl-rule { display: flex; align-items: center; gap: 10px; margin: 6px 0; color: var(--fg-faint); font-size: 11px; letter-spacing: .04em; }
.cl-rule::before, .cl-rule::after { content: ""; flex: 1; border-top: 1px dashed var(--border); }
.cl-rule b { color: var(--fg-dim); font-weight: 500; }
.cl-rule + .cl-day { border-top: 0; }

.cl-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border-soft); color: var(--fg-faint); font-size: 11.5px; }

@media (max-width: 560px) {
  .cl-day { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cl-when { position: static; }
  .cl-when b { display: inline; margin-right: 8px; }
  .cl-page { padding: 24px 16px 48px; }
  /* The margin sign needs room left of the label on a phone's tight gutter. */
  .cl-entry { grid-template-columns: 68px minmax(0, 1fr); }
  .cl-kind { padding-left: 14px; }
  .cl-sign { left: 0; }
}
@media (prefers-reduced-motion: reduce) { .cl-cur { animation: none; } }

/* ── /help footer button ── */
#palette-changelog {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg-code); color: var(--fg-dim);
  font: inherit; font-size: 10.5px; cursor: pointer;
}
#palette-changelog:hover { color: var(--fg); border-color: var(--accent-line); }
#palette-changelog.hidden { display: none; }
#palette-changelog .cl-ahead { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
#palette-changelog .cl-ahead:empty { display: none; }