/* Changelog: /changelog rows and filters, and the Recent changes block on /protocols.
   Markup comes from scripts/build-changelog.mjs; behaviour from ui/changelog.js.
   The only motion is a row opening or closing, and it is off under reduced motion. */

.pr-changelog-feeds a { text-decoration: underline; text-underline-offset: 2px; }

/* Filters */
.pr-changelog-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-7); }
.pr-changelog-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 36px; padding: 6px 14px;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-canvas); color: var(--color-ink-secondary);
  font: inherit; font-size: var(--type-small-size); line-height: 1; cursor: pointer;
}
.pr-changelog-chip:hover { border-color: var(--color-border-strong); color: var(--color-ink); }
.pr-changelog-chip[aria-pressed="true"] { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-canvas); }
/* Protocol chips: a second row under the Protocols chip. */
.pr-changelog-filters__sub:not([hidden]) { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: var(--space-2); }
.pr-changelog-chip__count { font-family: var(--font-mono); font-size: var(--type-caption-size); font-variant-numeric: tabular-nums; opacity: .75; }
.pr-changelog-empty { margin-bottom: var(--space-6); color: var(--color-ink-muted); }

/* Months and rows */
.pr-changelog-month + .pr-changelog-month { margin-top: var(--space-8); }
.pr-changelog-month__title { margin: 0 0 var(--space-3); color: var(--color-ink-muted); font-size: var(--type-small-size); font-weight: 500; }
.pr-changelog-list { margin: 0; padding: 0; list-style: none; border-top: var(--hairline); }
.pr-changelog-row { border-bottom: var(--hairline); scroll-margin-top: 96px; }
.pr-changelog-row__head { display: flex; align-items: center; gap: var(--space-2); }

.pr-changelog-row__toggle {
  flex: 1; min-width: 0;
  /* Fixed tag column so titles line up whatever the tags say; "Quotes & approvals Changed" fits. */
  display: grid; grid-template-columns: 7.5rem 13rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-4);
  padding: 14px var(--space-2); border: 0; background: none; color: var(--color-ink);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.pr-changelog-row__toggle:hover .pr-changelog-row__title { text-decoration: underline; text-underline-offset: 3px; }
.pr-changelog-row__date { color: var(--color-ink-muted); font-family: var(--font-mono); font-size: var(--type-caption-size); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-changelog-row__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pr-changelog-row__title { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.pr-changelog-row__deadline { color: var(--color-blocked-text); font-size: var(--type-caption-size); white-space: nowrap; }

.pr-changelog-tag {
  display: inline-flex; align-items: center; padding: 2px 8px;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  color: var(--color-ink-secondary); font-size: var(--type-caption-size); line-height: 1.5; white-space: nowrap;
}
.pr-changelog-tag[data-kind="protocol"] { font-family: var(--font-mono); }
.pr-changelog-tag[data-type="added"] { border-color: var(--color-agent-border); color: var(--color-agent-text); }
/* Breaking and Deprecated: filled tag and a heavier title. */
.pr-changelog-tag[data-type="deprecated"] { border-color: var(--color-approval-border); background: var(--color-approval-tint); color: var(--color-approval-text); font-weight: 500; }
.pr-changelog-tag[data-type="breaking"] { border-color: var(--color-blocked-border); background: var(--color-blocked-tint); color: var(--color-blocked-text); font-weight: 500; }
.pr-changelog-row[data-strong] .pr-changelog-row__title { font-weight: 600; }

.pr-changelog-action { justify-self: end; font-size: var(--type-caption-size); white-space: nowrap; }
.pr-changelog-action[data-action="none"] { color: var(--color-ink-muted); }
.pr-changelog-action[data-action="required"] {
  padding: 2px 8px; border: 1px solid var(--color-approval-border); border-radius: var(--radius-pill);
  background: var(--color-approval-tint); color: var(--color-approval-text); font-weight: 500;
}

.pr-changelog-row__copy {
  flex: none; min-height: 32px; padding: 4px 10px;
  border: 1px solid transparent; border-radius: var(--radius-control);
  background: none; color: var(--color-ink-muted); font: inherit; font-size: var(--type-caption-size); cursor: pointer;
}
.pr-changelog-row__copy:hover { border-color: var(--color-border); color: var(--color-ink); }

.pr-changelog-chip:focus-visible,
.pr-changelog-row__toggle:focus-visible,
.pr-changelog-row__copy:focus-visible,
.pr-changelog-updated:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-control); }

/* Open and close. A collapsed panel is also hidden from assistive tech (visibility). */
.pr-changelog-row__panel {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows var(--motion-ui) var(--motion-ease-out), visibility 0s linear var(--motion-ui);
}
.pr-changelog-row.is-open .pr-changelog-row__panel {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows var(--motion-ui) var(--motion-ease-out), visibility 0s;
}
.pr-changelog-row__body { min-height: 0; overflow: hidden; padding-inline: calc(7.5rem + var(--space-4) + var(--space-2)) var(--space-2); }
.pr-changelog-row__body p { margin: 0 0 var(--space-3); max-width: 44rem; color: var(--color-ink-secondary); }
.pr-changelog-row__body code { font-family: var(--font-mono); font-size: .9em; }
.pr-changelog-row.is-open .pr-changelog-row__body { padding-bottom: var(--space-5); }

@media (prefers-reduced-motion: reduce) {
  .pr-changelog-row__panel,
  .pr-changelog-row.is-open .pr-changelog-row__panel { transition: none; }
}

@media (max-width: 767.98px) {
  .pr-changelog-row__toggle {
    grid-template-columns: 1fr auto; grid-template-areas: "date action" "tags tags" "title title";
    gap: var(--space-2) var(--space-3); padding-block: var(--space-4);
  }
  .pr-changelog-row__date { grid-area: date; }
  .pr-changelog-row__tags { grid-area: tags; }
  .pr-changelog-row__title { grid-area: title; }
  .pr-changelog-action { grid-area: action; }
  .pr-changelog-row__head { flex-direction: column; align-items: stretch; gap: 0; }
  .pr-changelog-row__copy { align-self: flex-start; margin: 0 0 var(--space-3) var(--space-2); padding-inline: 0; }
  .pr-changelog-row__body { padding-inline: var(--space-2); }
}