/* Recent highlights (v8): the Welcome page's in-page list, generated by
   scripts/render_recent_updates.py from changelog/entries.json. It keeps the
   five updates chosen by importance and gives them their own look beside the
   margin column: each row hangs from a short rule in the book's accent
   color, the date sits above in the accent ink, the headline is bold in the
   body text color, and the changelog entry's own "why" sentence follows as
   the why-it-matters line (omitted when a row has none). "In <chapter>" and
   the sources stay muted beneath. No panel, no hairlines, no uppercase.
   Colors come from each handbook's --handbook-accent (set in its
   _quarto.yml), so one file serves all four books; the accent ink is the
   accent with its lightness capped for legible text. Bryan approved the
   redesign on 24 October 2026. The category stays in the markup, unshown.
   Canonical copy: handbook-recursive/kit/styles/recent-updates-v8.css.
   Published stylesheets are immutable; future changes need a new version. */

.recent-updates {
  --ru-accent: var(--handbook-accent, #1765ad);
  --ru-ink: var(--handbook-accent, #1765ad);
  --ru-text: #1f2937;
  --ru-soft: #374151;
  --ru-muted: #6b7280;
  --ru-rule: #e5e7eb;
  margin: 0.5rem 0 2rem;
}

@supports (color: oklch(from red l c h)) {
  .recent-updates {
    --ru-ink: oklch(from var(--ru-accent) min(l, 0.5) c h);
  }
}

.quarto-dark .recent-updates,
[data-bs-theme="dark"] .recent-updates {
  --ru-text: #e5e7eb;
  --ru-soft: #d1d5db;
  --ru-muted: #9ca3af;
  --ru-rule: #3a424d;
}

@supports (color: oklch(from red l c h)) {
  .quarto-dark .recent-updates,
  [data-bs-theme="dark"] .recent-updates {
    --ru-ink: oklch(from var(--ru-accent) max(l, 0.8) c h);
  }
}

.recent-updates > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.recent-updates > ul > li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "date"
    "title"
    "meta";
  row-gap: 0.15rem;
  margin: 0 0 1.35rem;
  padding: 0.1rem 0 0.1rem 1.1rem;
  border-left: 3px solid var(--ru-accent);
}

.recent-updates > ul > li:last-child {
  margin-bottom: 0;
}

.recent-updates .ru-date {
  grid-area: date;
  color: var(--ru-ink);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.recent-updates .ru-title {
  grid-area: title;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.3em;
  min-width: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.recent-updates .ru-title > .ru-headline {
  flex: 0 1 100%;
  min-width: 0;
  color: var(--ru-text);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
}

.recent-updates .ru-title > a.ru-headline:hover {
  color: var(--ru-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.recent-updates .ru-tail {
  white-space: normal;
}

/* Why it matters: the changelog entry's own "why", one line of body text. */
.recent-updates .ru-title > .ru-why {
  flex: 0 1 100%;
  min-width: 0;
  margin-top: 0.3rem;
  color: var(--ru-soft);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.5;
}

.recent-updates .ru-title > .ru-in,
.recent-updates .ru-title > .ru-chapter {
  margin-top: 0.35rem;
  color: var(--ru-muted);
  font-size: 0.82rem;
  font-weight: 400;
}

.recent-updates .ru-title > .ru-chapter {
  text-decoration: none;
}

.recent-updates .ru-title > .ru-chapter:hover {
  color: var(--ru-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.recent-updates .ru-title > .ru-chapter-duplicate {
  display: none;
}

.recent-updates a:focus-visible {
  outline: 2px solid var(--ru-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.recent-updates .ru-meta {
  grid-area: meta;
  min-width: 0;
}

.recent-updates .ru-cat {
  display: none;
}

.recent-updates .ru-sources {
  display: block;
  margin-top: 0.1rem;
  color: var(--ru-muted);
  font-size: 0.8rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.recent-updates .ru-sources a {
  color: var(--ru-muted);
  text-decoration: underline;
  text-decoration-color: var(--ru-rule);
  text-underline-offset: 0.15em;
}

.recent-updates .ru-sources a:hover {
  color: var(--ru-ink);
  text-decoration-color: currentColor;
}

/* The list stays clear of citation badges; article pages retain them. */
.recent-updates .citation-badge,
.recent-updates .citation-favicon-wrapper {
  display: none !important;
}

/* Empty state: one muted line. */
.recent-updates > p:not(:last-child) {
  color: var(--ru-muted);
  margin: 0;
  padding: 0.6rem 0 0.6rem 1.1rem;
  border-left: 3px solid var(--ru-rule);
}

.recent-updates .ru-all {
  display: inline-block;
  margin-top: 1.1rem;
  color: var(--ru-ink);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.recent-updates .ru-all:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.home-license {
  margin: 2.5rem 0 0.5rem;
  color: #5b6b7f;
  font-size: 0.9rem;
}

.quarto-dark .home-license,
[data-bs-theme="dark"] .home-license {
  color: #9aa7b6;
}

@media (max-width: 767.98px) {
  .recent-updates > ul > li {
    padding-left: 0.9rem;
    margin-bottom: 1.2rem;
  }

  .recent-updates .ru-title > .ru-headline {
    font-size: 1rem;
  }

  .recent-updates .ru-title > .ru-why {
    font-size: 0.92rem;
  }
}

@media print {
  .recent-updates > ul > li {
    border-left-color: #999;
  }
}