/* Changelog page styles; shared header/hero/footer come from /styles.css */

.changelog-section { padding: 72px 0 96px; background: var(--paper); }
.changelog-shell { max-width: 860px; }

.direct-notice {
  margin: 0 0 26px;
  padding: 13px 18px;
  border: 1px solid #d8d2f4;
  border-radius: 11px;
  color: #4b3bb0;
  background: var(--accent-soft);
  font-size: 13px;
}

/* ---------- Release list ---------- */
.release-list { margin: 0; padding: 0; list-style: none; }
.release {
  position: relative;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 34px;
  padding: 38px 0 42px;
  border-bottom: 1px solid #e1e0e6;
  outline: none;
}
.release:first-child { padding-top: 6px; }
.release.is-targeted .release-content { animation: release-flash 1.8s ease 1; }
@keyframes release-flash {
  0% { background: rgba(116, 87, 255, .1); box-shadow: 0 0 0 10px rgba(116, 87, 255, .1); }
  100% { background: transparent; box-shadow: 0 0 0 10px transparent; }
}

.release-meta { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; padding-top: 4px; }
.release-date { color: #85868f; font-size: 12px; font-weight: 620; }
.release-version {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid #d8d2f4;
  border-radius: 20px;
  color: #5c43d6;
  background: var(--accent-soft);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .02em;
}

.release-content {
  min-width: 0;
  border-radius: 14px;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid #e8e7ec;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .03);
  transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
.release:hover .release-content {
  border-color: #d4d2e0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .055);
  transform: translateY(-1px);
}
.release-heading-row { display: flex; align-items: center; gap: 10px; }
.release-title { margin: 0; color: #17181d; font-size: 22px; line-height: 1.3; letter-spacing: -.04em; font-weight: 720; }
.release-permalink {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  color: #a3a4ad;
  opacity: 0;
  transition: opacity .18s ease, color .18s ease, background .18s ease;
}
.release-permalink svg { width: 16px; height: 16px; }
.release:hover .release-permalink, .release-permalink:focus-visible { opacity: 1; }
.release-permalink:hover, .release-permalink:focus-visible { color: #5c43d6; background: var(--accent-soft); }
.release-summary { margin: 10px 0 0; color: #6f7079; font-size: 14px; line-height: 1.75; }

.release-markdown { margin-top: 6px; }
.release-markdown h3 {
  margin: 24px 0 10px;
  padding-left: 12px;
  border-left: 3px solid #a996ff;
  color: #26272e;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -.015em;
}
.release-markdown p { margin: 10px 0; color: #55565f; font-size: 13.5px; line-height: 1.8; }
.release-markdown ul { margin: 8px 0; padding-left: 0; list-style: none; }
.release-markdown li {
  position: relative;
  margin: 7px 0;
  padding-left: 20px;
  color: #55565f;
  font-size: 13.5px;
  line-height: 1.75;
}
.release-markdown li::before {
  position: absolute;
  top: 9px;
  left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: #a996ff;
  content: "";
}
.release-markdown strong { color: #26272e; font-weight: 700; }
.release-markdown a { color: #5c43d6; text-decoration: underline; text-underline-offset: 2px; }
.release-markdown a:hover { color: var(--accent-strong); }

/* ---------- Pagination ---------- */
.pagination {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 44px;
  padding-top: 30px;
}
.pagination::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c8d4df 16%, #c8d4df 84%, transparent);
  content: "";
}
.pagination-button {
  min-width: 38px;
  height: 38px;
  padding: 0 11px;
  border: 1px solid #d4dde4;
  border-radius: 4px;
  color: #526575;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.pagination-button:hover:not(:disabled) {
  border-color: #7c9bad;
  color: #234e6b;
  background: #f1f6f8;
}
.pagination-button.is-current {
  border-color: #315f82;
  color: #fff;
  background: #315f82;
}
.pagination-button:disabled {
  color: #a8b4bc;
  background: #f4f6f7;
  cursor: not-allowed;
}
.pagination-ellipsis {
  width: 20px;
  color: #82909b;
  text-align: center;
}

/* ---------- Loading skeleton ---------- */
.loading-state { display: grid; gap: 42px; }
.skeleton-release { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 34px; }
.skeleton-meta, .skeleton-body { display: grid; gap: 11px; align-content: start; }
.skeleton-release i {
  display: block;
  height: 13px;
  border-radius: 7px;
  background: linear-gradient(90deg, #e9e8ee 25%, #f4f3f8 46%, #e9e8ee 64%);
  background-size: 300% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-meta i:first-child { width: 68%; }
.skeleton-meta i:last-child { width: 46%; height: 22px; border-radius: 12px; }
.skeleton-body i:first-child { width: 52%; height: 20px; }
.skeleton-body i:nth-child(2) { width: 92%; }
.skeleton-body i:nth-child(3) { width: 84%; }
.skeleton-body i:last-child { width: 61%; }
@keyframes skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* ---------- Empty / error states ---------- */
.empty-state, .error-state {
  padding: 64px 28px;
  border: 1px solid #e0dfe4;
  border-radius: 14px;
  background: #fff;
  text-align: center;
}
.empty-icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 6px;
  border-radius: 14px;
  color: #6046d8;
  background: var(--accent-soft);
}
.empty-icon svg { width: 24px; height: 24px; }
.empty-state h2, .error-state h2 { margin: 12px 0 8px; color: #1b1c22; font-size: 19px; letter-spacing: -.03em; }
.empty-state p, .error-state p { margin: 0 auto; max-width: 420px; color: #7a7b84; font-size: 13px; line-height: 1.75; }
.error-state button {
  min-height: 44px;
  margin-top: 20px;
  padding: 0 22px;
  border: none;
  border-radius: 9px;
  color: #fff;
  background: #17181e;
  cursor: pointer;
  font-size: 13px;
  font-weight: 720;
  transition: transform .2s ease, background .2s ease;
}
.error-state button:hover { transform: translateY(-1px); background: #26262e; }
.noscript-state { margin-top: 26px; }

@media (prefers-reduced-motion: reduce) {
  .skeleton-release i { animation: none; }
  .release.is-targeted .release-content { animation: none; }
  .release-permalink { transition: none; }
  .pagination-button { transition: none; }
  .release-content { transition: none; }
  .changelog-page .hero-kicker span { animation: none; }
}

@media (max-width: 760px) {
  .changelog-section { padding: 52px 0 72px; }
  .release, .skeleton-release { grid-template-columns: 1fr; gap: 14px; padding: 30px 0 34px; }
  .release-meta { flex-direction: row; align-items: center; gap: 12px; }
  .release-permalink { opacity: 1; }
  .release-title { font-size: 19px; }
  .skeleton-meta { grid-template-columns: 90px 80px; }
  .empty-state, .error-state { padding: 46px 20px; }
  .pagination { gap: 5px; margin-top: 30px; padding-top: 22px; }
  .pagination-button { min-width: 34px; padding: 0 8px; }
}

/* ---------- Unified BMLive live-control visual language ---------- */
.changelog-page {
  --monitor-blue: #7bc7ff;
  --signal-blue: #4f82ff;
  --signal-green: #56d7a3;
  --on-air: #ff5c62;
  --control-night: #0b1018;
  --control-line: #d9e0e8;
  --paper: #f1f4f8;
  --accent: var(--signal-blue);
  --accent-strong: #2869ad;
  --accent-soft: #e3f1fc;
  background: var(--paper);
}
.changelog-page .shell { width: min(calc(100% - 56px), 1240px); }
.changelog-page .site-header {
  border-color: rgba(123, 199, 255, .15);
  background: rgba(11, 16, 24, .9);
}
.changelog-page .site-header::after {
  display: none;
}
.changelog-page .header-nav { color: #a3afbd; }
.changelog-page .header-nav a,
.changelog-page .header-download { border-radius: 4px; }
.changelog-page .header-download {
  border-color: rgba(123, 199, 255, .42);
  color: #e9f6ff;
  background: rgba(79, 130, 255, .12);
}
.changelog-page .page-hero {
  padding: 152px 0 90px;
  background: var(--control-night);
}
.changelog-page .page-hero::before {
  position: absolute;
  inset: 0;
  opacity: .32;
  background-image:
    linear-gradient(rgba(123, 199, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123, 199, 255, .07) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .58) 55%, transparent 100%);
  content: "";
}
.changelog-page .page-hero::after {
  height: 1px;
  background: rgba(123, 199, 255, .28);
}
.changelog-page .page-hero-grid,
.changelog-page .page-hero-glow { display: none; }
.changelog-page .page-hero-inner { max-width: 1240px; text-align: left; }
.changelog-page .hero-kicker {
  color: #b5c6d6;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .12em;
}
.changelog-page .hero-kicker span {
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--on-air);
  box-shadow: 0 0 0 4px rgba(255, 92, 98, .12);
  animation: kicker-pulse 2.4s ease-in-out infinite;
}
@keyframes kicker-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 92, 98, .12); }
  50% { box-shadow: 0 0 0 7px rgba(255, 92, 98, .06); }
}
.changelog-page .page-hero h1 {
  max-width: 860px;
  margin: 0;
  font-weight: 790;
}
.changelog-page .page-hero h1 em {
  color: var(--monitor-blue);
  background: none;
}
.changelog-page .page-hero-copy { max-width: 620px; margin-right: 0; margin-left: 0; color: #a8b4c2; }
.changelog-page .changelog-section { padding: 82px 0 110px; background: var(--paper); }
.changelog-page .changelog-shell { max-width: 960px; }
.changelog-page .direct-notice,
.changelog-page .empty-state,
.changelog-page .error-state {
  border-radius: 4px;
  border-color: #bfd2e3;
  color: #285f98;
  background: #e6f3fc;
}

/* --- Timeline rail --- */
.changelog-page .release-list {
  position: relative;
}
.changelog-page .release-list::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 167px;
  width: 1px;
  background: linear-gradient(180deg, var(--signal-green), var(--control-line) 12%, var(--control-line) 88%, transparent);
  content: "";
}
.changelog-page .release {
  grid-template-columns: 180px minmax(0, 1fr);
  border-color: transparent;
  padding: 20px 0;
}
.changelog-page .release::before {
  position: absolute;
  top: 32px;
  left: 164px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal-green);
  box-shadow: 0 0 0 5px rgba(86, 215, 163, .12);
  content: "";
  z-index: 1;
}
.changelog-page .release:first-child::before {
  top: 26px;
}
.changelog-page .release-content {
  border-radius: 10px;
  border: 1px solid var(--control-line);
  background: #fff;
  padding: 26px 30px;
  box-shadow: 0 2px 10px rgba(11, 16, 24, .04);
  transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
.changelog-page .release:hover .release-content {
  border-color: #b8cfe4;
  box-shadow: 0 8px 28px rgba(11, 16, 24, .07);
  transform: translateY(-2px);
}
.changelog-page .release-date,
.changelog-page .release-version {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.changelog-page .release-date {
  color: #6b7d8f;
  font-size: 12px;
}
.changelog-page .release-version {
  border-radius: 3px;
  border-color: #b8d2e7;
  color: #2869ad;
  background: #e3f1fc;
}
.changelog-page .release-title { color: #15202d; font-weight: 760; }
.changelog-page .release-permalink { border-radius: 3px; }
.changelog-page .release-permalink:hover,
.changelog-page .release-permalink:focus-visible { color: #2869ad; background: #e3f1fc; }
.changelog-page .release-markdown h3 {
  border-left-color: var(--signal-blue);
  color: #1a2c3d;
}
.changelog-page .release-markdown li::before { border-radius: 1px; background: var(--signal-blue); }
.changelog-page .release-markdown a { color: #2869ad; }
.changelog-page .empty-icon { border-radius: 4px; color: #2869ad; background: #e3f1fc; }
.changelog-page .error-state button { border-radius: 4px; background: var(--control-night); }
.changelog-page .site-footer {
  background: var(--control-night);
  border-top: 1px solid rgba(123, 199, 255, .12);
  padding: 36px 0;
}
.changelog-page .footer-inner { gap: 28px; }
.changelog-page .footer-brand { color: #e8f2fa; }
.changelog-page .footer-links {
  gap: 20px;
  font-size: 12px;
  color: #7e8fa1;
}
.changelog-page .footer-links a {
  transition: color .18s ease;
}
.changelog-page .footer-links a:hover { color: #d4e6f5; }
.changelog-page .copyright { color: #55637a; font-size: 11px; }
.changelog-page a:focus-visible,
.changelog-page button:focus-visible {
  outline: 3px solid rgba(123, 199, 255, .72);
  outline-offset: 4px;
}
@keyframes release-flash {
  0% { background: rgba(79, 130, 255, .1); box-shadow: 0 0 0 10px rgba(79, 130, 255, .1); }
  100% { background: transparent; box-shadow: 0 0 0 10px transparent; }
}

@media (max-width: 760px) {
  .changelog-page .shell { width: min(calc(100% - 30px), 1240px); }
  .changelog-page .page-hero { padding: 122px 0 70px; }
  .changelog-page .page-hero h1 { font-size: 38px; }
  .changelog-page .changelog-section { padding: 54px 0 78px; }
  .changelog-page .release { grid-template-columns: 1fr; }
  .changelog-page .release::before { top: 37px; right: 0; left: auto; }
  .changelog-page .release-list::before { display: none; }
  .changelog-page .release-content { padding: 20px 18px; }
}