/* Avakode Hub — /changelog/ (lane 5.1). Loaded on that page only (inc/changelog.php). The rhythm of /about/ and the family pages:
   a 72 px bar, the rail on the left (--hub-gut), a section per plugin split by hairlines, type first; no shadows, no glass.
   What the page says is in page-changelog.php and inc/changelog.php; nothing here is a number or a name. */

.hub-chlog__intro { position: relative; padding: 88px 0 48px; }
body.hub-page .hub-chlog__title {
  max-width: 14ch; margin: 16px 0 0; overflow-wrap: break-word;
  font-size: clamp(54px, 8.4vw, 124px); line-height: .94; letter-spacing: -.035em;
}
.hub-chlog__lead { max-width: 54ch; margin: 28px 0 0; color: var(--fg-2); font-size: 19px; }

/* the jump list: one chip per plugin that has a section */
.hub-chlog__jump ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 0; padding: 0; list-style: none; }
.hub-chlog__jump a {
  display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 4px;
  font: 500 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--fg-2);
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.hub-chlog__jump a:hover { color: var(--fg); border-color: var(--signal-hot); }

.hub-chlog__sec { padding: 56px 0 64px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--hub-bar) + 16px); }
.hub-chlog__col { min-width: 0; }
.hub-chlog__empty { margin: 0; color: var(--fg-2); font-size: 17px; }

.hub-chlog__sechead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin: 0 0 28px; }
body.hub-page .hub-chlog__h2 { margin: 0; font-size: clamp(28px, 3.2vw, 40px); line-height: 1; letter-spacing: -.03em; overflow-wrap: anywhere; }
.hub-chlog__latest { margin: 0; color: var(--muted); font: 500 12px/1.6 var(--mono); letter-spacing: .06em; }
.hub-chlog__latest b { color: var(--signal-hot); font-weight: 500; }

/* an entry: a <details> row split by hairlines — version, type, date, then the title; the body under it */
.hub-chlog__list { border-top: 1px solid var(--line); }
.hub-chlog__entry { border-bottom: 1px solid var(--line); }
.hub-chlog__sum {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: baseline; gap: 6px 16px; padding: 20px 0; cursor: pointer; list-style: none;
}
.hub-chlog__sum::-webkit-details-marker { display: none; }
.hub-chlog__sum::after {
  content: "+"; grid-column: 4; grid-row: 1; align-self: start; color: var(--muted); font: 500 16px/1 var(--mono);
  transition: color .4s var(--ease);
}
.hub-chlog__entry[open] > .hub-chlog__sum::after { content: "\2212"; color: var(--signal-hot); }
.hub-chlog__sum:hover::after { color: var(--fg); }
.hub-chlog__ver { font: 500 13px/1.4 var(--mono); letter-spacing: .04em; color: var(--signal-hot); white-space: nowrap; }
.hub-chlog__type {
  justify-self: start; padding: 1px 8px; border: 1px solid var(--line); border-radius: 4px;
  font: 500 11px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); white-space: nowrap;
}
.hub-chlog__type--feature, .hub-chlog__type--security { border-color: var(--signal-hot); color: var(--signal-hot); }
.hub-chlog__date { grid-column: 3; font: 500 12px/1.6 var(--mono); letter-spacing: .04em; color: var(--muted); }
body.hub-page .hub-chlog__etitle {
  grid-column: 1 / -1; margin: 0; max-width: 62ch; font: 500 19px/1.3 var(--display); letter-spacing: -.01em; color: var(--fg); overflow-wrap: anywhere;
}

.hub-chlog__body { max-width: 72ch; padding: 0 0 28px; color: var(--fg-2); font-size: 16px; overflow-wrap: anywhere; }
.hub-chlog__body p { margin: 0 0 12px; }
.hub-chlog__body ul { margin: 0 0 12px; padding-left: 20px; }
.hub-chlog__body li { margin: 0 0 10px; }
.hub-chlog__body li::marker { color: var(--muted); }
.hub-chlog__body strong { color: var(--fg); font-weight: 600; }
.hub-chlog__body code { display: inline-block; max-width: 100%; padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; font: 500 .88em/1.4 var(--mono); color: var(--fg); overflow-wrap: anywhere; }
body.hub-page .hub-chlog__body a { color: var(--signal-hot); text-decoration: underline; text-decoration-color: rgba(169,139,255,.4); text-underline-offset: 4px; transition: text-decoration-color .4s var(--ease); }
body.hub-page .hub-chlog__body a:hover { text-decoration-color: var(--signal-hot); }

@media (max-width: 960px) {
  .hub-chlog__intro { padding: 56px 0 32px; }
  .hub-chlog__lead { margin-top: 20px; font-size: 17px; }
  .hub-chlog__jump ul { margin-top: 24px; }
  .hub-chlog__sec { padding: 40px 0 48px; }
}
@media (max-width: 560px) {
  body.hub-page .hub-chlog__title { font-size: clamp(40px, 11vw, 54px); }
  .hub-chlog__sum { grid-template-columns: auto minmax(0, 1fr) auto; }
  .hub-chlog__date { grid-column: 1 / -1; }
  .hub-chlog__sum::after { grid-column: 3; }
  body.hub-page .hub-chlog__etitle { font-size: 17px; }
  .hub-chlog__body { font-size: 15px; }
  .hub-chlog__body code { font-size: .8em; }
}