/*
 * The update log at /updates (dist/updates.html, built from UPDATES.md by scripts/updates-page.ts). Loaded after
 * legal.css, whose palette, Archivo font, back link and h1 it keeps; this adds the list of versions.
 */
.lede { margin: 0 0 40px; color: var(--text-2); }

.rel {
  display: grid;
  gap: 8px;
  padding: 20px 0 24px;
  border-top: 1px solid var(--border);
}

.rel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  font-size: 1rem;
}

.rel-ver {
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.rel-ver:hover { color: var(--crust); text-decoration: underline; }
/* A bigger hit area for the version link (a permalink) without moving the layout. */
.rel-ver { display: inline-block; padding: 8px 0; margin: -8px 0; }

/* A deep link like /updates#v1-31-3 shows which version it points at. */
.rel { scroll-margin-top: 16px; }
.rel:target .rel-ver { color: var(--crust); text-decoration: underline; }

.rel-date {
  color: var(--text-2);
  font-size: 0.875rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.rel-list { margin: 0; padding-left: 1.125rem; }
.rel-list li { margin: 6px 0; }
.rel-list li::marker { color: var(--text-2); }

/* The newest version: a crust rule and number, and a small tag. */
.rel-now { border-top: 2px solid var(--crust); }
.rel-now .rel-ver { color: var(--crust); font-size: 1.5rem; }
.rel-tag {
  padding: 1px 7px;
  border: 1px solid var(--crust);
  border-radius: 999px;
  color: var(--crust);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Versions with only behind-the-scenes fixes stay small, so the real changes stand out. */
.rel-quiet { padding: 12px 0 14px; gap: 2px; }
.rel-quiet .rel-ver { font-size: 1rem; font-weight: 600; color: var(--text-2); }
.rel-quiet li { color: var(--text-2); font-size: 0.9375rem; }

/* Wider screens: the version and date in a column of their own, the changes beside them. */
@media (min-width: 640px) {
  .rel { grid-template-columns: 9rem minmax(0, 1fr); column-gap: 24px; }
  .rel-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .rel-list li:first-child { margin-top: 3px; }
  .rel-quiet .rel-list li:first-child { margin-top: 0; }
  .rel-tag { margin-top: 6px; }
}