/* Settings > Change log (session 309, Part 4b). Five columns on a desktop; a stacked card per change on a phone. */
.cl .cl-filters{ display:flex; gap:var(--s4); align-items:flex-end; justify-content:space-between; flex-wrap:wrap; margin-bottom:var(--s3) }
.cl .cl-chips{ margin-top:0 }
.cl .cl-person{ display:flex; flex-direction:column; gap:4px; min-width:200px }
.cl .cl-person select{ min-height:36px }
.cl .cl-since{ font-size:12.5px; color:var(--muted); margin-bottom:var(--s3) }
.cl .cl-list{ display:flex; flex-direction:column }
.cl .cl-row{ display:grid; grid-template-columns:minmax(0,9rem) minmax(0,8rem) minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); gap:var(--s3);
  padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px; line-height:1.45; align-items:start }
.cl .cl-hd{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); padding-top:0 }
.cl .cl-when{ color:var(--muted) }
.cl .cl-what{ color:var(--ink); overflow-wrap:anywhere }
.cl .cl-old, .cl .cl-new{ overflow-wrap:anywhere }
.cl .cl-old{ color:var(--muted) }
.cl .cl-new{ color:var(--ink); font-weight:550 }
.cl .cl-lbl{ display:none }
.cl .cl-kind{ display:inline-block; margin-left:4px; padding:0 6px; border-radius:999px; font-size:11px; font-weight:600;
  border:1px solid var(--content-line); color:var(--muted); vertical-align:1px }
.cl .cl-more{ padding-top:var(--s3); font-size:12.5px }
@media (max-width: 900px){
  .cl .cl-hd{ display:none }
  .cl .cl-row{ grid-template-columns:minmax(0,1fr); gap:2px; padding:12px 0 }
  .cl .cl-when{ font-size:12.5px }
  .cl .cl-who{ font-weight:550 }
  .cl .cl-lbl{ display:inline; color:var(--muted); font-weight:400 }
  .cl .cl-person{ min-width:0; width:100% }
}