/*
 * Changelog app styles: the public timeline, an entry, the category and
 * tag lists, search, and What's new in a frame. Ink and paper: hairlines,
 * the category badges monochrome (New filled, the rest outlined, never a
 * colour), start and end rather than left and right so a right-to-left
 * page mirrors.
 */

/* ==========================================================================
   Page header: the site's name or the list's, its line, its feed
   ========================================================================== */

.changelog-header {
  margin-bottom: var(--space-12);
}

.changelog-header__eyebrow {
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-subtle);
}

.changelog-header__title {
  margin-bottom: var(--space-2);
  overflow-wrap: anywhere;
}

.changelog-header__lead {
  color: var(--color-fg-muted);
  max-width: 34rem;
}

.changelog-header__feed {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

/* ==========================================================================
   Category badge, version, tags
   ========================================================================== */

.changelog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.changelog-badge {
  text-decoration: none;
}

.changelog-badge:hover {
  text-decoration: underline;
}

/* New is the one filled badge; the rest are outlined, the ones about what
   goes (a fix, a deprecation, a removal) quieter still. */
.changelog-badge--feature {
  background-color: var(--color-fg);
  border-color: var(--color-fg);
  color: var(--color-bg);
}

.changelog-badge--improvement,
.changelog-badge--security {
  border-color: var(--color-fg);
  color: var(--color-fg);
}

.changelog-badge--fix,
.changelog-badge--deprecated,
.changelog-badge--removed {
  border-color: var(--color-fg-muted);
  color: var(--color-fg-muted);
}

.changelog-version,
.changelog-meta__pinned {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
}

.changelog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.changelog-tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.changelog-tag:hover {
  color: var(--color-fg);
  border-color: var(--color-fg);
}

/* A phone: a tag and a category badge that links are words in a line, so
   each is a 44px target grown past it by an empty ::after and no line
   moves; the tags' rows are spaced so no target reaches the next row. */
@media (max-width: 640px) {
  .changelog-tags {
    row-gap: var(--space-4);
  }

  a.changelog-badge,
  .changelog-tag {
    position: relative;
  }

  a.changelog-badge::after,
  .changelog-tag::after {
    content: "";
    position: absolute;
    inset-block: calc((2.75rem - 100%) / -2);
    inset-inline: 0;
  }
}

/* ==========================================================================
   The pinned highlight, above the timeline
   ========================================================================== */

.changelog-highlight {
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  margin-bottom: var(--space-12);
}

.changelog-highlight__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
}

.changelog-highlight__title {
  margin-bottom: var(--space-3);
  overflow-wrap: anywhere;
}

.changelog-highlight__title a {
  text-decoration: none;
}

.changelog-highlight__title a:hover {
  text-decoration: underline;
}

.changelog-highlight__summary {
  color: var(--color-fg-muted);
}

/* ==========================================================================
   The filter row: All and each category, the page shown filled
   ========================================================================== */

.changelog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-12);
}

.changelog-filter__chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--space-4);
  border: var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--color-fg);
  text-decoration: none;
}

.changelog-filter__chip:hover {
  background-color: var(--color-bg-hover);
}

.changelog-filter__chip[aria-current="page"] {
  background-color: var(--color-fg);
  border-color: var(--color-fg);
  color: var(--color-bg);
}

/* ==========================================================================
   The timeline: the date on a rail, a line and a dot beside each entry;
   on a phone the date sits above the entry and the rail goes
   ========================================================================== */

.changelog-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A list drawn as rows or chips takes none of a prose list item's indent
   or gap: the date, the entry and the first tag start at the column's edge,
   and the timeline's line runs unbroken from one entry to the next (CSS.md
   "Lists drawn as rows or cards"). */
.changelog-timeline > li,
.changelog-tags > li,
.changelog-embed__list > li {
  margin: 0;
  padding-inline-start: 0;
}

.changelog-entry {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--space-8);
}

.changelog-entry__date {
  padding-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.changelog-entry__body {
  position: relative;
  min-width: 0;
  padding-inline-start: var(--space-8);
  padding-bottom: var(--space-16);
  border-inline-start: var(--border);
}

.changelog-timeline > .changelog-entry:last-child .changelog-entry__body {
  padding-bottom: 0;
}

.changelog-entry__body::before {
  content: "";
  position: absolute;
  inset-inline-start: -5px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--color-fg);
}

.changelog-entry__title {
  margin-bottom: var(--space-4);
  overflow-wrap: anywhere;
}

.changelog-entry__title a {
  text-decoration: none;
}

.changelog-entry__title a:hover {
  text-decoration: underline;
}

.changelog-entry__media {
  margin: 0 0 var(--space-6);
}

.changelog-entry__media img,
.changelog-single__hero img {
  display: block;
  max-width: 100%;
  height: auto;
  border: var(--border);
  border-radius: var(--radius-sm);
}

.changelog-entry__summary {
  color: var(--color-fg-muted);
}

@media (max-width: 640px) {
  .changelog-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .changelog-entry__date {
    padding-top: 0;
    text-align: start;
  }

  .changelog-entry__body {
    padding-inline-start: 0;
    padding-bottom: var(--space-12);
    border-inline-start: none;
  }

  .changelog-entry__body::before {
    display: none;
  }

  .changelog-highlight {
    padding: var(--space-6);
  }
}

/* ==========================================================================
   An entry's page
   ========================================================================== */

.changelog-single__preview {
  margin-bottom: var(--space-6);
}

.changelog-single__back {
  display: inline-block;
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

.changelog-single__title {
  margin: var(--space-2) 0 var(--space-3);
  overflow-wrap: anywhere;
}

.changelog-single__byline {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

.changelog-single__lead {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  color: var(--color-fg-muted);
}

.changelog-single__hero {
  margin: var(--space-8) 0 var(--space-12);
}

.changelog-single__content {
  margin-top: var(--space-8);
}

/* Previous and next, the neighbours by publication */
.changelog-entrynav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: var(--border);
}

.changelog-entrynav__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.changelog-entrynav__link--next {
  margin-inline-start: auto;
  text-align: end;
}

.changelog-entrynav__dir {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
}

.changelog-entrynav__title {
  text-decoration: none;
  overflow-wrap: anywhere;
}

.changelog-entrynav__title:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Search: the form and the results
   ========================================================================== */

.changelog-search {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-8);
}

.changelog-search .form-input {
  flex: 1;
  min-width: 0;
}

.changelog-search__meta {
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

.changelog-results__item {
  padding: var(--space-6) 0;
  border-bottom: var(--border);
}

.changelog-results__item:last-child {
  border-bottom: none;
}

.changelog-results__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  overflow-wrap: anywhere;
}

.changelog-results__title a {
  text-decoration: none;
}

.changelog-results__snippet {
  margin: 0 0 var(--space-2);
  color: var(--color-fg-muted);
  overflow-wrap: anywhere;
}

.changelog-results__snippet mark {
  background: none;
  color: var(--color-fg);
  font-weight: var(--weight-semibold);
}

.changelog-results__type {
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
}

/* ==========================================================================
   What's new, in a frame on the owner's other sites: the latest entries,
   compact, each a hairline apart
   ========================================================================== */

.changelog-embed__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}

.changelog-embed__title {
  margin: 0;
  font-size: var(--text-lg);
}

.changelog-embed__all {
  font-size: var(--text-sm);
}

.changelog-embed__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.changelog-embed__item {
  padding: var(--space-4) 0;
  border-top: var(--border);
}

.changelog-embed__item .changelog-meta {
  margin-bottom: var(--space-2);
}

.changelog-embed__date {
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
}

.changelog-embed__entry {
  margin: 0;
  font-size: var(--text-base);
  overflow-wrap: anywhere;
}

.changelog-embed__entry a {
  text-decoration: none;
}

.changelog-embed__entry a:hover {
  text-decoration: underline;
}

.changelog-embed__summary {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  overflow-wrap: anywhere;
}

.changelog-embed__empty {
  color: var(--color-fg-muted);
}