/* ==========================================================================
   Changelog Section Component — Ruled Colophon List
   Strictly aligned with creditsSection.css and raiken.io design tokens.
   Ruled rows, no cards, zero background fills; version label in pixel face
   on left, title center, date and +/- toggle right.
   ========================================================================== */

.changelog-section {
  --changelog-label-width: 13rem;
  width: 100%;
  padding-block: var(--space-xxl, 4rem);
  scroll-margin-top: var(--space-xl, 3rem);
}

.changelog-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg, 2rem);
  max-width: var(--container-width, 1040px);
  margin-inline: auto;
  padding-inline: var(--space-md, 1.5rem);
  width: 100%;
}

/* ── Header: title left, subtitle right (matches FAQ & Credits header) ──── */

.changelog-header-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg, 2rem);
  align-items: end;
  margin-block-end: var(--space-sm, 1rem);
}

.changelog-title {
  margin: 0;
  font: 700 clamp(1.75rem, 3.5vw, 2.5rem)/1.2 var(--font-primary, monospace);
  color: var(--color-text-primary, var(--shade-100));
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.changelog-subtitle {
  margin: 0;
  max-width: 34rem;
  font: 400 16px/1.6 var(--font-secondary, system-ui, sans-serif);
  color: var(--color-text-secondary, var(--shade-300));
  text-wrap: pretty;
}

/* ── Timeline: clean colophon group without cards ────────────────────────── */

.changelog-timeline {
  display: flex;
  flex-direction: column;
  border-block-start: 2px solid var(--color-border-strong, rgba(255, 255, 255, 0.2));
  background: transparent;
}

/* ── Reset the global details/summary styles ────────────────────────────── */
/* Bare `details`/`summary` rules elsewhere style accordions. These selectors are class-qualified,
   so they outrank them on specificity alone: no !important needed (measured on the KB page and
   the Contently page at 1440 and 390 px). */

.changelog-section details,
.changelog-timeline details,
details.changelog-card {
  margin: 0;
  border: 0;
  border-block-end: 1px solid var(--color-border-muted, rgba(255, 255, 255, 0.08));
  border-radius: 0;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
}

.changelog-section details > summary,
.changelog-timeline details > summary,
details.changelog-card > summary.changelog-summary {
  margin: 0;
  padding: 0.85rem 0; /* Zero horizontal padding for flush left alignment */
  border: 0;
  border-radius: 0;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  display: grid;
  grid-template-columns: var(--changelog-label-width) minmax(0, 1fr) auto;
  column-gap: var(--space-lg, 2rem);
  align-items: center;
  min-height: 56px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease;
}

/* Suppress all browser markers and global pseudo-elements (+ signs from accordions) */
.changelog-section details > summary::before,
.changelog-section details > summary::after,
.changelog-timeline details > summary::before,
.changelog-timeline details > summary::after,
details.changelog-card > summary::before,
details.changelog-card > summary::after,
details.changelog-card > summary::-webkit-details-marker,
details.changelog-card > summary::marker {
  content: none;
  display: none;
}

.changelog-section details > summary:hover,
.changelog-timeline details > summary:hover,
details.changelog-card > summary.changelog-summary:hover {
  background: rgba(255, 255, 255, 0.02);
  background-color: rgba(255, 255, 255, 0.02);
}

/* Global details > div padding reset */
.changelog-section details > div,
.changelog-timeline details > div,
details.changelog-card > div {
  padding: 0;
}

/* ── Columns inside release rows ────────────────────────────────────────── */

.changelog-version-col {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.changelog-version {
  font: 400 13px/1.5 var(--font-brand-display, var(--font-primary, monospace));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-primary, var(--shade-100));
}

.changelog-badge-latest {
  font: 700 10px/1 var(--font-brand-display, var(--font-primary, monospace));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--color-border-strong, rgba(255, 255, 255, 0.25));
  color: var(--color-text-primary, var(--shade-100));
}

.changelog-title-col {
  min-width: 0;
}

.changelog-release-title {
  font: 500 16px/1.4 var(--font-secondary, system-ui, sans-serif);
  color: var(--color-text-primary, var(--shade-100));
}

.changelog-meta-col {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-self: end;
  flex-shrink: 0;
}

.changelog-date {
  font: 400 13px/1.5 var(--font-brand-display, var(--font-primary, monospace));
  color: var(--color-text-muted, var(--shade-300));
  white-space: nowrap;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* ── The plus/minus toggle (+ turns into −) ────────────────────────────── */

.changelog-toggle {
  position: relative;
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  min-height: 1.125rem;
  max-width: 1.125rem;
  max-height: 1.125rem;
  color: var(--color-text-secondary, var(--shade-300));
  flex-shrink: 0;
  vertical-align: middle;
}

.changelog-toggle::before,
.changelog-toggle::after {
  content: "";
  display: block;
  position: absolute;
  inset-inline: 0;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  height: 1.5px;
  margin-top: -0.75px;
  border-radius: 1px;
  background: currentColor;
}

.changelog-toggle::after {
  transform: rotate(90deg);
}

.changelog-card[open] .changelog-toggle::after,
.changelog-more[aria-expanded="true"] .changelog-toggle::after {
  transform: rotate(0deg);
}

.changelog-summary:hover .changelog-toggle,
.changelog-more:hover .changelog-toggle {
  color: var(--color-text-primary, #fff);
}

@media (prefers-reduced-motion: no-preference) {
  .changelog-toggle::after {
    transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

/* ── Content Area: aligned under Column 2 (indented by label-width + gap) ─ */

.changelog-body {
  padding-inline-start: calc(var(--changelog-label-width) + var(--space-lg, 2rem));
  padding-inline-end: 0;
  padding-block: var(--space-xs, 0.5rem) var(--space-lg, 2rem);
  background: transparent;
  background-color: transparent;
  border: 0;
}

.changelog-summary-text {
  font: 400 15px/1.6 var(--font-secondary, system-ui, sans-serif);
  color: var(--color-text-secondary, var(--shade-200));
  margin: 0 0 1rem 0;
  max-width: 48rem;
}

.changelog-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 48rem;
}

.changelog-highlight-item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font: 400 14px/1.55 var(--font-secondary, system-ui, sans-serif);
  color: var(--color-text-secondary, var(--shade-200));
}

.changelog-highlight-bullet {
  color: var(--color-text-muted, var(--shade-400));
  font-size: 0.9rem;
  user-select: none;
  flex-shrink: 0;
}

/* ── "Show all X releases" disclosure row matching Credits ───────────────── */

button.changelog-more,
.changelog-more {
  all: unset;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: var(--changelog-label-width) minmax(0, 1fr) auto;
  column-gap: var(--space-lg, 2rem);
  align-items: center;
  min-height: 56px;
  width: 100%;
  margin: 0;
  padding: 0.85rem 0; /* Matches summary padding exactly */
  border: 0;
  border-block-end: 1px solid var(--color-border-muted, rgba(255, 255, 255, 0.08));
  border-radius: 0;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  color: var(--color-text-primary, var(--shade-100));
  text-align: start;
  text-transform: none;
  cursor: pointer;
  transform: none;
  transition: background-color 150ms ease;
}

button.changelog-more:hover,
button.changelog-more:active,
.changelog-more:hover,
.changelog-more:active {
  background: rgba(255, 255, 255, 0.02);
  background-color: rgba(255, 255, 255, 0.02);
  transform: none;
  box-shadow: none;
}

button.changelog-more::before,
button.changelog-more::after,
.changelog-more::before,
.changelog-more::after {
  content: none;
  display: none;
}

.changelog-more-count {
  font: 400 13px/1.5 var(--font-brand-display, var(--font-primary, monospace));
  color: var(--color-text-secondary, var(--shade-300));
  text-transform: uppercase;
}

.changelog-more-label {
  font: 500 16px/1.4 var(--font-secondary, system-ui, sans-serif);
  color: var(--color-text-primary, var(--shade-100));
  text-transform: none;
}

/* ── Knowledge Base Archive link row matching Credits licenses summary ──── */

a.changelog-archive-row,
.changelog-archive-row {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: var(--changelog-label-width) minmax(0, 1fr) auto;
  column-gap: var(--space-lg, 2rem);
  align-items: center;
  min-height: 56px;
  width: 100%;
  margin: 0;
  padding: 0.85rem 0; /* Matches summary padding exactly */
  border: 0;
  border-block-end: 2px solid var(--color-border-strong, rgba(255, 255, 255, 0.2));
  border-radius: 0;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  color: var(--color-text-primary, var(--shade-100));
  text-decoration: none;
  transition: background-color 150ms ease;
}

a.changelog-archive-row:hover,
.changelog-archive-row:hover {
  background: rgba(255, 255, 255, 0.02);
  background-color: rgba(255, 255, 255, 0.02);
  text-decoration: none;
}

.changelog-archive-count {
  font: 400 13px/1.5 var(--font-brand-display, var(--font-primary, monospace));
  color: var(--color-text-secondary, var(--shade-300));
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.changelog-archive-label {
  font: 500 16px/1.4 var(--font-secondary, system-ui, sans-serif);
  color: var(--color-text-primary, var(--shade-100));
  text-transform: none;
}

.changelog-archive-arrow {
  font-family: var(--font-brand-display, var(--font-primary, monospace));
  font-size: 1.15rem;
  color: var(--color-text-secondary, var(--shade-300));
  transition: transform 150ms ease, color 150ms ease;
  line-height: 1;
}

.changelog-archive-row:hover .changelog-archive-arrow {
  transform: translateX(3px);
  color: var(--color-text-primary, #fff);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .changelog-header-row {
    grid-template-columns: 1fr;
    gap: var(--space-sm, 1rem);
  }

  .changelog-section {
    --changelog-label-width: 10rem;
  }

  .changelog-summary,
  button.changelog-more,
  .changelog-more,
  a.changelog-archive-row,
  .changelog-archive-row {
    grid-template-columns: var(--changelog-label-width) minmax(0, 1fr) auto;
    column-gap: 1rem;
  }

  .changelog-body {
    padding-inline-start: calc(var(--changelog-label-width) + 1rem);
  }
}

@media (max-width: 650px) {
  .changelog-section {
    padding-block: var(--space-lg, 2rem);
  }

  .changelog-summary,
  button.changelog-more,
  .changelog-more,
  a.changelog-archive-row,
  .changelog-archive-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 0.4rem;
    padding-block: 0.75rem;
  }

  .changelog-version-col,
  .changelog-more-count,
  .changelog-archive-count {
    grid-column: 1;
  }

  .changelog-meta-col {
    grid-column: 2;
    grid-row: 1;
  }

  .changelog-title-col,
  .changelog-more-label,
  .changelog-archive-label {
    grid-column: 1 / -1;
  }

  .changelog-body {
    padding-inline-start: 0;
  }
}

/* ── Link from a release to the guide that explains it ─────────────────── */
.changelog-guide-link {
  display: inline-block;
  margin-top: var(--space-sm, 1rem);
  font: 400 13px/1.5 var(--font-mono, ui-monospace, monospace);
  color: var(--kb-product-color, var(--color-accent, currentColor));
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.changelog-guide-link:hover { text-decoration-thickness: 2px; }