.changelog-page { background: #fbfcfe; }
.changelog-main { max-width: 960px; margin: 0 auto; padding: 94px 32px 128px; min-height: 70vh; }
.changelog-intro { margin-bottom: 28px; }
.changelog-intro h1 { margin: 0 0 16px; font-size: clamp(36px, 5vw, 48px); line-height: 1.1; letter-spacing: -.045em; }
.changelog-intro p, .release-heading p { color: #5c6c84; font-size: 15px; line-height: 1.7; margin: 0; }
.changelog-filters { margin-bottom: 44px; }
.release[hidden], .change-item[hidden] { display: none; }
/* The filter bar is enhanced by JS; it keeps its space while hidden so nothing shifts. */
.changelog-filters[hidden] { display: block; visibility: hidden; }
.changelog-status { margin: 14px 0 0; color: #5c6c84; font-size: 12px; line-height: 1.6; }
.t-tabs {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 48px;
  background: var(--tabs-bar-bg);
}
.t-tab {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  height: 30px;
  padding: 4px 12px;
  color: var(--tabs-text-muted);
  cursor: pointer;
  border-radius: 48px;
  z-index: 1;
  transition: color var(--tabs-dur) var(--tabs-ease);
}
.t-tab:not([aria-selected="true"]):hover,
.t-tab[aria-selected="true"] {
  color: var(--tabs-text-active);
}
.t-tabs-pill {
  position: absolute;
  top: 3px;
  left: 0;
  height: 30px;
  width: 0;
  background: var(--tabs-pill-bg);
  border-radius: 48px;
  transform: translateX(0);
  transition:
    transform var(--tabs-dur) var(--tabs-ease),
    width     var(--tabs-dur) var(--tabs-ease);
  will-change: transform, width;
  z-index: 0;
  pointer-events: none;
}
.changelog-filters .t-tabs { --tabs-ease: var(--ease-smooth-out); --tabs-text-muted: #5c6c84; --tabs-text-active: #18395e; --tabs-bar-bg: #eaf0f7; --tabs-pill-bg: #fff; border-radius: 12px; }
.changelog-filters .t-tab { height: 44px; padding-inline: 16px; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.changelog-filters .t-tabs-pill { height: 44px; border-radius: 9px; box-shadow: 0 1px 4px #24395516; }
.changelog-filters .t-tab:focus-visible, #changelog-results:focus-visible { outline: 2px solid #075cff; outline-offset: 3px; }
.release { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 36px; border-top: 1px solid #dce4ef; padding-top: 32px; scroll-margin-top: 100px; }
.release:not([hidden]) ~ .release:not([hidden]) { margin-top: 64px; }
.release-meta { display: flex; flex-direction: column; gap: 10px; padding-top: 5px; }
.release-meta a { display: inline-block; padding-block: 3px; margin-block: -3px; color: #243955; text-decoration: none; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.release-meta a:hover { color: #075cff; }
.release-meta span { color: #67738a; font-size: 12px; }
.release-heading { margin-bottom: 30px; }
.release-heading h2 { margin: 0 0 12px; font-size: clamp(23px, 3vw, 28px); line-height: 1.3; letter-spacing: -.025em; }
.change-item { border-top: 1px solid #e1e7ef; }
.change-item:last-child { border-bottom: 1px solid #e1e7ef; }
.change-item h3 { margin: 0; }
.change-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; background: transparent; border: 0; color: #243955; text-align: left; font: inherit; cursor: pointer; }
/* Each row leads with what changed; its status and area sit above as small labels. */
.change-head { display: grid; gap: 7px; min-width: 0; }
.change-trigger { scroll-margin-top: 100px; }
.change-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.change-status { padding: 3px 7px; border-radius: 5px; background: #eef3fb; color: #33507a; font-size: 11px; font-weight: 650; line-height: 1.3; letter-spacing: .2px; }
.change-status[data-tone="new"] { background: #e7f6ec; color: #18663b; }
.change-status[data-tone="fixed"] { background: #f2edfb; color: #5b3fa3; }
.change-status[data-tone="testing"] { background: #fff4dc; color: #855400; }
.change-title { display: block; color: #243955; font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: -.01em; text-wrap: pretty; }
.change-category { padding: 3px 7px; border: 1px solid #dce4ef; border-radius: 5px; color: #5c6c84; font-size: 11px; font-weight: 550; line-height: 1.3; }
.changelog-main[data-filter="app"] .change-category, .changelog-main[data-filter="website"] .change-category { display: none; }

.change-trigger:hover .change-title { color: #075cff; }
.change-chevron { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: #6580a6; stroke-width: 1.5; transition: transform var(--duration-fast, 250ms) var(--ease-smooth-out, ease-out); }
.change-chevron path { vector-effect: non-scaling-stroke; }
.change-item[data-open="true"] .change-chevron { transform: scaleY(-1); }
.change-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--duration-fast, 250ms) var(--ease-smooth-out, ease-out); }
.change-item[data-open="false"] .change-panel { grid-template-rows: 0fr; }
.change-inner { min-height: 0; overflow: hidden; opacity: 1; transition: opacity var(--duration-fast, 250ms) var(--ease-smooth-out, ease-out); }
.change-item[data-open="false"] .change-inner { opacity: 0; }
.change-inner ul { margin: 0; padding: 0 0 24px 18px; color: #52647d; font-size: 14px; line-height: 1.8; }
.change-inner li + li { margin-top: 14px; }
.change-inner li strong { color: #304562; font-weight: 650; }
.change-trigger:focus-visible, .release-meta a:focus-visible { outline: 2px solid #075cff; outline-offset: 5px; border-radius: 3px; }
@media (max-width: 650px) {
 .changelog-main { padding: 56px 22px 76px; }
 .changelog-intro { margin-bottom: 24px; }
 .changelog-filters { margin-bottom: 32px; }
 .changelog-filters .t-tab { padding-inline: 9px; font-size: 12px; }
 .release { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 24px; }
 .release:not([hidden]) ~ .release:not([hidden]) { margin-top: 48px; }
 .release-meta { flex-direction: row; align-items: center; gap: 16px; }
 .release-heading { margin-bottom: 26px; }
}
@media (prefers-reduced-motion: reduce) {
 .t-tabs-pill, .t-tab { transition: none !important; }
 .change-panel, .change-inner, .change-chevron { transition: none !important; }
}