/* ═══════════════════════════════════════════════════════════════════════════
   Shared changelog presentation — /downloads/ and /changelog render the same
   release feed, so they share one stylesheet. Editing the timeline in one
   place is the whole point: the two views drifted for months when each page
   owned a private copy of the markup.

   Pairs with /assets/js/agnt-changelog.js. Depends on main.css for the
   --line / --muted / --pink / --cyan / --green / --ink / --soft tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dynamic version chrome ───────────────────────────────────────── */
.ver-pill{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border:1px solid var(--line);background:#fff;border-radius:999px;font-size:13px;font-weight:750;color:var(--ink);text-decoration:none;transition:.15s ease}
.ver-pill:hover{border-color:var(--ink);box-shadow:0 6px 18px rgba(17,17,24,.07)}
.ver-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 3px rgba(229,61,143,.15);flex-shrink:0}
.ver-pill .lead{font-family:ui-monospace,monospace;font-weight:700}
.ver-pill .rest{color:var(--muted);font-weight:700}
.ver-pill.is-stale{color:var(--muted);pointer-events:none}
.ver-pill.is-stale .dot{background:#c9c8d1;box-shadow:none}
.button.is-disabled{pointer-events:none;opacity:.45}

/* ── Changelog ────────────────────────────────────────────────────── */
.cl-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:28px 0 30px}
.cl-stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;justify-content:flex-end}
.cl-stat b{display:flex;align-items:flex-end;min-height:34px;font-size:clamp(26px,3.2vw,34px);font-weight:850;letter-spacing:-.045em;line-height:1;color:var(--ink)}
.cl-stat b.is-text{font-size:clamp(19px,2.2vw,24px);letter-spacing:-.03em}
.cl-stat span{display:block;margin-top:9px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.cl-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.cl-search{flex:1 1 260px;position:relative}
.cl-search input{width:100%;height:44px;padding:0 38px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit;font-size:14px;color:var(--ink)}
.cl-search input::placeholder{color:#9d9ca8}
.cl-search input:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px rgba(229,61,143,.12)}
.cl-mag{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;display:flex}
.cl-mag svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.cl-clear{position:absolute;right:9px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:17px;line-height:1;padding:5px 8px;border-radius:6px;display:none}
.cl-clear:hover{background:var(--soft);color:var(--ink)}
.cl-filters{display:flex;gap:8px;flex-wrap:wrap}
.cl-pill{border:1px solid var(--line);background:#fff;border-radius:999px;padding:0 15px;height:44px;font:inherit;font-size:12.5px;font-weight:750;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.15s ease}
.cl-pill:hover{border-color:#b8b6c4;color:var(--ink)}
.cl-pill .n{font-size:11px;font-weight:850;padding:2px 7px;border-radius:999px;background:var(--soft);color:var(--muted)}
.cl-pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.cl-pill[aria-pressed="true"] .n{background:rgba(255,255,255,.18);color:#fff}
.cl-meta-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:20px 0 26px;font-size:12.5px;color:var(--muted)}
.cl-meta-row .cl-btnrow{display:flex;gap:8px}
.cl-linkbtn{border:1px solid var(--line);background:#fff;font:inherit;font-size:12px;font-weight:750;color:var(--ink);cursor:pointer;padding:6px 12px;border-radius:8px;transition:.15s ease}
.cl-linkbtn:hover{border-color:var(--ink);background:var(--ink);color:#fff}

/* Left gutter only. The 34px is room for the rail and its release nodes; the
   right side has nothing to make room for, and a symmetric inset pulled every
   card 34px short of the search and filter controls sitting directly above. */
.cl-timeline{position:relative;padding:0 0 0 34px}
.cl-timeline:before{content:"";position:absolute;left:6px;top:35px;bottom:6px;width:2px;border-radius:2px;background:#d7d5de}
/* No overflow:hidden here — it clips the timeline node marker, which is painted
   by ::before at left:-33px. The children carry their own rounding instead. */
.cl-rel{position:relative;margin-bottom:14px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:border-color .18s ease,box-shadow .18s ease}
.cl-rel:before{content:"";position:absolute;left:-33px;top:30px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid #b9b6c4;box-shadow:0 0 0 4px var(--soft)}
.cl-rel.is-latest{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink)}
.cl-rel.is-latest:before{background:var(--pink);border-color:var(--pink);box-shadow:0 0 0 4px var(--soft),0 0 0 7px rgba(229,61,143,.18)}
.cl-rel.is-open{box-shadow:0 14px 40px rgba(17,17,24,.07)}
.cl-relhead{width:100%;border:0;border-radius:13px;background:none;font:inherit;text-align:left;padding:22px 28px;cursor:pointer;display:flex;align-items:flex-start;gap:18px}
.cl-relhead:hover{background:var(--soft)}
.cl-vtag{flex-shrink:0;font-family:ui-monospace,monospace;font-size:13px;font-weight:800;color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:6px 10px;line-height:1}
.cl-rel.is-latest .cl-vtag{background:var(--pink);border-color:var(--pink);color:#fff}
.cl-relbody-head{flex:1;min-width:0}
.cl-reltitle{display:block;font-size:18px;font-weight:800;letter-spacing:-.025em;color:var(--ink);margin:0 0 8px;line-height:1.3;max-width:74ch}
.cl-relmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.cl-type{font-size:9.5px;font-weight:850;letter-spacing:.09em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.cl-type.minor{border-color:var(--cyan);color:#0a7f93}
.cl-type.major{border-color:var(--pink);color:var(--pink)}
.cl-count{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700}
.cl-count i{width:6px;height:6px;border-radius:50%;font-style:normal}
.cl-count.new i{background:var(--pink)}
.cl-count.updated i{background:var(--cyan)}
.cl-count.bug i{background:var(--green)}
.cl-chev{flex-shrink:0;color:var(--muted);font-size:13px;transition:transform .2s ease,background .15s ease;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--soft);align-self:center}
.cl-relhead:hover .cl-chev{background:#eceaf1;color:var(--ink)}
.cl-rel.is-open .cl-chev{transform:rotate(180deg)}
.cl-relbody{display:none;padding:0 28px 24px;border-top:1px solid var(--line)}
.cl-rel.is-open .cl-relbody{display:block}
.cl-group{margin-top:34px}
.cl-grouptitle{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:850;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
/* Shape carries the status as well as hue — cyan and green are too close to
   rely on colour alone. Circle = new, diamond = improved, square = fixed. */
.cl-grouptitle i,.cl-chg li:before{width:7px;height:7px;font-style:normal;flex-shrink:0}
.cl-grouptitle.new i,.cl-chg.new li:before{background:var(--pink);border-radius:50%}
.cl-grouptitle.updated i,.cl-chg.updated li:before{background:var(--cyan);border-radius:1px;transform:rotate(45deg)}
.cl-grouptitle.bug i,.cl-chg.bug li:before{background:var(--green);border-radius:1px}
/* Two columns on wide cards: a 60-65ch measure is right for the prose, but a
   single such column inside a 1100px card strands half the width. Multi-column
   (not grid) so the two columns self-balance — grid row-locks, which leaves
   ragged tails and stuttering gaps whenever an item wraps. */
.cl-chg{list-style:none;margin:0;padding:0;columns:2;column-gap:68px}
.cl-chg li{position:relative;padding-left:15px;font-size:14px;line-height:1.55;color:#363642;break-inside:avoid;margin-bottom:11px}
.cl-chg li:last-child{margin-bottom:0}
.cl-chg li:before{content:"";position:absolute;left:0;top:9px;background:var(--line)}
.cl-chg.updated li:before{top:9.5px}
.cl-chg mark{background:rgba(229,61,143,.16);color:var(--ink);border-radius:3px;padding:0 2px}
/* Non-interactive metadata: tinted, square-ish, no border — must not read as a
   button sitting next to the real download buttons. */
.cl-tag{font-size:10.5px;font-weight:800;letter-spacing:.02em;color:#0a7f93;background:rgba(0,184,217,.12);border-radius:5px;padding:3px 8px}
.cl-dl{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.cl-dl-label{font-size:10.5px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.cl-dl a{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:750;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 11px;text-decoration:none;transition:.15s ease}
.cl-dl a:before{content:"↓";font-size:11px;color:var(--muted)}
.cl-dl a:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.cl-dl a:hover:before{color:#fff}
.cl-dl .cl-nodl{font-size:11.5px;color:var(--muted)}
.cl-empty{border:1px dashed var(--line);border-radius:14px;padding:40px;text-align:center;color:var(--muted);font-size:14px;background:#fff}
.cl-skeleton{height:88px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(90deg,#fff,var(--soft),#fff);background-size:200% 100%;animation:clshimmer 1.3s linear infinite;margin-bottom:14px}
@keyframes clshimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Roadmap ──────────────────────────────────────────────────────────
   Only rendered where a #clRoadmap grid exists. What is shipped is above;
   this is explicitly what is not, so it is styled to read as a different
   kind of claim — no timeline node, no download row, no version tag. */
.cl-roadmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:26px}
.cl-road{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:flex;align-items:flex-start;gap:12px}
.cl-road i{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:6px;font-style:normal;background:#c9c8d1}
.cl-road.in-progress i{background:var(--cyan);box-shadow:0 0 0 3px rgba(0,184,217,.15)}
.cl-road-name{font-size:15px;font-weight:750;letter-spacing:-.015em;color:var(--ink);line-height:1.35}
.cl-road-status{display:block;margin-top:6px;font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cl-road.in-progress .cl-road-status{color:#0a7f93}

@media(max-width:900px){
  .cl-chg{columns:1}
  .cl-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cl-timeline{padding-left:0}
  .cl-timeline:before,.cl-rel:before{display:none}
  .cl-relhead{padding:18px;gap:12px}
  .cl-relbody{padding:0 18px 18px}
}