/* Changelog styles (owner: W4): the release cards of /changelog/ and the compact list in the home page's
 * "Latest changelog" card. renderers/changelog.py writes the markup; colours, type and spacing come from
 * tokens.css. Every page that shows changelog entries lists this file in its meta "css". */

/* ---- A change type: the round icon and the tag ------------------------------------------------- */
.changelog-icon {
  --cl-icon: var(--c-tag-added-icon);
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: #fff;
  background-color: var(--cl-icon);
  background-image:
    radial-gradient(circle at 34% 26%, rgb(255 255 255 / 0.34), rgb(255 255 255 / 0) 58%),
    linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(0 0 0 / 0.14));
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1), 0 1px 2px rgb(90 60 20 / 0.3);
}

.changelog-icon svg {
  width: 60%;
  height: 60%;
}

.changelog-icon--improved { --cl-icon: var(--c-tag-improved-icon); }
.changelog-icon--fixed { --cl-icon: var(--c-tag-fixed-icon); }

.changelog-tag {
  --cl-tag: var(--c-tag-added);
  --cl-tag-bg: var(--c-tag-added-bg);
  display: inline-block;
  padding: 0.12em 0.62em 0.16em;
  border: 1px solid var(--cl-tag);
  border-color: color-mix(in srgb, var(--cl-tag) 42%, var(--cl-tag-bg));
  border-radius: var(--radius-xs);
  background: var(--cl-tag-bg);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7);
  color: var(--cl-tag);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  letter-spacing: 0;
  white-space: nowrap;
}

.changelog-tag--improved {
  --cl-tag: var(--c-tag-improved);
  --cl-tag-bg: var(--c-tag-improved-bg);
}

.changelog-tag--fixed {
  --cl-tag: var(--c-tag-fixed);
  --cl-tag-bg: var(--c-tag-fixed-bg);
}

/* ---- Home page: the newest changes (changelog.latest N) --------------------------------------
 * As in the approved design's card: one row per change, icon | tag | title, and the text under the
 * title in smaller type, cut at two lines (the whole text is on /changelog/, and stays in the page for
 * screen readers). The rows share the list's grid, so the titles line up whatever the tag's width.
 * Sizes follow the list's own width (cqi): the mock's proportions in the 1440 px card (about 410 px),
 * never smaller than readable on a 1024 px desktop or a phone (about 300 px).
 *   22.5rem and up    the shared grid, the text under the title, as in the mock (the 1440 px card)
 *   19-22.5rem        the same, but the text also runs under the tag, so two lines say more there
 *                     (the 1024 px card and phones of 390 px)
 *   16.25-19rem       each row sizes its own tag and the title follows it (phones of 360 px)
 *   under 16.25rem    the tag over the title */
.changelog-latest {
  container: changelog-latest / inline-size;
  --cl-icon-size: clamp(1.75rem, 1.04rem + 4.2cqi, 2.125rem);
  --cl-gap: clamp(0.5rem, 0.2rem + 2cqi, 0.8rem);
  --cl-pad: clamp(0.625rem, 0.1rem + 2.8cqi, 0.9rem);
}

.changelog-latest__list {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  column-gap: var(--cl-gap);
}

.changelog-entry {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto auto;
  align-items: center;
  padding-block: var(--cl-pad);
  border-top: 1px solid var(--c-on-parchment-line);
}

.changelog-entry > .changelog-icon {
  grid-column: 1;
  grid-row: 1;
  width: var(--cl-icon-size);
  height: var(--cl-icon-size);
}

.changelog-entry > .changelog-tag {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  font-size: clamp(0.75rem, 0.584rem + 1cqi, 0.875rem);
}

.changelog-entry__title {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  color: var(--c-royal);
  font-family: var(--font-heading);
  font-size: clamp(0.875rem, 0.522rem + 2.1cqi, 1.0625rem);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}

.changelog-entry__text {
  grid-column: 3;
  grid-row: 2;
  align-self: start;
  min-width: 0;
  margin-top: 0.1rem;
  color: var(--c-ink-soft);
  font-size: clamp(0.8125rem, 0.636rem + 1.05cqi, 0.9375rem);
  line-height: 1.42;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* A change from an older release than the card's "Version x" line names its version. */
.changelog-entry__version {
  display: inline-block;
  margin-left: 0.35em;
  padding: 0 0.5em;
  border-radius: var(--radius-pill);
  background: rgb(155 106 30 / 0.12);
  color: var(--c-gold-brown);
  font-size: max(0.75em, 0.75rem);
  font-weight: var(--fw-semibold);
  line-height: 1.6;
  vertical-align: 0.1em;
  white-space: nowrap;
}

.changelog-empty {
  padding-block: 1.25rem;
  border-top: 1px solid var(--c-on-parchment-line);
  color: var(--c-ink-muted);
  font-style: italic;
}

@supports not (grid-template-columns: subgrid) {
  .changelog-latest__list { display: block; }
  .changelog-entry { grid-template-columns: auto 6em minmax(0, 1fr); column-gap: var(--cl-gap); }
}

@container changelog-latest (width < 22.5rem) {
  .changelog-entry__text {
    grid-column: 2 / -1;
  }
}

@container changelog-latest (width < 19rem) {
  .changelog-latest__list {
    display: block;
  }

  .changelog-entry {
    grid-template-columns: auto auto minmax(0, 1fr);
    column-gap: var(--cl-gap);
  }
}

@container changelog-latest (width < 16.25rem) {
  .changelog-entry {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: 0.25rem;
  }

  .changelog-entry > .changelog-icon {
    grid-row: 1 / span 2;
    align-self: start;
  }

  .changelog-entry > .changelog-tag {
    grid-column: 2;
    grid-row: 1;
  }

  .changelog-entry__title {
    grid-column: 2;
    grid-row: 2;
  }

  .changelog-entry__text {
    grid-column: 2;
    grid-row: 3;
  }
}

/* ---- The changelog page ------------------------------------------------------------------------ */
.changelog-page__inner {
  display: grid;
  gap: var(--space-7);
  width: min(100% - 2 * var(--gutter), 56rem);
}

/* "Updates come to you": how a release reaches the player. */
.changelog-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.changelog-note__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 34% 26%, var(--c-gold-light), var(--c-gold) 55%, var(--c-gold-deep));
  box-shadow: inset 0 0 0 1px rgb(110 70 10 / 0.25), 0 1px 2px rgb(90 60 20 / 0.3);
}

.changelog-note__icon svg {
  width: 56%;
  height: 56%;
  filter: drop-shadow(0 1px 0 rgb(110 70 10 / 0.45));
}

.changelog-note__body {
  min-width: 0;
}

.changelog-note__title {
  font-size: var(--fs-h4);
}

.changelog-note__body > .changelog-note__text {
  margin-top: var(--space-1);
  color: var(--c-ink-soft);
}

.changelog-note__body > .changelog-note__more {
  margin-top: var(--space-1);
  font-weight: var(--fw-semibold);
}

/* A link on its own line: a 44 px touch target. */
.changelog-note__more a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.changelog-nowrap {
  white-space: nowrap;
}

/* The release cards, newest first. */
.changelog-releases {
  display: grid;
  gap: var(--space-7);
}

.changelog-release {
  container: changelog-release / inline-size;
  scroll-margin-top: var(--space-6);
}

.changelog-release__head {
  display: grid;
  justify-items: center;
  text-align: center;
}

.changelog-release__badge {
  margin-bottom: var(--space-3);
  padding: 0.2em 0.9em 0.24em;
  border: 1px solid var(--c-gold-deep);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--c-green-mid), var(--c-green-lo));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 1px 2px rgb(60 40 10 / 0.25);
  color: var(--c-on-green);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-shadow: 0 1px 0 var(--c-green-text-shadow);
  text-transform: uppercase;
}

.changelog-release__head > .changelog-release__date {
  margin-top: 0;
}

.changelog-release__version {
  margin-top: var(--space-2);
  font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);
}

.changelog-release__head > .changelog-release__name {
  margin-top: var(--space-2);
  color: var(--c-gold-brown);
  font-size: var(--fs-lead);
  font-style: italic;
  line-height: var(--lh-snug);
}

.changelog-release__head > .changelog-release__summary {
  max-width: 34rem;
  margin-top: var(--space-4);
  color: var(--c-ink-soft);
}

/* The changes, grouped Added / Improved / Fixed: the group's icon and tag on the left, its changes on
 * the right. One grid for all groups keeps the changes lined up; narrow cards stack the two. */
.changelog-release__groups {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  column-gap: var(--space-4);
  margin-top: var(--space-6);
}

.changelog-group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
  padding-block: var(--space-5);
  border-top: 1px solid var(--c-on-parchment-line);
}

.changelog-group:last-child {
  padding-bottom: 0;
}

.changelog-group__head {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  font-size: var(--fs-body);
  line-height: 1;
}

.changelog-group__head > .changelog-icon {
  width: 2.5rem;
  height: 2.5rem;
}

.changelog-group__head > .changelog-tag {
  justify-self: start;
  font-size: 1rem;
}

.changelog-group__list {
  grid-column: 3;
  display: grid;
  gap: var(--space-4);
  padding-top: 0.45rem;
}

.changelog-change__title {
  color: var(--c-royal);
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: var(--fw-bold);
  line-height: 1.3;
}

.changelog-change > .changelog-change__text {
  margin-top: var(--space-1);
  color: var(--c-ink-soft);
}

/* No published release yet. */
.changelog-none {
  text-align: center;
}

.changelog-none__title {
  font-size: var(--fs-h3);
}

.changelog-none > .changelog-none__text {
  margin-top: var(--space-2);
  color: var(--c-ink-soft);
}

@supports not (grid-template-columns: subgrid) {
  .changelog-release__groups { display: block; }
  .changelog-group { grid-template-columns: auto 7em minmax(0, 1fr); column-gap: var(--space-4); }
  .changelog-group__head { display: flex; gap: var(--space-4); }
}

@container changelog-release (max-width: 34rem) {
  .changelog-release__groups {
    display: block;
    margin-top: var(--space-5);
  }

  .changelog-group {
    display: block;
  }

  .changelog-group__head {
    display: flex;
    gap: var(--space-3);
  }

  .changelog-group__head > .changelog-icon {
    width: 2.25rem;
    height: 2.25rem;
  }

  .changelog-group__list {
    margin-top: var(--space-3);
    padding-top: 0;
  }

  .changelog-change__title {
    font-size: 1.125rem;
  }
}