/* What's new (ADR-033): centred, in the style of the Search dialog. */
.whats-new {
    width: min(560px, calc(100vw - 32px));
    padding: var(--space-4) var(--space-5) var(--space-3);
    border: 0;
    border-radius: var(--radius-xl);
    background: var(--paper);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}
.whats-new[open] { animation: palette-in 160ms var(--ease) both; }
.whats-new::backdrop { background: rgba(31, 33, 41, 0.28); }
.whats-new__kicker {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
}
.whats-new__picture { margin: 0 0 var(--space-3); }
.whats-new [hidden] { display: none !important; }
.whats-new__picture img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
}
.whats-new__title { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.whats-new__sentence { margin: 0; color: var(--text-2); font-size: var(--text-base); }
.whats-new__foot {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
}
.whats-new__dots {
    display: flex;
    gap: 6px;
    margin: 0 auto 0 0;
    padding: 0;
    list-style: none;
}
.whats-new [data-whats-new-back]:not([hidden]) + .whats-new__dots { margin-left: var(--space-2); }
.whats-new__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--ink-200);
}
.whats-new__dot.is-current { background: var(--sun-500); }

/* Spotlight: the page dims, the real element is ringed, the card sits beside it. */
.whats-new.is-spot {
    position: fixed;
    inset: auto;
    margin: 0;
    width: min(360px, calc(100vw - 32px));
}
.whats-new.is-spot::backdrop { background: transparent; }
.whats-new-ring {
    position: fixed;
    z-index: 90;
    border-radius: 12px;
    border: 3px solid var(--sun-500);
    box-shadow:
        0 0 0 6px rgba(247, 162, 27, 0.28),
        0 0 0 9999px rgba(21, 22, 28, 0.5);
    pointer-events: none;
}
.whats-new-ring[hidden] { display: none; }

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

.whats-new-count { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5); }
.whats-new-count__figure { margin: var(--space-1) 0 var(--space-3); }