/* Changelog (changes.php), ontwerp A "tijdlijn", okt 2026. Laadt na home.css. Vervangt css/changes.css. */
.vxh > .in{min-width:0;width:100%}
.vxh .cg-top{padding:56px 0 28px;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:end}
.vxh .cg-top .lead{margin-bottom:0}
.vxh .cg-meta{display:flex;gap:6px 18px;flex-wrap:wrap;color:var(--d-mut);font-size:14px;margin-top:18px}
.vxh .cg-meta b{color:var(--d-ink)}
.vxh .cg-notify{border:1px solid var(--d-line);background:var(--d-card);border-radius:10px;padding:20px}
.vxh .cg-notify h2{font-size:18px;margin:0 0 4px}
.vxh .cg-notify > p{margin:0 0 14px;color:var(--d-mut);font-size:14px}
.vxh .cg-notify small{display:block;color:var(--d-faint);font-size:12.5px;margin-top:8px}
.vxh .cg-notify button.btn{font:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.vxh .cg-notify button.btn:disabled{opacity:.6;cursor:default}
.vxh .cg-state{margin:0 0 12px;font-size:14px;color:var(--d-mut)}
.vxh .cg-msg{margin:0 0 14px;padding:10px 12px;border-radius:9px;font-size:13.5px;border:1px solid var(--d-line);color:var(--d-mut)}
.vxh .cg-msg-success{border-color:rgba(61,220,151,.35);color:#9be8c5}
.vxh .cg-msg-error{border-color:rgba(239,107,107,.4);color:#f3a5a5}
.vxh .cg-msg-warn{border-color:rgba(245,196,106,.4);color:#f5d391}
.vxh .cg-msg-info{border-color:rgba(89,168,255,.4);color:#a9cfff}
.vxh .cg-admin-note{margin-top:16px}

.vxh .cg-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px}
.vxh .cg-dot.new{background:#3ddc97}
.vxh .cg-dot.improved{background:#59a8ff}
.vxh .cg-dot.fixed{background:#f5c46a}
.vxh .cg-dot.removed{background:#ef6b6b}

.vxh .cg-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;padding:16px 0;border-top:1px solid var(--d-line);border-bottom:1px solid var(--d-line)}
.vxh .cg-chips{display:flex;flex-wrap:wrap;gap:8px}
.vxh .cg-chip{border:1px solid var(--d-strong);border-radius:999px;padding:6px 14px;font-size:14px;color:var(--d-mut);font-weight:600;text-decoration:none}
.vxh .cg-chip:hover{color:var(--d-ink)}
.vxh .cg-chip span{color:var(--d-faint);font-weight:500;margin-left:4px}
.vxh .cg-chip.on{color:var(--d-ink);border-color:var(--d-blue)}
.vxh .cg-search{display:flex;gap:8px;width:min(520px,100%)}
.vxh .cg-search input,.vxh .cg-search select{height:44px;border-radius:9px;border:1px solid var(--d-strong);background:var(--d-card);color:var(--d-ink);padding:0 12px;font:inherit;font-size:14.5px}
.vxh .cg-search input{flex:1;min-width:0}
.vxh .cg-search input:focus,.vxh .cg-search select:focus{border-color:var(--d-blue);outline:none}
.vxh .cg-search button.btn{font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;height:44px}
.vxh .cg-clear{margin:12px 0 0;font-size:14px}
.vxh .cg-clear a,.vxh .cg-empty a{color:var(--d-blue)}

.vxh .cg-feed{list-style:none;margin:0 0 72px;padding:0}
.vxh .cg-rel{display:grid;grid-template-columns:180px minmax(0,1fr);gap:32px;padding:28px 0;border-bottom:1px solid var(--d-line);scroll-margin-top:90px}
.vxh .cg-rel-side{display:flex;flex-direction:column;align-items:flex-start}
.vxh .cg-ver{font:650 24px var(--f-display);letter-spacing:-.02em}
.vxh .cg-date{display:block;color:var(--d-faint);font-size:13.5px;margin-top:2px}
.vxh .cg-new{display:inline-block;margin-top:8px;font-size:11.5px;font-weight:700;color:var(--d-ink-b);background:var(--d-blue);border-radius:999px;padding:2px 9px}
.vxh .cg-kind{margin-bottom:16px}
.vxh .cg-kind:last-child{margin-bottom:0}
.vxh .cg-kind h3{font:600 14px var(--f-body);letter-spacing:0;margin:0 0 6px;color:var(--d-ink)}
.vxh .cg-kind ul{margin:0;padding:0 0 0 15px;color:var(--d-mut);display:grid;gap:4px;overflow-wrap:anywhere}
.vxh .cg-empty{border:1px solid var(--d-line);background:var(--d-card);border-radius:10px;padding:28px;margin:24px 0 72px;max-width:620px}
.vxh .cg-empty h2{font-size:22px;margin:0 0 6px}
.vxh .cg-empty p{margin:0;color:var(--d-mut)}
.vxh .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:900px){
  .vxh .cg-top{grid-template-columns:1fr;padding-top:40px;gap:24px}
  .vxh .cg-rel{grid-template-columns:1fr;gap:12px}
  .vxh .cg-rel-side{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
  .vxh .cg-new{margin-top:0}
}
@media (max-width:480px){
  .vxh .cg-search{flex-wrap:wrap}
  .vxh .cg-search input{flex-basis:100%}
}