@layer components {

  /* changelog.html: a release per block, its version and date in a column to the left. */
  .changelog {
    max-width: 52rem;
  }

  .log {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 0 2rem;
    padding: 2rem 0;
    border-top: 1px solid var(--color-line);

    > :not(h2) {
      grid-column: 2;
    }

    h2 {
      grid-row: span 99;
      font-size: 1.6rem;

      time {
        display: block;
        margin-top: 0.3rem;
        color: var(--color-ink-muted);
        font: 500 0.85rem var(--font-sans);
        letter-spacing: 0;
      }
    }

    ul {
      margin: 0.4rem 0 1rem;
      padding-left: 1.1rem;
      color: var(--color-ink-muted);
    }

    li+li {
      margin-top: 0.45rem;
    }

    ul ul {
      margin: 0.4rem 0 0;
    }

    strong {
      color: var(--color-ink);
    }
  }

  .log__kind {
    width: fit-content;
    padding: 0.15rem 0.6rem;
    border-radius: 99px;
    background: var(--color-primary-surface);
    color: var(--color-primary);
    font: 600 0.78rem var(--font-sans);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .log__kind--fixed {
    background: color-mix(in oklch, var(--color-coffee) 16%, transparent);
    color: var(--color-coffee);
  }

  .log__kind--changed {
    background: var(--color-accent-surface);
    color: var(--color-accent);
  }

  @media (max-width: 640px) {
    .log {
      grid-template-columns: 1fr;

      > :not(h2) {
        grid-column: 1;
      }

      h2 {
        grid-row: auto;
        margin-bottom: 0.75rem;
      }
    }
  }
}