/* Changelog (/changelog): area filters, the release timeline, and the
   "since your last visit" marker with its shark. Loaded by that page only. */

/* ─── Filters ─── */
.mlab-cl-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }
.mlab-cl-chip {
    display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px;
    border: 1px solid var(--mlab-edit-hairline-strong); background: var(--bs-body-bg); color: inherit;
    font-size: .8rem; cursor: pointer; transition: border-color .15s, background .15s;
}
.mlab-cl-chip span { font-size: .7rem; color: var(--mlab-text-secondary); font-variant-numeric: tabular-nums; }
.mlab-cl-chip:hover { border-color: var(--ins-body-color, #111827); }
.mlab-cl-chip.is-on { background: var(--ins-body-color, #111827); border-color: var(--ins-body-color, #111827); color: var(--bs-body-bg); }
.mlab-cl-chip.is-on span { color: inherit; opacity: .7; }
/* The tag on a change filters too. */
button.mlab-cl-tag { border: 0; cursor: pointer; }
button.mlab-cl-tag:hover { text-decoration: underline; }

/* ─── Timeline: days, and releases as dots on a line ─── */
.mlab-cl-day { position: relative; padding: .9rem 0 .2rem; }
.mlab-cl-day + .mlab-cl-day { border-top: 1px solid var(--mlab-edit-hairline); }
.mlab-cl-day-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .4rem; }
.mlab-cl-day-head time { font-weight: 700; font-size: .95rem; }
.mlab-cl-day-head span { font-size: .75rem; color: var(--mlab-text-secondary); }
.mlab-cl-release { position: relative; padding-left: 1.4rem; }
.mlab-cl-release::before {
    content: ''; position: absolute; left: 4px; top: 14px; bottom: -6px; width: 1px; background: var(--mlab-edit-hairline-strong);
}
.mlab-cl-day .mlab-cl-release:last-child::before { bottom: 1rem; }
.mlab-cl-release-head { display: flex; align-items: center; gap: .5rem; margin-left: -1.4rem; padding-top: .35rem; }
.mlab-cl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bs-body-bg); border: 2px solid var(--ins-body-color, #111827); flex: none; }
.mlab-cl-version { font-family: var(--mlab-edit-mono); font-size: .78rem; font-weight: 600; }
.mlab-cl-release .mlab-subblock { border-top: 0; padding: .55rem 0 .8rem; }

/* ─── Since your last visit ─── */
.mlab-cl-release.is-new .mlab-cl-dot { background: #d97706; border-color: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, .18); }
.mlab-cl-new { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .1rem .45rem; border-radius: 999px; background: rgba(217, 119, 6, .12); color: #b45309; }
.mlab-cl-since {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
    margin: .25rem 0 .5rem; padding: .7rem 1rem; border-radius: 12px;
    border: 1px solid rgba(217, 119, 6, .3); background: rgba(217, 119, 6, .06); font-size: .88rem;
}
.mlab-cl-since a { font-weight: 600; }

/* "You were here": the shark swims once along the line to where you stopped reading. */
.mlab-cl-here { position: relative; display: flex; align-items: flex-end; gap: .6rem; margin: .6rem 0 .3rem; padding-top: 4.4rem; overflow: hidden; }
.mlab-cl-here::after { content: ''; position: absolute; left: 0; right: 0; bottom: .45rem; border-top: 1px dashed rgba(217, 119, 6, .55); z-index: 0; }
.mlab-cl-here__label { position: relative; z-index: 1; background: var(--bs-body-bg); padding-right: .5rem; font-size: .75rem; font-weight: 600; color: #b45309; }
.mlab-cl-shark {
    position: absolute; top: 0; left: 0; margin: 0; z-index: 1;
    font-family: var(--mlab-edit-mono); font-size: 12px; line-height: 1.1; color: #b45309;
    white-space: pre; pointer-events: none; opacity: 0;
}
.mlab-cl-here.is-swimming .mlab-cl-shark { animation: mlab-cl-swim 3.2s ease-in-out 1 forwards; }
@keyframes mlab-cl-swim {
    0% { transform: translateX(-120px); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translateX(calc(var(--cl-swim, 400px) - 140px)); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .mlab-cl-shark, .mlab-cl-here.is-swimming .mlab-cl-shark { animation: none; opacity: 1; transform: translateX(calc(var(--cl-swim, 400px) - 140px)); }
}