/* Same 3-column grid List/Leaderboard use (inherited from the shared
   header/main rule in main.css) — the feed spans the first two tracks,
   the meta sidebar takes the third, instead of floating as one lonely
   centered column with empty gutters on both sides. */
.page-changelog {
    /* Sidebar trimmed by ~2 characters' width at the stat-label font size
       (measured: "XX" at 0.68rem Lexend Deca ≈ 16px), shifted back to the
       feed's second track. */
    grid-template-columns: minmax(16rem, 1.3fr) minmax(16rem, 1.49fr) minmax(21rem, 1.41fr);
}
.page-changelog .changelog-main {
    grid-column: span 2;
    padding-block: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    border-right: 1.5px solid rgba(161, 19, 251, 0.55);
}
.page-changelog .changelog-meta {
    padding-block: 2rem;
    padding-right: 2rem;
    display: flex;
    flex-direction: column;
}
/* Matches the main feed's date-divider row exactly, so the first real
   card lines up with .changelog-card's top edge instead of the
   divider's. The divider row over there is stretched to ~8.6px tall by
   its date-text sibling (which this topbar has no equivalent of), and
   its 6px bar is then centered within that taller row — so this topbar
   needs the same explicit height for its own bar to center identically,
   rather than just hugging the bar's own 6px. Once the heights match,
   margin-bottom can just equal .changelog-batch's own gap (1.1rem)
   directly, instead of an unrelated hand-tuned value. */
.page-changelog .changelog-meta__topbar {
    display: flex;
    align-items: center;
    margin-bottom: 18.9px;
}
.page-changelog .changelog-meta__topbar .gradient-sheen-bar {
    width: 100%;
    margin-top: 1.3px;
}
.page-changelog .changelog-meta-card + .changelog-meta-card {
    margin-top: 1.1rem;
}

.page-changelog .motif {
    background-image: linear-gradient(#ff55ff, #8811cc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.page-changelog .changelog-list {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
.page-changelog .changelog-batch {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* Date divider — reuses the same gradient-sheen-bar + flex layout as the
   list/leaderboard pagination controls, so a day break reads as the same
   visual language as the rest of the site instead of a one-off style. */
.page-changelog .changelog-batch__divider {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.page-changelog .changelog-batch__date {
    flex: 0 0 auto;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    opacity: 0.7;
}

/* Same gradient-border card treatment as .gdlist-card / .info-merged-box
   elsewhere on the site (dark fill padding-box + purple/pink gradient
   border-box) — keeps every "premium" card on the site looking related. */
.page-changelog .changelog-card {
    display: flex;
    flex-direction: column;
    /* Matches .changelog-section + .changelog-section's padding-top below
       exactly, so the divider line between two sections sits evenly
       between them regardless of collapse state (see the gap note on
       .changelog-section for why that matters). */
    gap: 1.25rem;
    border: 1px solid transparent;
    border-radius: 0.6rem;
    padding: 1.5rem 1.75rem;
    background:
        linear-gradient(135deg, #0e0e18, #16141f) padding-box,
        linear-gradient(135deg, #d9a9ff, #8811cc, #d9a9ff) border-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.page-changelog .changelog-section {
    display: flex;
    flex-direction: column;
    /* No gap here on purpose — it's on .changelog-lines' margin-top
       instead (see below). A flex gap stays reserved even when a
       collapsed section's content shrinks to 0 height, which left a
       lopsided gap above the divider line versus below it once
       minimized; a margin on the (now hidden) content disappears along
       with it instead. */
}
.page-changelog .changelog-section + .changelog-section {
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}
/* A filled pill badge instead of icon+text — the previous version reused
   the exact same circular icon chip as the entries below it, so despite
   being bigger/bolder it still read as "one more row" rather than a
   distinct label. A solid rectangular badge has no shape in common with
   the round entry icons, so it can't be confused for one. */
/* typography.css gives every h3 (site-wide, for baseline-trim purposes)
   generated ::before/::after pseudo-elements with content:"". Harmless
   normally, but on a flex row they become two extra (invisible)  flex
   items, which turns "space-between" into 3 equal gaps split across 4
   items instead of 1 gap between the text and the icon. Killed off just
   for this component's h3 — the global trim is untouched everywhere
   else. */
.page-changelog .changelog-section__heading::before,
.page-changelog .changelog-section__heading::after {
    content: none;
    display: none;
}
.page-changelog .changelog-section__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 0.15rem;
    /* Vertical padding trimmed as the icon (the tallest thing in the bar)
       grew, so the bar's own overall height stays put even though both
       the text and icon are bigger now. Left padding trimmed too — the
       text now carries its own chip padding (see -text below), so the
       bar doesn't need as much of its own on top of that. */
    padding: 0.4rem 0.55rem 0.4rem 0.6rem;
    border-radius: 0.45rem;
    font-family: "Lexend Deca", sans-serif;
    /* Room to grow here too — the icon chip (2.4rem = 38.4px) is still
       the tallest thing in the bar at this size, so the bar's own height
       doesn't move. */
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    user-select: none;
}
/* Same dark cut-out chip as the icon below, now wrapping the text too —
   both pieces of content in the bar share the same "chip on a colored
   pill" treatment instead of just the icon having one. */
.page-changelog .changelog-section__heading-text {
    padding: 0.3rem 0.7rem;
    border-radius: 0.35rem;
    background-color: rgba(0, 0, 0, 0.22);
}
/* Groups the caret + icon as one cluster on the right — keeps them
   adjacent to each other regardless of how much leftover space
   justify-content:space-between hands to this side of the bar. */
.page-changelog .changelog-section__heading-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}
.page-changelog .changelog-section__caret {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    opacity: 0.85;
    transition: transform 0.15s ease;
}
.page-changelog .changelog-section__caret svg {
    width: 1.15rem;
    height: 1.15rem;
}
.page-changelog .changelog-section__caret.collapsed {
    transform: rotate(-90deg);
}
/* Icon rides in its own small chip at the bar's right end, rather than
   inline with the text — a distinct box within the pill, not a second
   piece of loose content next to it. A dark (not light) tint so it reads
   as a cut-out shadow box against ANY of the pill's colors, rather than
   a mismatched light-gray chip sitting on top of a green/red/blue fill. */
.page-changelog .changelog-section__heading-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
    border-radius: 0.4rem;
    background-color: rgba(0, 0, 0, 0.22);
}
.page-changelog .changelog-section__heading-icon svg {
    width: 1.45rem;
    height: 1.45rem;
}
/* Same grid-rows collapse trick the Leaderboard page's record sections
   use — animates smoothly to/from 0 height without needing JS to
   measure content height. */
.page-changelog .changelog-section-collapse {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 0.3s ease, opacity 0.25s ease;
}
.page-changelog .changelog-section-collapse.is-collapsed {
    grid-template-rows: 0fr;
    opacity: 0;
}
.page-changelog .changelog-section-collapse-inner {
    overflow: hidden;
    min-height: 0;
}
.page-changelog .changelog-section__heading--placed {
    background-color: rgba(61, 220, 132, 0.15);
    border: 1px solid rgba(61, 220, 132, 0.45);
    color: #3ddc84;
}
.page-changelog .changelog-section__heading--moved {
    background-color: rgba(91, 141, 239, 0.15);
    border: 1px solid rgba(91, 141, 239, 0.45);
    color: #5b8def;
}
.page-changelog .changelog-section__heading--removed {
    background-color: rgba(255, 77, 109, 0.15);
    border: 1px solid rgba(255, 77, 109, 0.45);
    color: #ff4d6d;
}
.page-changelog .changelog-section__heading--note {
    background-color: rgba(255, 85, 255, 0.15);
    border: 1px solid rgba(255, 85, 255, 0.45);
    color: #ff55ff;
}

.page-changelog .changelog-lines {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin: 0;
    margin-top: 0.75rem;
    /* A smaller nudge in from the edge — was matching
       .changelog-line__detail's full 9.5px right-side inset exactly, but
       that read as too far in on the left. Right side matched to the
       same 5px (was 0) — the hover highlight's box (which bleeds past
       the icon/text content on both sides via .changelog-line's own
       negative margin) was sitting 5px closer to the card's right edge
       than its left edge, making the right-side bevel look off relative
       to the square left corners. .changelog-line__detail's margin-right
       is trimmed by the same 5px below to keep its own position
       unchanged (still flush with the section heading's icon). */
    padding-left: 5px;
    padding-right: 5px;
    list-style: none;
}
/* Thin connecting rail running through every icon chip's center, top to
   bottom. left:1rem + translateX(-50%) centers the rail's midpoint
   exactly on the 2rem-wide icon's own center — more reliable than
   left:calc(1rem - 1px), which rounds to a whole pixel and can land the
   rail visibly off-center by a pixel depending on device pixel ratio.
   Offset by the same 5px as the icons themselves (see padding-left
   above) so it stays centered under them. Icon chips have solid
   (non-transparent) fills so the rail is fully hidden behind each one
   instead of showing through. */
.page-changelog .changelog-lines::before {
    content: "";
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: calc(1rem + 5px);
    width: 2px;
    transform: translateX(-50%);
    background-color: rgba(217, 169, 255, 0.25);
}
.page-changelog .changelog-line {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.2rem 0.4rem;
    margin: -0.2rem -0.4rem;
    /* Uniform radius on all four corners — the square-left/rounded-right
       split (meant to dodge the icon's round silhouette on the left) kept
       reading as visually broken no matter how the padding was balanced.
       A plain uniform bevel is the boring, unambiguous option. */
    border-radius: 0.65rem;
    transition: background-color 100ms ease;
}
.page-changelog .changelog-line:hover {
    background-color: rgba(255, 255, 255, 0.035);
}
/* Placed/moved entries jump to that level on the List page — cursor is the
   only affordance needed since the existing hover highlight already reads
   as "this row does something" for entries with icons. */
.page-changelog .changelog-line--clickable {
    cursor: pointer;
}
.page-changelog .changelog-line--clickable:hover .changelog-line__name strong {
    text-decoration: underline;
    text-decoration-color: currentColor;
}
.page-changelog .changelog-line__icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: 50%;
}
.page-changelog .changelog-line__icon svg {
    width: 1.15rem;
    height: 1.15rem;
}
.page-changelog .changelog-line__text {
    padding-top: 0.17rem;
    font-family: "Lexend Deca", sans-serif;
    font-size: 1.1rem;
    line-height: 1.6rem;
    color: var(--color-on-background);
}
.page-changelog .changelog-line__text strong {
    font-weight: 700;
}
.page-changelog .changelog-line__text em {
    font-style: italic;
    font-size: 0.95rem;
    opacity: 0.7;
}
/* Placed/moved rows split into a name (left) and a detail (right) instead
   of one flowing sentence — margin-left:auto pins the detail to the far
   right edge of the row so the two stay organized and evenly spaced
   regardless of how long the level name is. */
.page-changelog .changelog-line__name {
    padding-top: 0.17rem;
    font-family: "Lexend Deca", sans-serif;
    font-size: 1.1rem;
    line-height: 1.6rem;
    color: var(--color-on-background);
}
.page-changelog .changelog-line__name strong {
    font-weight: 700;
}
.page-changelog .changelog-line__detail {
    margin-left: auto;
    /* Right-aligns flush with the icon chip on the section heading bar
       above (not the bar's own outer padding edge, which sits further
       right) — matches where the bar's visible content actually ends.
       Trimmed by 5px from the original 9.5px since .changelog-lines
       picked up 5px of its own padding-right (see above) — this keeps
       the detail pill's absolute position unchanged. */
    margin-right: 4.5px;
    padding-top: 0.3rem;
    padding-left: 1rem;
    flex: 0 0 auto;
    font-family: "Lexend Deca", sans-serif;
    font-size: 1.1rem;
    line-height: 1.6rem;
    white-space: nowrap;
    font-style: italic;
    opacity: 0.7;
}

/* Placed — new/re-shuffled placements, a clean affirmative green. Solid
   opaque fill (not translucent) so the connecting rail never shows
   through the circle. */
.page-changelog .changelog-line__icon--placed {
    background-color: #16311f;
    border: 1px solid rgba(61, 220, 132, 0.5);
    color: #3ddc84;
}
/* Removed — soft rose-red so it stays in the site's pink/purple family
   instead of clashing with a pure red. */
.page-changelog .changelog-line__icon--removed {
    background-color: #331019;
    border: 1px solid rgba(255, 77, 109, 0.5);
    color: #ff4d6d;
}
.page-changelog .changelog-line--removed .changelog-line__text strong {
    opacity: 0.75;
}
/* Moved — a rank shuffled without being newly placed or removed. Blue
   reads as neutral/informational, distinct from the green (good) and
   red (bad) of the other two. */
.page-changelog .changelog-line__icon--moved {
    background-color: #16223f;
    border: 1px solid rgba(91, 141, 239, 0.5);
    color: #5b8def;
}
/* Note — standalone announcement lines (e.g. "Records added"). Same
   OPAQUE dark-fill recipe as placed/moved/removed (a solid tinted color,
   not real alpha transparency) — this one used to use an actual
   rgba(...,0.15) fill, which let the connecting rail behind it show
   through and look like it was cutting across/off-center on the icon. A
   solid color hides the rail completely, same as the other three. */
.page-changelog .changelog-line__icon--note {
    background-color: #33143a;
    border: 1px solid rgba(255, 85, 255, 0.5);
    color: #ff55ff;
}
.page-changelog .changelog-line--note .changelog-line__text strong {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 1.15rem;
    font-style: italic;
    /* #8811cc read fine as a single accent color elsewhere, but stretched
       across a whole word it put the tail end ("added") into a shade too
       dark to read against the card's near-black fill. Lightened the end
       stop so it stays legible while still reading as the same pink-to-
       purple gradient. */
    background-image: linear-gradient(90deg, #ff55ff, #c77dff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Trims the card's own bottom padding when a footnote is present (instead
   of the standard 1.5rem), and gives the footnote a slightly smaller top
   padding than that bottom padding — equal padding read as bottom-heavy,
   so it's nudged up a bit to actually look centered. */
.page-changelog .changelog-card:has(.changelog-card__footnote) {
    padding-bottom: 1.15rem;
}
.page-changelog .changelog-card__footnote {
    margin: 0;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    font-style: italic;
    text-align: center;
    opacity: 0.5;
}

.page-changelog .changelog-empty {
    opacity: 0.6;
    padding: 2rem 0;
    text-align: center;
}

/* ===== Meta sidebar ===== */
/* Mascot is pulled out of the header's flow and pinned to the card's
   corner instead — was inline next to the heading, but that put it at a
   different spot on every card depending on how long the title text
   happened to be. Anchoring to the card itself (not the header) gives
   every mascot the exact same top/right offset regardless of title
   length or wrapping. */
.page-changelog .changelog-meta-card {
    position: relative;
    /* Tighter than the main feed's cards — the mascot videos' declared
       CSS size reads bigger on paper than they render visually (small
       clips, mostly negative space via object-fit:contain), which had
       been inflating how much padding/gap these boxes seemed to need. */
    gap: 1rem;
    padding: 1.25rem 1.5rem;
}
.page-changelog .changelog-meta-card__header {
    display: flex;
    align-items: center;
    /* Reserve room so heading text wraps before it can run under the
       mascot, which now overlaps this row instead of sitting in it. */
    padding-right: 4rem;
    /* Matches the mascot's own size (see .changelog-mascot) so the
       header's normal-flow box actually reserves the vertical space the
       absolutely-positioned mascot occupies — otherwise the content below
       the header starts right after the (much shorter) heading text and
       the mascot overlaps it. */
    min-height: 4rem;
}
.page-changelog .changelog-meta-card__heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    text-transform: uppercase;
    /* Room to grow here since the header row's height is governed by the
       mascot (4rem = 64px), not this text — at 2.3rem the heading's own
       line box is still well under that, so the card doesn't grow. */
    font-size: 2.3rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
/* Small decorative mascot clips, same idea as the header's nav__accent
   videos — a bit of personality riding along in each card's corner
   rather than a bare text label. object-fit:contain (not cover) because
   the source clips aren't all square — ProfessorPolyglot is 90x135
   (portrait), and cover was cropping its top and bottom to force it into
   a square box. contain always shows the full frame regardless of the
   source's own aspect ratio. */
.page-changelog .changelog-mascot {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 4rem;
    height: 4rem;
    object-fit: contain;
    border-radius: 0.45rem;
    pointer-events: none;
}
/* Live Updates specifically pulled up a bit — shortens the whole card
   since its content (blurb + button) doesn't need as much header
   clearance as the other two cards' content does. */
.page-changelog .changelog-discord-card .changelog-mascot {
    top: 0.85rem;
    right: 2rem;
}
/* Professor Polyglot nudged left a bit. */
.page-changelog .changelog-legend-card .changelog-mascot {
    right: 1.75rem;
}
.page-changelog .changelog-discord-card .changelog-meta-card__header {
    min-height: 3.6rem;
}
.page-changelog .changelog-discord-card {
    gap: 0.95rem;
    position: relative;
}
/* Purple tapered divider between the Legend and Live Updates cards —
   only matches when the immediately preceding sibling is a plain
   .changelog-meta-card (i.e. Legend, not Summary), so it can't also show
   up above Live Updates if the sidebar order ever changes, and it never
   appears above Legend itself. Overrides the shared 1.1rem meta-card
   gap with a wider one just for this pair, so the line has real
   breathing room on both sides instead of sitting right against the
   card edges — then centers itself in that wider gap. */
.page-changelog .changelog-meta-card + .changelog-discord-card {
    margin-top: 2.3rem;
}
.page-changelog .changelog-meta-card + .changelog-discord-card::before {
    content: "";
    position: absolute;
    /* -1.15rem is the exact geometric midpoint of this 2.3rem gap, but
       that measured-centered position has repeatedly read as too low —
       the Live Updates card below it (rounded corner, gradient border)
       visually reads as "closer" than the Legend card above it even at
       equal pixel distance, so the line needs a deliberate bias above
       true center to look centered. */
    top: -1.3rem;
    left: 0;
    right: 0;
    height: 2px;
    background-image: linear-gradient(90deg, transparent, #a113fb, transparent);
}
/* Same idea, applied to Summary — the mascot moves up, which (since the
   heading is vertically centered within the header via align-items via
   .changelog-meta-card__header) pulls the "SUMMARY" title up right along
   with it, and the card's own gap is trimmed so the stats grid follows
   suit — the whole card ends up shorter. */
.page-changelog .changelog-summary-card .changelog-mascot {
    top: 0.85rem;
    right: 1.9rem;
}
.page-changelog .changelog-summary-card .changelog-meta-card__header {
    min-height: 3.6rem;
}
.page-changelog .changelog-summary-card {
    gap: 0.75rem;
}

.page-changelog .changelog-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
    /* Without this, grid's default row-stretch makes every cell in a row
       match the tallest one — since "Placed" shares a row with "Levels"
       (one of the pills whose icon just got bigger), it would get
       stretched taller too even though its own icon didn't change. This
       lets each pill size to its own content instead. */
    align-items: start;
}
/* Each stat gets its own chip — same recipe (translucent fill + thin
   border) as the player-count pill in the nav bar, so a cluster of raw
   numbers reads as distinct, scannable stat cards instead of a loose
   list of text. Icon on the left in its own colored badge, value+label
   stacked on the right. */
.page-changelog .changelog-stats li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    /* Dialed back in a bit from the last round — 0.75rem/1.15rem/0.8rem
       ended up a tad too roomy. */
    padding: 0.65rem 1.05rem 0.65rem 0.7rem;
    /* Lets the pill actually shrink to fit its grid column instead of
       overflowing it — grid items default to min-width:auto, which
       refuses to shrink below the icon+text's natural width and was
       pushing the right-column pills out past the card's edge. */
    min-width: 0;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
}
/* Back to one uniform size for all four — "Placed" had been left at the
   smaller size deliberately, but that's reverted now so it matches its
   siblings again. */
.page-changelog .changelog-stats__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Badge itself shrunk — the svg size below is untouched on purpose,
       so the glyph stays the same size, just with a tighter box around
       it. */
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border-radius: 0.55rem;
}
.page-changelog .changelog-stats__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}
.page-changelog .changelog-stats__li--levels .changelog-stats__icon {
    background-color: rgba(61, 220, 132, 0.18);
    color: #3ddc84;
}
.page-changelog .changelog-stats__li--placed .changelog-stats__icon {
    background-color: rgba(199, 125, 255, 0.18);
    color: #c77dff;
}
.page-changelog .changelog-stats__li--removed .changelog-stats__icon {
    background-color: rgba(255, 77, 109, 0.18);
    color: #ff4d6d;
}
.page-changelog .changelog-stats__li--date .changelog-stats__icon {
    background-color: rgba(199, 125, 255, 0.18);
    color: #c77dff;
}
.page-changelog .changelog-stats__text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.page-changelog .changelog-stats__value {
    font-family: "Lexend Deca", sans-serif;
    font-size: 1.4rem;
    /* Shared across every value (including the smaller date variant below)
       so differing font-sizes still center on the same line, instead of
       each one sitting flush with the top of its own, differently-tall
       text box. */
    line-height: 1.7rem;
    font-weight: 700;
    color: white;
}
/* Same pill format as the other three stats, but a smaller value size —
   "Aug 12" is wider text than a bare number and reads oversized next to
   them at the full size. */
.page-changelog .changelog-stats__value--date {
    font-size: 1.05rem;
}
.page-changelog .changelog-stats__label {
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.55;
    white-space: nowrap;
}

.page-changelog .changelog-legend {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Same recipe as .editors li on the List page's meta sidebar (subtle
   translucent fill, rounded corners) — same "row inside a pill" pattern
   used for the editor/role list there. */
.page-changelog .changelog-legend li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
    background-color: rgba(255, 255, 255, 0.035);
    /* Same border the Summary pills use, so the two sidebar cards' chips
       read as the same family of component. */
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.95rem;
    opacity: 0.85;
}
.page-changelog .changelog-legend .changelog-line__icon {
    width: 1.85rem;
    height: 1.85rem;
}
.page-changelog .changelog-legend .changelog-line__icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.page-changelog .changelog-discord-card__blurb {
    margin: 0;
    margin-top: 0.3rem;
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 0.75;
}
/* Only the button itself is the actual link now (the card used to be one
   giant <a>) — hover feedback lives here instead of on the whole card. */
.page-changelog .changelog-discord-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    background-color: #5865F2;
    color: white;
    text-decoration: none;
    font-family: "Lexend Deca", sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    transition: filter 100ms ease, transform 100ms ease;
}
.page-changelog .changelog-discord-card__cta:hover {
    filter: brightness(1.15);
    transform: scale(1.05);
}
.page-changelog .changelog-discord-card__cta.click-pop--flash {
    transform: scale(0.94);
    transition: transform 60ms ease-out;
}
.page-changelog .changelog-discord-card__icon {
    height: 1.15rem;
}