/*
 * Core Support Changelogs: /changelogs/ screens. Builds on app.css tokens (Settings → Branding)
 * and the standalone frame. A product list beside a release timeline.
 */

.csp-cl { --csp-cl-side: 248px; --csp-cl-when: 112px; --csp-cl-width: 1240px; }
.csp-cl :is(.csp-cl-hero, .csp-cl-layout) { max-width: none; margin: 0; font-size: 15px; line-height: 1.6; }

/* ------------------------------------------------------------------ Header */
.csp-cl-header .csp-brand { gap: 10px; font-weight: 600; text-decoration: none; }
.csp-cl-label {
    padding: 1px 8px;
    border: 1px solid var(--cs-line);
    border-radius: 999px;
    color: var(--cs-muted);
    font-size: 12px;
    font-weight: 500;
}
.csp-cl-top { display: flex; align-items: center; gap: 20px; }
.csp-cl-toplink { color: var(--cs-muted); font-size: 14px; text-decoration: none; }
.csp-cl-toplink:hover { color: var(--cs-ink); }

/* ------------------------------------------------------------------ Hero */
.csp-cl-hero { padding: 56px 24px 40px; border-bottom: 1px solid var(--cs-line); background: var(--cs-surface); }
.csp-cl-hero-inner { max-width: var(--csp-cl-width); margin: 0 auto; }
.csp-cl-hero-inner.has-stats { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 56px; align-items: end; }
.csp-cl-kicker {
    margin: 0 0 10px;
    color: var(--cs-link);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.csp-cl-hero h1 {
    margin: 0;
    color: var(--cs-ink);
    font-size: clamp(30px, 4.4vw, 44px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.02em;
}
.csp-cl-heading { display: flex; align-items: center; gap: 16px; }
.csp-cl-lede { max-width: 640px; margin: 14px 0 0; color: var(--cs-muted); font-size: 17px; line-height: 1.55; }
.csp-cl-rss {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    color: var(--cs-muted);
    font-size: 13px;
    text-decoration: none;
}
.csp-cl-rss:hover { color: var(--cs-ink); }
.csp-cl-rss .csp-icon { width: 15px; height: 15px; }
.csp-cl-icon { flex: none; width: 48px; height: 48px; border-radius: var(--cs-radius-lg); object-fit: cover; }
.csp-cl-icon-letter {
    display: grid;
    place-items: center;
    background: var(--cs-accent-lt);
    color: var(--cs-link);
    font-size: 20px;
    font-weight: 600;
}
.csp-cl-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; color: var(--cs-muted); font-size: 13px; }
.csp-cl-crumbs a { color: var(--cs-muted); text-decoration: none; }
.csp-cl-crumbs a:hover { color: var(--cs-ink); text-decoration: underline; }
.csp-cl-crumbs [aria-hidden] { color: var(--cs-line-strong); }
.csp-cl-side-meta { display: grid; gap: 16px; justify-items: end; }
.csp-cl-stats { display: flex; flex-wrap: wrap; row-gap: 12px; margin: 0; }
.csp-cl-stats div { padding: 0 20px; border-left: 1px solid var(--cs-line); }
.csp-cl-stats div:first-child { padding-left: 0; border-left: 0; }
.csp-cl-stats dt { color: var(--cs-muted); font-size: 12px; }
.csp-cl-stats dd { margin: 4px 0 0; color: var(--cs-ink); font-size: 18px; font-weight: 600; white-space: nowrap; }
.csp-cl-links { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: flex-end; font-size: 14px; }
.csp-cl-links a { color: var(--cs-link); font-weight: 500; text-decoration: none; }
.csp-cl-links a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ Layout */
.csp-cl-layout {
    display: grid;
    grid-template-columns: var(--csp-cl-side) minmax(0, 1fr);
    gap: 56px;
    width: 100%;
    max-width: calc(var(--csp-cl-width) + 48px) !important;
    margin: 0 auto !important;
    padding: 40px 24px 72px;
    flex: 1;
}
.csp-cl-main { min-width: 0; }
.csp-cl-main:focus { outline: 0; }

/* ------------------------------------------------------------------ Product list */
.csp-cl-side {
    position: sticky;
    top: 24px;
    align-self: start;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.4;
}
.csp-cl-jump { display: none; }
.csp-cl-filter { width: 100%; margin-bottom: 14px; }
.csp-cl-side ul { margin: 0 0 6px; padding: 0; list-style: none; }
.csp-cl-side-title {
    margin: 18px 0 6px;
    padding: 0 10px;
    color: var(--cs-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.csp-cl-side a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    border-radius: var(--cs-radius-sm);
    color: var(--cs-text);
    text-decoration: none;
}
.csp-cl-side a:hover { background: var(--cs-surface-2); color: var(--cs-ink); }
.csp-cl-side a[aria-current] { background: var(--cs-accent-lt); color: var(--cs-link); font-weight: 600; }
.csp-cl-count { color: var(--cs-muted); font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 400; }

/* ------------------------------------------------------------------ Filters */
.csp-cl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 32px; }
.csp-cl-filters { display: inline-flex; padding: 3px; border: 1px solid var(--cs-line); border-radius: var(--cs-radius); background: var(--cs-surface); }
.csp-cl-filters a {
    padding: 5px 14px;
    border-radius: var(--cs-radius-sm);
    color: var(--cs-muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}
.csp-cl-filters a:hover { color: var(--cs-ink); }
.csp-cl-filters a[aria-current] { background: var(--cs-surface-2); color: var(--cs-ink); box-shadow: var(--cs-shadow-input); }
.csp-cl-showing { margin: 0; color: var(--cs-muted); font-size: 13px; }

/* ------------------------------------------------------------------ Timeline */
.csp-cl-timeline { margin: 0; padding: 0; list-style: none; }
.csp-cl-release { display: grid; grid-template-columns: var(--csp-cl-when) minmax(0, 1fr); gap: 24px; scroll-margin-top: 24px; }
.csp-cl-release:target .csp-cl-version { color: var(--cs-link); }
.csp-cl-when { padding-top: 3px; color: var(--cs-muted); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.csp-cl-entry { position: relative; min-width: 0; padding: 0 0 40px 28px; border-left: 1px solid var(--cs-line); }
.csp-cl-release:last-child .csp-cl-entry { padding-bottom: 8px; }
.csp-cl-entry::before {
    content: "";
    position: absolute;
    top: 8px;
    left: -5px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--cs-surface);
    border-radius: 50%;
    background: var(--cs-accent);
    box-shadow: 0 0 0 1px var(--cs-accent);
}
.csp-cl-stability { display: inline-flex; align-items: center; gap: 6px; color: var(--cs-muted); font-size: 12px; font-weight: 500; }
.csp-cl-stability span { width: 7px; height: 7px; border-radius: 50%; background: var(--cs-green-ink); }
.csp-cl-stability.is-rc span { background: var(--cs-blue-ink); }
.csp-cl-stability.is-beta span { background: var(--cs-yellow-ink); }
.csp-cl-stability.is-alpha span { background: var(--cs-orange-ink); }
.csp-cl-title { margin: 6px 0 0; font-size: 20px; font-weight: 600; line-height: 1.3; }
.csp-cl-title a { color: var(--cs-ink); text-decoration: none; }
.csp-cl-title a:hover .csp-cl-version { text-decoration: underline; text-underline-offset: 3px; }
.csp-cl-name { margin-right: 8px; }
.csp-cl-version { color: var(--cs-ink); font-variant-numeric: tabular-nums; }
.csp-cl-name + .csp-cl-version { color: var(--cs-muted); font-weight: 500; }
.csp-cl-summary {
    display: -webkit-box;
    max-width: 68ch;
    margin: 10px 0 0;
    overflow: hidden;
    color: var(--cs-text);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
/* A summary taken from the first change is only a preview; the open notes show it in full. */
.csp-cl-entry:has(.csp-cl-details[open]) .csp-cl-summary.is-preview { display: none; }
.csp-cl-details { margin-top: 14px; }
.csp-cl-details summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--cs-link);
    font-size: 14px;
    font-weight: 500;
    list-style: none;
    cursor: pointer;
}
.csp-cl-details summary::-webkit-details-marker { display: none; }
.csp-cl-details summary::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.csp-cl-details[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.csp-cl-details[open] summary { margin-bottom: 12px; }
.csp-cl-changes {
    padding: 0 8px;
    border: 1px solid var(--cs-line);
    border-radius: 999px;
    color: var(--cs-muted);
    font-size: 12px;
    font-weight: 500;
}
.csp-cl-empty { padding: 48px 24px; border: 1px dashed var(--cs-line-strong); border-radius: var(--cs-radius-lg); color: var(--cs-muted); text-align: center; }
.csp-cl-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 40px; color: var(--cs-muted); font-size: 13px; }

/* ------------------------------------------------------------------ Release notes */
.csp-cl-prose { max-width: 72ch; color: var(--cs-text); font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.csp-cl-prose > * { margin: 0 0 1em; }
.csp-cl-prose > :last-child { margin-bottom: 0; }
.csp-cl-prose :is(h2, h3, h4) { margin: 1.6em 0 .6em; color: var(--cs-ink); font-size: 16px; font-weight: 600; }
.csp-cl-prose :is(ul, ol) { padding-left: 1.2em; }
.csp-cl-prose li { padding-left: 2px; }
.csp-cl-prose li + li { margin-top: 8px; }
/* Labelled changes drop the bullet and hang their text after the badge. */
.csp-cl-prose li:has(> .csp-cl-badge:first-child) { margin-left: -1.2em; padding-left: 92px; list-style: none; text-indent: -92px; }
.csp-cl-prose li > .csp-cl-badge:first-child { text-indent: 0; }
.csp-cl-prose ul:has(> li > .csp-cl-badge:first-child) > li:not(:has(> .csp-cl-badge:first-child)) { margin-left: -1.2em; padding-left: 92px; list-style: none; }
.csp-cl-prose a { color: var(--cs-link); text-decoration: underline; text-underline-offset: 2px; }
.csp-cl-prose :not(pre) > code {
    padding: .1em .35em;
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius-sm);
    background: var(--cs-surface-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em;
}
.csp-cl-prose img { max-width: 100%; height: auto; border-radius: var(--cs-radius); }
.csp-cl-badge {
    display: inline-flex;
    min-width: 80px;
    justify-content: center;
    margin-right: 12px;
    padding: 1px 8px;
    border-radius: var(--cs-radius-sm);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.7;
    text-transform: uppercase;
    vertical-align: 1px;
}
.csp-badge.is-orange { background: var(--cs-orange-lt); color: var(--cs-orange-ink); }

/* ------------------------------------------------------------------ Narrow screens */
@media (max-width: 900px) {
    .csp-cl-hero { padding: 36px 16px 28px; }
    .csp-cl-hero-inner.has-stats { grid-template-columns: 1fr; align-items: start; }
    .csp-cl-side-meta { justify-items: start; }
    .csp-cl-links { justify-content: flex-start; }
    .csp-cl-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 16px 56px; }
    .csp-cl-side { position: static; max-height: none; overflow: visible; }
    .csp-cl-side-list { display: none; }
    .csp-cl-jump { display: block; width: 100%; }
    .csp-cl-top .csp-cl-toplink { display: none; }
}
@media (max-width: 600px) {
    .csp-cl-release { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .csp-cl-when { padding: 0 0 0 28px; text-align: left; border-left: 1px solid var(--cs-line); }
    .csp-cl-entry { padding-bottom: 32px; }
    .csp-cl-entry::before { top: -14px; }
    .csp-cl-stats div { padding: 0 14px; }
    .csp-cl-label { display: none; }
}