/* Menu → What's New (teachers/admins) — modal listing the changelog,
   also shown automatically after a new version ships. Reuses the
   shared .modal-overlay / .modal base (styles.css) and the site's
   dark-theme tokens, same look as .tm-modal (teachers.js). */
.cl-modal { width: 620px; max-width: 94vw; max-height: 86vh; overflow-y: auto; }
.cl-head { display: flex; align-items: center; justify-content: space-between; }
.cl-head h3 { margin-bottom: 8px; }
.cl-x { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; }
.cl-x:hover { color: var(--text); }
.cl-intro { font-size: 13px; margin-bottom: 16px; }

.cl-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 6px; }

.cl-entry {
  background: var(--bg-input);
  border: 1px solid var(--border-l);
  border-radius: 10px;
  padding: 14px 16px;
}
.cl-entry-new { border-color: color-mix(in srgb, var(--accent) 55%, var(--border-l)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }

.cl-entry-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.cl-version {
  font-family: 'Syne Mono', var(--mono, monospace);
  font-size: 13px; font-weight: 700; color: #7dd3fc;
  background: rgba(125,211,252,.12);
  padding: 2px 8px; border-radius: 999px;
}
.cl-badge-new {
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  color: #0d1117; background: var(--accent, #4f8ef7);
  padding: 2px 8px; border-radius: 999px;
}
.cl-date { color: var(--muted); font-size: 12px; margin-left: auto; white-space: nowrap; }

.cl-changes { margin: 0; padding-left: 20px; }
.cl-changes li { color: var(--text); font-size: 13.5px; line-height: 1.65; margin-bottom: 4px; }
.cl-changes li:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .cl-modal { width: 100%; padding: 20px 16px; }
  .cl-date { margin-left: 0; }
}