/*
 * Release notes (release.php). Same palette and type as the rest of the
 * site: primary #6366f1, Inter, gray scale. Change types each have one
 * colour: new (indigo), improved (teal), fixed (slate).
 */

.vsr {
    --vsr-primary: #6366f1;
    --vsr-ink: #111827;
    --vsr-text: #374151;
    --vsr-muted: #6b7280;
    --vsr-line: #e5e7eb;
    --vsr-soft: #f9fafb;
    --vsr-new: #6366f1;
    --vsr-improved: #0d9488;
    --vsr-fixed: #64748b;
    color: var(--vsr-ink);
    background: #fff;
}
.vsr-wrap { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .vsr-wrap { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .vsr-wrap { padding: 0 2rem; } }

.vsr-section-title { margin: 0; color: var(--vsr-ink); font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }

/* ---------- Hero ---------- */

.vsr-hero {
    position: relative;
    padding: 8.5rem 0 3.5rem;
    background-color: #fff;
    background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
    background-size: 22px 22px;
}
.vsr-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 85%); pointer-events: none; }
.vsr-hero .vsr-wrap { position: relative; z-index: 1; }
.vsr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.25rem;
    padding: .375rem .875rem;
    border: 1px solid var(--vsr-line);
    border-radius: 999px;
    background: #fff;
    color: var(--vsr-text);
    font-size: .8125rem;
    font-weight: 500;
}
.vsr-live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #10b981; }
.vsr-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: rgba(16, 185, 129, .25); animation: vsr-pulse 2.4s ease-out infinite; }
@keyframes vsr-pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.vsr-hero__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .vsr-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }

.vsr-cadence { margin: 0; padding: 1.5rem; border: 1px solid var(--vsr-line); border-radius: 1.25rem; background: #fff; box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 24px 48px -32px rgba(49, 46, 129, .35); }
.vsr-cadence figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1.25rem; }
.vsr-cadence figcaption strong { color: var(--vsr-ink); font-size: .9375rem; }
.vsr-cadence__legend { display: flex; gap: .875rem; }
.vsr-cadence__legend .vsr-count { font-size: .75rem; }
.vsr-cadence__bars { display: flex; align-items: flex-end; gap: 4px; height: 180px; padding-bottom: 1px; border-bottom: 1px solid var(--vsr-line); background-image: linear-gradient(var(--vsr-line) 1px, transparent 1px); background-size: 100% 45px; background-position: 0 0; }
.vsr-cadence__bar { display: flex; flex: 1 1 0; flex-direction: column; min-height: 6px; border-radius: 4px 4px 1px 1px; overflow: hidden; transition: opacity .15s, transform .15s; transform-origin: bottom; }
.vsr-cadence__bars:hover .vsr-cadence__bar { opacity: .45; }
.vsr-cadence__bars .vsr-cadence__bar:hover, .vsr-cadence__bar:focus-visible { opacity: 1; transform: scaleY(1.03); }
.vsr-cadence__bar span { flex-basis: 0; min-height: 2px; }
.vsr-cadence__bar .is-new { background: var(--vsr-new); }
.vsr-cadence__bar .is-improved { background: #2dd4bf; }
.vsr-cadence__bar .is-fixed { background: #cbd5e1; }
.vsr-cadence__axis { display: flex; justify-content: space-between; margin-top: .5rem; color: var(--vsr-muted); font-size: .75rem; }

.vsr-hero__title { max-width: 44rem; margin: 0 0 1rem; font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; }
.vsr-hero__lead { max-width: 40rem; margin: 0; color: #4b5563; font-size: 1.125rem; line-height: 1.7; }

.vsr-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 44rem;
    margin: 2.5rem 0 0;
    border: 1px solid var(--vsr-line);
    border-radius: 1rem;
    background: #fff;
    overflow: hidden;
}
.vsr-stats > div { padding: 1.125rem 1.25rem; border-right: 1px solid var(--vsr-line); border-bottom: 1px solid var(--vsr-line); }
.vsr-stats > div:nth-child(2n) { border-right: 0; }
.vsr-stats > div:nth-child(n+3) { border-bottom: 0; }
@media (min-width: 640px) {
    .vsr-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .vsr-stats > div { border-bottom: 0; }
    .vsr-stats > div:nth-child(2n) { border-right: 1px solid var(--vsr-line); }
    .vsr-stats > div:last-child { border-right: 0; }
}
.vsr-stats dt { color: var(--vsr-muted); font-size: .8125rem; font-weight: 500; }
.vsr-stats dd { margin: .25rem 0 0; color: var(--vsr-ink); font-size: 1.875rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ---------- Shared bits ---------- */

.vsr-badge { display: inline-flex; align-items: center; margin: 0; padding: .25rem .625rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.vsr-badge--latest { background: #eef2ff; color: #4338ca; }
.vsr-badge--milestone { background: #f5f3ff; color: #6d28d9; }
.vsr-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.vsr-dot--new { background: var(--vsr-new); }
.vsr-dot--improved { background: var(--vsr-improved); }
.vsr-dot--fixed { background: var(--vsr-fixed); }
.vsr-count { display: inline-flex; align-items: center; gap: .375rem; color: var(--vsr-muted); font-size: .875rem; }
.vsr-count::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vsr-fixed); }
.vsr-count--new::before { background: var(--vsr-new); }
.vsr-count--improved::before { background: var(--vsr-improved); }
.vsr-link { color: var(--vsr-primary); font-size: .9375rem; font-weight: 600; text-decoration: none; }
.vsr-link:hover { color: #4f46e5; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Latest release ---------- */

.vsr-latest { padding: 0 0 3.5rem; }
.vsr-latest__card { display: grid; gap: 2rem; padding: 1.75rem; border: 1px solid var(--vsr-line); border-radius: 1.25rem; background: #fff; box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 12px 32px -20px rgba(49, 46, 129, .25); }
@media (min-width: 900px) { .vsr-latest__card { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; padding: 2.25rem; } }
.vsr-latest__title { margin: .875rem 0 .5rem; font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; }
.vsr-latest__summary { display: flex; flex-wrap: wrap; gap: .375rem 1rem; margin: 0 0 1.25rem; }
.vsr-highlights { display: grid; gap: .875rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .vsr-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vsr-highlights li { display: grid; grid-template-columns: auto 1fr; gap: .125rem .875rem; padding: 1rem; border: 1px solid #eef0f4; border-radius: .875rem; background: var(--vsr-soft); }
.vsr-highlights__icon { grid-row: span 2; display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: .625rem; background: #eef2ff; color: var(--vsr-primary); }
.vsr-highlights__icon svg { width: 20px; height: 20px; }
.vsr-highlights strong { color: var(--vsr-ink); font-size: .9375rem; }
.vsr-highlights span:last-child { color: var(--vsr-muted); font-size: .875rem; line-height: 1.5; }

/* ---------- Milestones ---------- */

.vsr-milestones { padding: 3.5rem 0; border-top: 1px solid var(--vsr-line); border-bottom: 1px solid var(--vsr-line); background: var(--vsr-soft); }
.vsr-milestones__list { position: relative; display: grid; gap: 1.25rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.vsr-milestones__list a { position: relative; display: flex; flex-direction: column; gap: .125rem; padding-left: 1.75rem; color: inherit; text-decoration: none; }
.vsr-milestones__list a::before { content: ""; position: absolute; top: .3rem; left: 0; width: 12px; height: 12px; border: 2px solid var(--vsr-primary); border-radius: 50%; background: #fff; }
.vsr-milestones__list .is-now a::before { background: var(--vsr-primary); box-shadow: 0 0 0 4px #e0e7ff; }
.vsr-milestones__list::before { content: ""; position: absolute; top: .5rem; bottom: .5rem; left: 5px; width: 2px; background: #c7d2fe; }
.vsr-milestones__date { color: var(--vsr-muted); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; }
.vsr-milestones__list strong { color: var(--vsr-ink); font-size: 1rem; }
.vsr-milestones__text { color: var(--vsr-muted); font-size: .875rem; }
.vsr-milestones__list a:hover strong { color: var(--vsr-primary); }
@media (min-width: 900px) {
    .vsr-milestones__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
    .vsr-milestones__list::before { top: 5px; bottom: auto; left: 6px; right: 0; width: auto; height: 2px; background: linear-gradient(90deg, #c7d2fe 85%, rgba(199, 210, 254, 0)); }
    .vsr-milestones__list a { padding: 1.5rem 1rem 0 0; }
    .vsr-milestones__list a::before { top: 0; }
}

/* ---------- Release notes ---------- */

.vsr-log { padding: 3.5rem 0 5rem; background: #fff; }
.vsr-log__grid { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .vsr-log__grid { grid-template-columns: 11rem minmax(0, 1fr); gap: 3.5rem; } }

.vsr-rail { display: none; }
@media (min-width: 1024px) {
    .vsr-rail { position: sticky; top: 6rem; display: block; align-self: start; max-height: calc(100vh - 7rem); overflow-y: auto; padding-top: .5rem; }
}
.vsr-rail__year { margin: 1.25rem 0 .5rem; color: var(--vsr-ink); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; }
.vsr-rail__year:first-child { margin-top: 0; }
.vsr-rail ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--vsr-line); }
.vsr-rail a { display: flex; align-items: center; gap: .5rem; margin-left: -1px; padding: .3rem 0 .3rem .875rem; border-left: 2px solid transparent; color: var(--vsr-muted); font-size: .875rem; text-decoration: none; transition: color .15s, border-color .15s; }
.vsr-rail a:hover { color: var(--vsr-ink); }
.vsr-rail a[aria-current] { border-left-color: var(--vsr-primary); color: var(--vsr-primary); font-weight: 600; }
.vsr-rail__dot { width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; }

.vsr-toolbar { position: sticky; top: 4rem; z-index: 20; display: grid; gap: .875rem; margin: 0 0 .5rem; padding: 1rem 0; border-bottom: 1px solid var(--vsr-line); background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(8px); }
@media (min-width: 768px) { .vsr-toolbar { grid-template-columns: auto 1fr; align-items: center; } }
.vsr-toolbar__controls { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (min-width: 768px) { .vsr-toolbar__controls { justify-content: flex-end; } }
.vsr-filters { display: inline-flex; padding: 3px; border: 1px solid var(--vsr-line); border-radius: .75rem; background: var(--vsr-soft); }
.vsr-filters button { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border: 0; border-radius: .5625rem; background: transparent; color: var(--vsr-muted); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; }
.vsr-filters button:hover { color: var(--vsr-ink); }
.vsr-filters button.is-active { background: #fff; color: var(--vsr-ink); box-shadow: 0 1px 2px rgba(17, 24, 39, .08), 0 0 0 1px rgba(17, 24, 39, .04); }
.vsr-filters .vsr-dot { width: 7px; height: 7px; }
.vsr-search { position: relative; display: block; flex: 1 1 14rem; max-width: 20rem; }
.vsr-search svg { position: absolute; top: 50%; left: .75rem; width: 1rem; height: 1rem; color: #9ca3af; transform: translateY(-50%); pointer-events: none; }
.vsr-search input { width: 100%; height: 2.375rem; padding: 0 .875rem 0 2.25rem; border: 1px solid var(--vsr-line); border-radius: .75rem; background: #fff; color: var(--vsr-ink); font: inherit; font-size: .875rem; outline: none; transition: border-color .15s, box-shadow .15s; }
.vsr-search input:focus { border-color: var(--vsr-primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, .15); }
.vsr-results { grid-column: 1 / -1; margin: 0; color: var(--vsr-muted); font-size: .8125rem; }
.vsr-results:empty { display: none; }

.vsr-release { padding: 2.25rem 0; border-bottom: 1px solid var(--vsr-line); scroll-margin-top: 10rem; }
.vsr-release.is-collapsed, .vsr-release.is-filtered-out { display: none; }
.vsr-release__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.vsr-release__title { margin: 0 0 .375rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.vsr-release__title a { color: inherit; text-decoration: none; }
.vsr-release__title a::after { content: "#"; margin-left: .5rem; color: #c7d2fe; font-weight: 600; opacity: 0; transition: opacity .15s; }
.vsr-release__title a:hover::after, .vsr-release__title a:focus-visible::after { opacity: 1; }
.vsr-release__meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; }

.vsr-group + .vsr-group { margin-top: 1.5rem; }
.vsr-group.is-filtered-out { display: none; }
.vsr-group__title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; color: var(--vsr-ink); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.vsr-items { margin: 0; padding: 0; list-style: none; }
.vsr-items li { position: relative; padding: .4375rem 0 .4375rem 1.25rem; color: var(--vsr-text); font-size: .9375rem; line-height: 1.6; }
.vsr-items li::before { content: ""; position: absolute; top: 1.05em; left: .25rem; width: 5px; height: 5px; border-radius: 50%; background: #d1d5db; }
.vsr-group[data-type="new"] .vsr-items li::before { background: #a5b4fc; }
.vsr-group[data-type="improved"] .vsr-items li::before { background: #5eead4; }
.vsr-items li.is-filtered-out { display: none; }
.vsr-items mark { padding: 0 .125rem; border-radius: .25rem; background: #fef3c7; color: inherit; }
.vsr-tag { display: inline-flex; margin-left: .375rem; padding: .0625rem .5rem; border: 1px solid var(--vsr-line); border-radius: 999px; color: var(--vsr-muted); font-size: .6875rem; font-weight: 600; letter-spacing: .02em; vertical-align: .125em; }

.vsr-release--launch { margin-top: 2rem; padding: 2rem; border: 1px solid #e0e7ff; border-radius: 1.25rem; background: #fafaff; }
.vsr-release__launch { margin: -.5rem 0 1rem; color: #4338ca; font-size: .9375rem; font-weight: 500; }

.vsr-more { display: block; width: 100%; margin-top: 2rem; padding: .875rem 1rem; border: 1px dashed #c7d2fe; border-radius: .875rem; background: #fafaff; color: #4338ca; font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s; }
.vsr-more:hover { border-color: var(--vsr-primary); background: #eef2ff; }
.vsr-more[hidden] { display: none; }

.vsr-empty { padding: 3rem 1rem; color: var(--vsr-muted); text-align: center; }
.vsr-empty__reset { padding: 0; border: 0; background: none; color: var(--vsr-primary); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .vsr-live::after { animation: none; }
}