/* =========================================================================
   Page — the public API changelog ({en,de}/changelog.html)
   -------------------------------------------------------------------------
   The grammar is DESIGN_TOKENS.md §9, and the three decisions it makes here:

   DEPTH (§9.1). An entry is a `.card`, which sits on `--doc-panel`. The things
   that recede INSIDE it — the endpoint list, the facet chips — sit on
   `--sd-sunk`, which is between the page ground and the surface in BOTH themes.
   No shadow anywhere: an entry rests, it does not float.

   COLOUR (§9.3). One accent per card, and it is the kind chip. The API and the
   version are facets and stay neutral. The only tinted FILL this page can
   produce is the warning chip on a DEPRECATED entry — the one kind that starts
   a clock.

   FIGURES (§9.5). The version, the release date and the sunset date are
   `tabular-nums`: a reader scanning a column of releases is comparing them, and
   proportional digits make that column a ragged edge.
   ========================================================================= */

/* ---- The subscribe row ---------------------------------------------------- */

.changelog-subscribe {
  margin: 0 0 24px;
  color: var(--doc-ink-soft);
  font-size: 14px;
}

.changelog-feed-link {
  font-weight: 600;
}

/* ---- The filter form ------------------------------------------------------ *
 * Pairs itself with `[hidden]`, or it wins on source order and shows the dead
 * control to a visitor with no JavaScript (L-FE-11, L-FE-37).
 * -------------------------------------------------------------------------- */

.changelog-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  align-items: start;
  padding: 20px;
  margin-bottom: 32px;
  background: var(--sd-sunk);
  border: 1px solid var(--doc-line);
  border-radius: var(--radius-lg);
}

.changelog-filters[hidden] {
  display: none;
}

.changelog-filter-actions {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  /* Sits on its own row below the fields at every width: the actions of a
     filter bar belong under it, not wedged between two inputs. */
  grid-column: 1 / -1;
}

/* ---- The count line ------------------------------------------------------- */

.changelog-count {
  margin: 0 0 16px;
  color: var(--doc-ink-soft);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.changelog-count:empty {
  display: none;
}

/* ---- The list ------------------------------------------------------------- */

.changelog-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.changelog-entry {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.changelog-entry-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.changelog-date {
  font-size: 13px;
  color: var(--doc-ink-soft);
  /* §9.5 — a reader comparing release dates needs them to line up. */
  font-variant-numeric: tabular-nums;
}

.changelog-entry-title {
  margin: 0;
  font-size: 19px;
  line-height: 1.35;
  color: var(--doc-ink);
}

.changelog-entry-facets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* A facet chip reads `API sides-labs`, and the two halves are weighted
   differently: the label is what kind of fact it is, the value is the fact.
   The value is `tabular-nums` because a version number is compared. */
.changelog-facet-label {
  color: var(--doc-ink-soft);
  font-weight: 500;
}

.changelog-facet-value {
  color: var(--sd-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- NO `color` HERE, AND THAT IS A DECISION RATHER THAN AN OMISSION ------ *
 * An entry is a `.card`, and `card.css` carries `.card > p { color:
 * var(--doc-ink-soft) }`. That selector is (0,1,1); `.changelog-entry-body` is
 * (0,1,0), so a colour written here loses — and the page still LOOKS right,
 * because what wins is a legitimate token at 6.73:1. A declaration that does
 * nothing and cannot be seen to do nothing is worse than no declaration, so it
 * is gone and the card's own convention stands (L-FE-49).
 * ------------------------------------------------------------------------- */

.changelog-entry-body {
  margin: 0;
  line-height: 1.65;
  /* The API stores a changelog body as plain text and the module sets it with
     `textContent`. Line breaks the author wrote are meaningful — a list of
     three changes is three lines — and collapsing them would run them together.
     `pre-wrap` keeps them and still wraps a long line, so the body never makes
     the page scroll sideways. */
  white-space: pre-wrap;
}

/* ---- The sunset sentence -------------------------------------------------- *
 * A sentence, not a second chip. The kind chip above already carries the card's
 * one tinted fill; this adds the part a chip cannot say — which day.
 * -------------------------------------------------------------------------- */

.changelog-sunset {
  margin: 0;
  font-size: 14px;
}

.changelog-sunset-label {
  color: var(--doc-ink-soft);
}

/* The date is the fact this sentence exists to carry, so it is the loud half —
 * and the selector is (0,2,0) on purpose, because plain `.changelog-date`
 * (0,1,0) would be beaten by `.card > p` (0,1,1) inheriting down to it. The
 * same specificity trap as the body above; here the fix is the selector rather
 * than the deletion, because this one really does want a different weight. */
.changelog-sunset .changelog-date {
  color: var(--sd-text);
  font-weight: 600;
}

/* ---- The affected endpoints ----------------------------------------------- */

.changelog-endpoints {
  padding: 12px 14px;
  background: var(--sd-sunk);
  border: 1px solid var(--sd-divider);
  border-radius: var(--radius);
}

.changelog-endpoints-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--doc-ink-soft);
}

.changelog-endpoint-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.changelog-endpoint {
  display: flex;
  align-items: center;
  gap: 10px;
  /* A contract path with template segments is wide, and §7 rule 5 says the page
     body never scrolls sideways — so the row scrolls inside itself. */
  overflow-x: auto;
}

.changelog-endpoint-path {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--doc-ink);
  white-space: nowrap;
}

/* ---- The language note ---------------------------------------------------- */

/* No `color`, for the reason the body gives: `.card > p` already resolves this
   to `--doc-ink-soft`, which is the weight a note wants. */
.changelog-language {
  margin: 0;
  font-size: 13px;
}

/* ---- Continuation --------------------------------------------------------- */

.changelog-more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.changelog-more[hidden] {
  display: none;
}

/* ---- The no-JavaScript fallback ------------------------------------------- *
 * Plain markup, not `<noscript>`, so it also covers the module never arriving
 * (L-FE-10). Written as content: it says where the entries come from and offers
 * the two things they would have offered.
 * -------------------------------------------------------------------------- */

.changelog-fallback {
  padding: 24px;
  background: var(--sd-sunk);
  border: 1px solid var(--doc-line);
  border-radius: var(--radius-lg);
}

.changelog-fallback p {
  margin: 0 0 12px;
  color: var(--sd-text-soft);
  line-height: 1.65;
  max-width: 68ch;
}

.changelog-fallback .cta-actions {
  margin-top: 20px;
}

/* ---- Narrow ---------------------------------------------------------------- */

@media (max-width: 640px) {
  .changelog-filters {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .changelog-entry-title {
    font-size: 17px;
  }
}