/* Uses the shared light/dark tokens; status is always expressed in text as well as color. */
#changelog{--cl-pending:#856014;--cl-pending-bg:#fff5d9;--cl-bug:#a43136;--cl-bug-bg:#fff0f0;--cl-good:#146f5d;--cl-good-bg:#eaf8f1}
:root[data-theme=dark] #changelog{--cl-pending:#f3d485;--cl-pending-bg:#362e1d;--cl-bug:#ffb5b8;--cl-bug-bg:#392125;--cl-good:#96dec7;--cl-good-bg:#17332c}
#changelog .cl-intro{padding:17px 20px;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:18px}
#changelog .cl-intro p{margin:5px 0;font-size:12px;line-height:1.8;color:var(--muted)}
#changelog .cl-intro strong{color:var(--ink)}
#changelog .cl-freshness{padding:10px 14px;border-left:3px solid var(--accent);background:var(--accent-soft);font-size:12px;line-height:1.8;margin:0 0 18px;border-radius:0 7px 7px 0}
#changelog .cl-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 20px}
#changelog .cl-summary button{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;padding:14px 17px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:12px}
#changelog .cl-summary strong{font-size:23px;font-variant-numeric:tabular-nums;color:var(--accent)}
#changelog .cl-summary button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}
#changelog .cl-tools{display:flex;align-items:end;gap:12px;flex-wrap:wrap;padding:17px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
#changelog .cl-tools label{display:flex;flex-direction:column;gap:6px;min-width:120px;font-size:12px;flex:1}
#changelog .cl-tools label:first-child{flex:3;min-width:240px}
#changelog .cl-tools input,#changelog .cl-tools select{width:100%;min-width:0;min-height:40px;padding:8px 10px;font-size:12px;box-sizing:border-box}
#changelog .cl-tools button{min-height:40px;padding:8px 12px;font-size:12px}
#changelog .cl-results-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin:17px 0;font-size:12px;color:var(--muted)}
#changelog .cl-month{font-size:16px;margin:25px 0 12px;color:var(--ink)}
#changelog .cl-list{list-style:none;margin:0;padding:0 0 0 22px;border-left:2px solid var(--line)}
#changelog .cl-list>li{position:relative;margin:0 0 16px}
#changelog .cl-list>li:before{content:'';position:absolute;left:-29px;top:27px;width:10px;height:10px;background:var(--accent);border:2px solid var(--bg);border-radius:50%}
#changelog .cl-entry{padding:19px 21px;background:var(--surface);border:1px solid var(--line);border-radius:12px;min-width:0;scroll-margin-top:90px}
#changelog .cl-entry:focus{outline:2px solid var(--accent);outline-offset:3px}
#changelog .cl-entry-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#changelog .cl-type{display:inline-block;color:var(--accent);background:var(--accent-soft);padding:3px 8px;border-radius:5px;font-size:11px}
#changelog .cl-entry time,#changelog .cl-meta{font-size:11px;color:var(--muted)}
#changelog .cl-entry h4{margin:12px 0 6px;font-size:17px;line-height:1.5;color:var(--ink)}
#changelog .cl-summary-text{margin:6px 0 15px;font-size:13px;line-height:1.8;color:var(--ink)}
#changelog .cl-states{display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,2fr);gap:10px}
#changelog .cl-state{border:1px solid var(--line);border-radius:8px;background:var(--soft);padding:12px 14px;min-width:0}
#changelog .cl-state>span{display:block;font-size:11px;color:var(--muted);margin-bottom:6px}
#changelog .cl-badge{display:inline-block;font-size:12px;border-radius:5px;padding:3px 8px;font-weight:600;color:var(--ink);background:var(--surface)}
#changelog .cl-badge[data-status=planned],#changelog .cl-badge[data-status=pending],#changelog .cl-badge[data-status=partial]{color:var(--cl-pending);background:var(--cl-pending-bg)}
#changelog .cl-badge[data-status=unresolved]{color:var(--cl-bug);background:var(--cl-bug-bg)}
#changelog .cl-badge[data-status=resolved],#changelog .cl-badge[data-status=applied],#changelog .cl-badge[data-status=reflected]{color:var(--cl-good);background:var(--cl-good-bg)}
#changelog .cl-state p{font-size:12px;line-height:1.8;margin:7px 0 0;color:var(--ink)}
#changelog .cl-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:13px}
#changelog .cl-links a,#changelog .cl-links button{font-size:11px;padding:6px 9px;border:1px solid var(--line);border-radius:6px;text-decoration:none;background:var(--surface);color:var(--cyan)}
#changelog details{margin-top:14px;border-top:1px solid var(--line);padding-top:10px;font-size:12px}
#changelog summary{cursor:pointer;color:var(--muted)}
#changelog .cl-history{margin:12px 0 0;padding-left:20px;color:var(--ink)}
#changelog .cl-history li{margin:7px 0;line-height:1.8}
#changelog .cl-history time{margin-right:8px}
#changelog .cl-empty{padding:35px 20px;text-align:center;border:1px dashed var(--line);border-radius:12px;background:var(--surface);color:var(--muted)}
#changelog .cl-empty button{display:block;margin:14px auto 0;padding:8px 14px}
@media(max-width:1000px){#changelog .cl-tools label:first-child{flex-basis:100%}}
@media(max-width:600px){#changelog .cl-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#changelog .cl-summary button{padding:11px 12px}#changelog .cl-tools{padding:12px;gap:10px}#changelog .cl-tools label{min-width:0;flex-basis:calc(50% - 10px)}#changelog .cl-tools label:first-child{min-width:0;flex-basis:100%}#changelog .cl-entry{padding:15px}#changelog .cl-states{grid-template-columns:1fr}#changelog .cl-list{padding-left:15px}#changelog .cl-list>li:before{left:-22px}#changelog .cl-entry h4{font-size:15px}#changelog .cl-summary-text{font-size:12px}}

#changelog .cl-badge[data-status=monitoring]{color:var(--cl-bug);background:var(--cl-bug-bg)}
#changelog .cl-original-sync{padding:12px 14px;margin-top:10px;border-left:3px solid var(--line);background:var(--soft);border-radius:6px;font-size:12px;line-height:1.8;color:var(--muted)}#changelog .cl-original-sync strong{color:var(--ink)}#changelog .cl-original-sync p{margin:4px 0 0}