/*
 * /changelog (changelog.leaf). Plain CSS on the --fk-* tokens (Resources/css/tokens.css,
 * compiled into /css/admin.css), so no Tailwind rebuild is needed.
 *
 * Layout: a page header on the main surface, then the entries on --fk-surface-alt. The
 * tinted band ends where the shared footer begins, so the footer (white, with its own
 * hairline) reads as a separate region instead of more empty page.
 *
 * Each entry is an <article>: the date sits in a left column from 768px up (sticky while
 * its entry scrolls past) and above the card below that. The rail and its dots are
 * decorative pseudo-elements. Nothing here animates.
 *
 * SDK releases follow the dated timeline with the same rhythm: a header on the main
 * surface, then the SDK groups on --fk-surface-alt down to the footer. Each group reuses
 * the timeline (rail, date column, card) for its versions. Old blog posts redirect to a
 * version's id, so every id clears the fixed nav and a targeted card is outlined.
 */

.fk-cl {
    color: var(--fk-ink);
    font-family: Inter, system-ui, -apple-system, sans-serif;
}

.fk-cl__wrap {
    width: min(64rem, 100%);
    margin-inline: auto;
    padding-inline: var(--fk-gutter);
}

/* ---------- Header ---------- */

.fk-cl__head {
    padding-block: calc(4rem + var(--fk-space-2xl)) var(--fk-space-2xl);
    background: var(--fk-surface);
}

.fk-cl__eyebrow {
    margin: 0 0 var(--fk-space-sm);
    color: var(--fk-primary-text);
    font-size: var(--fk-font-eyebrow);
    font-weight: 600;
    letter-spacing: var(--fk-tracking-eyebrow);
    text-transform: uppercase;
}

.fk-cl__title {
    margin: 0;
    color: var(--fk-ink);
    font-size: var(--fk-font-h1);
    font-weight: 800;
    letter-spacing: var(--fk-tracking-tight);
    line-height: var(--fk-leading-tight);
}

.fk-cl__lead {
    max-width: 40rem;
    margin: var(--fk-space-lg) 0 0;
    color: var(--fk-ink-soft);
    font-size: var(--fk-font-lead);
    line-height: var(--fk-leading-body);
}

.fk-cl a {
    color: var(--fk-primary-text);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.fk-cl a:hover {
    color: var(--fk-ink);
}

.fk-cl a:focus-visible {
    outline: 2px solid var(--fk-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

.fk-cl__see,
.fk-cl__updated {
    margin: var(--fk-space-md) 0 0;
    color: var(--fk-ink-soft);
    font-size: var(--fk-font-small);
}

.fk-cl__see {
    font-size: var(--fk-font-body);
}

/* Anchors land below the fixed nav (about 4rem tall). */
.fk-cl [id] {
    scroll-margin-top: calc(4rem + var(--fk-space-md));
}

.fk-cl code {
    padding: 0.05em 0.3em;
    border: 1px solid var(--fk-hairline);
    border-radius: calc(var(--fk-radius-sm) / 2);
    background: var(--fk-surface-alt);
    color: var(--fk-ink);
    font-size: 0.875em;
    overflow-wrap: anywhere;
}

/* ---------- Entries ---------- */

.fk-cl__body {
    padding-block: var(--fk-space-2xl);
    border-top: 1px solid var(--fk-hairline);
    background: var(--fk-surface-alt);
}

.fk-cl__list {
    position: relative;
    display: grid;
    gap: var(--fk-space-xl);
    margin: 0;
    padding: 0;
}

.fk-cl-entry {
    position: relative;
    display: grid;
    gap: var(--fk-space-sm);
    padding-inline-start: 1.5rem;
}

/* The rail: one line down the left edge of the list, a dot per entry. */
.fk-cl__list::before {
    content: "";
    position: absolute;
    inset-block: 0.5rem 0;
    inset-inline-start: 0.3125rem;
    width: 1px;
    background: var(--fk-hairline);
}

.fk-cl-entry::before {
    content: "";
    position: absolute;
    top: 0.4rem;
    inset-inline-start: 0;
    width: 0.6875rem;
    height: 0.6875rem;
    border: 2px solid var(--fk-surface-alt);
    border-radius: var(--fk-radius-pill);
    background: var(--fk-ink-soft);
}

.fk-cl-entry:first-child::before {
    background: var(--fk-accent-gradient);
}

.fk-cl-entry__date {
    color: var(--fk-ink-soft);
    font-size: var(--fk-font-small);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 1.5;
}

.fk-cl-entry__card {
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--fk-hairline);
    border-radius: var(--fk-radius-lg);
    background: var(--fk-surface-raised);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.fk-cl-entry__title {
    margin: 0;
    color: var(--fk-ink);
    font-size: var(--fk-font-h3);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: var(--fk-leading-snug);
}

.fk-cl-entry__list {
    display: grid;
    gap: var(--fk-space-sm);
    margin: var(--fk-space-md) 0 0;
    padding-inline-start: 1.25rem;
    color: var(--fk-ink-soft);
    font-size: var(--fk-font-body);
    line-height: var(--fk-leading-body);
    list-style: disc;
}

.fk-cl-entry__list li {
    overflow-wrap: anywhere;
}

.fk-cl-entry__list li::marker {
    color: var(--fk-primary-text);
}

/* ---------- SDK releases ---------- */

.fk-cl-sdk__head {
    padding-block: var(--fk-space-2xl) var(--fk-space-xl);
    border-top: 1px solid var(--fk-hairline);
    background: var(--fk-surface);
}

.fk-cl-sdk__title {
    margin: 0;
    color: var(--fk-ink);
    font-size: var(--fk-font-h2);
    font-weight: 800;
    letter-spacing: var(--fk-tracking-tight);
    line-height: var(--fk-leading-tight);
}

.fk-cl-sdk__lead {
    max-width: 40rem;
    margin: var(--fk-space-md) 0 0;
    color: var(--fk-ink-soft);
    font-size: var(--fk-font-body);
    line-height: var(--fk-leading-body);
}

.fk-cl-sdk__jump ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fk-space-xs);
    margin: var(--fk-space-lg) 0 0;
    padding: 0;
    list-style: none;
}

.fk-cl .fk-cl-sdk__jump a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: var(--fk-space-md);
    border: 1px solid var(--fk-hairline);
    border-radius: var(--fk-radius-pill);
    background: var(--fk-surface-raised);
    color: var(--fk-ink);
    font-size: var(--fk-font-small);
    font-weight: 600;
    text-decoration: none;
}

.fk-cl .fk-cl-sdk__jump a:hover {
    border-color: var(--fk-primary-text);
    color: var(--fk-primary-text);
}

.fk-cl-sdk__body {
    padding-block: var(--fk-space-xl) var(--fk-space-section);
    border-top: 1px solid var(--fk-hairline);
    background: var(--fk-surface-alt);
}

.fk-cl-sdk__group + .fk-cl-sdk__group {
    margin-top: var(--fk-space-2xl);
    padding-top: var(--fk-space-xl);
    border-top: 1px solid var(--fk-hairline);
}

.fk-cl-sdk__group-head {
    margin-bottom: var(--fk-space-lg);
}

.fk-cl-sdk__group-title {
    margin: 0;
    color: var(--fk-ink);
    font-size: var(--fk-font-h3);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: var(--fk-leading-snug);
}

.fk-cl-sdk__group-lead {
    margin: var(--fk-space-2xs) 0 0;
    color: var(--fk-ink-soft);
    font-size: var(--fk-font-small);
    line-height: var(--fk-leading-body);
}

/* A version sits one level below its SDK, so its title is a step smaller. */
.fk-cl-sdk .fk-cl-entry__title {
    font-size: var(--fk-font-lead);
}

.fk-cl-sdk__more {
    margin: var(--fk-space-md) 0 0;
    font-size: var(--fk-font-small);
}

.fk-cl-sdk__entry:target .fk-cl-entry__card {
    border-color: var(--fk-primary-text);
    box-shadow: 0 0 0 1px var(--fk-primary-text);
}

@media (min-width: 768px) {
    .fk-cl__list::before {
        inset-inline-start: 11.09375rem;
    }

    .fk-cl-entry {
        grid-template-columns: 10rem minmax(0, 1fr);
        gap: 0 2.25rem;
        padding-inline-start: 0;
    }

    .fk-cl-entry::before {
        inset-inline-start: 10.78125rem;
        top: 1.95rem;
    }

    .fk-cl-entry__date {
        position: sticky;
        top: 6rem;
        align-self: start;
        padding-top: 1.6rem;
        text-align: end;
        padding-inline-end: 0.75rem;
    }

    .fk-cl-entry__card {
        padding: var(--fk-space-xl);
    }
}