/* pages/change-log.css — Change history (parent console, stage 11). Page-specific
 * styles only; the design system (tokens, panels, buttons, msg, legend, empty
 * state, spinner) lives in the shared webkit (kit.css). Everything here reuses
 * kit.css custom properties, works in light + dark, and at phone width with no
 * sideways scroll. */

.cl-head h1 { margin-bottom: 4px; }
.cl-intro { max-width: 60ch; margin-top: 0; }

/* filter bar */
.cl-filters { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.cl-filter { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; min-width: 0; }
.cl-filter-lbl { color: var(--text-muted); font-weight: 600; }
.cl-filter-sel { max-width: 240px; }

/* scoped (per-device) banner */
.cl-scope { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.cl-scope-clear { font-weight: 600; margin-left: auto; }

/* the change list — a plain vertical timeline of sentences */
.cl-list { list-style: none; margin: 0; padding: 0; }
.cl-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 2px; border-top: 1px solid var(--border);
}
.cl-list .cl-row:first-child { border-top: none; }
.cl-row-main { min-width: 0; flex: 1; }
.cl-sentence {
  font-size: 0.95rem; font-weight: 600; color: var(--text);
  /* site names and child/device names are user data: wrap, never overflow the
   * panel sideways on a phone. */
  overflow-wrap: anywhere; word-break: break-word;
}
.cl-time { font-size: 0.8rem; margin-top: 2px; }

/* a small colour dot marks who made the change (parent / support / automatic) */
.cl-dot { width: 9px; height: 9px; border-radius: 999px; flex: none; margin-top: 6px; background: var(--primary); }
.cl-dot.cl-k-parent { background: var(--primary); }
.cl-dot.cl-k-staff { background: var(--accent); }
.cl-dot.cl-k-system { background: var(--text-faint); }

/* "Load more" */
.cl-more { display: flex; justify-content: center; margin: 4px 0 var(--gap); }

/* compact "Recent changes" block on child / device detail pages */
.cl-recent-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cl-recent-head h2 { margin: 0; }
.cl-recent .cl-list { margin-top: 6px; }

@media (max-width: 640px) {
  .cl-filter-sel { max-width: none; width: 100%; }
  .cl-filter { width: 100%; }
  .cl-scope-clear { margin-left: 0; }
}