.whats-new-page {
 max-width: 44rem;
}

.whats-new-lead {
 margin: 0;
}

.whats-new-search-row {
 max-width: 24rem;
 margin-top: 8px;
}

.whats-new-search {
 width: 100%;
}

.whats-new-list {
 display: flex;
 flex-direction: column;
 gap: 18px;
 margin-top: 8px;
}

.whats-new-skeleton {
 display: flex;
 flex-direction: column;
 gap: 10px;
 padding: 8px 0 8px 18px;
}

.whats-new-day {
 position: relative;
 margin: 0 0 0 8px;
 padding: 0 0 4px 18px;
 border-left: 2px solid var(--border);
 animation: whats-new-in 220ms ease-out;
}

.whats-new-day::before {
 content: '';
 position: absolute;
 left: -5px;
 top: 8px;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--primary);
}

.whats-new-date {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 0 0 8px;
 color: var(--foreground);
 font-size: var(--text-base);
 font-weight: 600;
}

.whats-new-badge {
 display: inline-flex;
 align-items: center;
 padding: 1px 6px;
 border-radius: 999px;
 background: var(--destructive);
 color: var(--destructive-foreground);
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.06em;
 line-height: 1.5;
}

.whats-new-features {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.whats-new-feature-name {
 margin: 0;
 color: var(--foreground);
 font-size: var(--text-base);
 font-weight: 600;
}

.whats-new-feature-description,
.whats-new-missing,
.whats-new-empty,
.whats-new-error,
.whats-new-end {
 margin: 4px 0 0;
 color: var(--muted-foreground);
 font-size: var(--text-sm);
 line-height: 1.45;
}

.whats-new-error {
 color: var(--destructive);
 margin-top: 0;
}

.whats-new-footer {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

/* .btn sets display:inline-flex, which would
 * keep a hidden Show more button on screen
 * next to End of updates. */
.whats-new-footer [hidden] {
 display: none;
}

.whats-new-end {
 margin: 8px 0 0;
 text-align: center;
 font-size: var(--text-xs);
 letter-spacing: 0.04em;
 text-transform: uppercase;
}

.whats-new-sentinel {
 height: 1px;
}

@keyframes whats-new-in {
 from {
  opacity: 0;
  transform: translateY(10px);
 }
 to {
  opacity: 1;
  transform: none;
 }
}

@media (prefers-reduced-motion: reduce) {
 .whats-new-day {
  animation: none;
 }
}