/* Changelog page (/changelog.html).
   Entries are separated by rules, not cards — no shadows, no hover lift on this
   page. All colors come from the shared brand tokens in assets/brand-tokens.css;
   nothing here introduces a new hex value.

   TYPE NOTE: the site loads Lato 300/400/700/900 only — there is no 600 face,
   so every `font-weight: 600` here resolves to the 700 bold, exactly as it does
   in styles.css. The 600 declarations are kept (rather than rewritten to 700)
   so this page tracks the rest of the site if a true semibold is ever added to
   the font import in assets/brand-tokens.css. */

/* ── Title block ──────────────────────────────────────────────────────────── */

/* The h1 comes from the standard Quarto title block, so its size and weight
   match About, FAQ, and Methodology. The deck and timestamp sit beneath it. */
#title-block-header.quarto-title-block {
  margin-top: 1.4rem;
  margin-bottom: 0.4rem;
}

/* Matches the -0.012em tracking on .navbar-brand-text, so "Changelog" sits in
   the same optical family as the "Civic Data Atlas" wordmark directly above it.
   Site-wide page titles do not carry this yet; if it is added to `.title` in
   styles.css, delete this rule. */
#title-block-header.quarto-title-block h1.title {
  letter-spacing: -0.012em;
}

.changelog-deck {
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: 62ch;
  margin: 0;
  text-wrap: pretty;
}

.changelog-stamp {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0.5rem 0 0;
}

/* ── Filter row ───────────────────────────────────────────────────────────── */

.changelog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 0.75rem 0;
  margin: 1.5rem 0 0;
}

.changelog-filters .changelog-filter-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  font-weight: 700;
  margin-right: 0.25rem;
}

.changelog-filter-btn {
  appearance: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color-strong);
  background: transparent;
  color: var(--text-primary);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.changelog-filter-btn:hover {
  border-color: var(--accent-color);
  color: var(--accent-strong);
}

.changelog-filter-btn:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}

.changelog-filter-btn[aria-pressed="true"] {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #ffffff;
}

/* ── Entries ──────────────────────────────────────────────────────────────── */

.changelog-entries {
  display: flex;
  flex-direction: column;
}

.changelog-entry {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--divider);
  scroll-margin-top: 120px;
}

/* .changelog-entry sets display:grid, so [hidden] needs an explicit override. */
.changelog-entry[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .changelog-entry {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

.changelog-entry-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
}

.changelog-entry-date {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary-color);
  font-variant-numeric: tabular-nums;
}

.changelog-entry-kind {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* Corrections carry a chip instead of a plain label — accountability, not
   decoration. Deliberately not a red/amber "error" color. */
.changelog-entry-kind.is-correction {
  font-weight: 700;
  color: var(--primary-color);
  background: var(--accent-subtle);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.45rem;
}

.changelog-entry-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

/* Overrides the site's section-heading h2 (1.4rem, rule underneath, large
   top margin) — these are list-row headings, not page sections. */
.changelog-entry-body h2 {
  margin: 0;
  padding: 0;
  border-bottom: none;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-light);
  line-height: 1.35;
  text-wrap: pretty;
}

.changelog-entry-body p {
  margin: 0;
  color: var(--text-secondary);
  max-width: 62ch;
  text-wrap: pretty;
}

.changelog-entry-body ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* ── Start-of-record note ─────────────────────────────────────────────────── */

.changelog-record-note {
  margin-top: 1.5rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  max-width: 70ch;
  text-wrap: pretty;
}