/*
 * Qualims — публичный сайт: changelog (Фаза 5, SITE_IMPROVEMENT_PLAN.md).
 *
 * Грузится только на /resources/changelog и на лендинге (лента «последних
 * обновлений») — не в общий site.css (логика Р12/Р14/Р15/Р17: код, нужный
 * двум страницам, не раздувает каждую страницу сайта). Всё на токенах
 * tokens.css → автоматически совпадает с языком приложения и dark-режимом.
 */

/* ── Бейдж версии ── */
.cl-ver {
  display: inline-flex; align-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: var(--weight-bold); font-size: var(--text-xs);
  color: var(--accent); background: var(--accent-subtle);
  border: 1px solid var(--accent-glow); border-radius: var(--radius-full);
  padding: .2em .7em; letter-spacing: .02em; white-space: nowrap;
}
.cl-ver--lg { font-size: var(--text-sm); padding: .25em .85em; }

/* ── Ссылки/кнопки шапки (общие для ленты и страницы) ── */
.cl-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--accent); color: #fff; text-decoration: none;
  border-radius: var(--radius-full); padding: .5em 1.1em;
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  box-shadow: 0 4px 18px var(--accent-glow); min-height: 44px;
  transition: background var(--motion-slow), box-shadow var(--motion-slow);
}
.cl-btn:hover { background: var(--accent-dark); color: #fff; box-shadow: 0 6px 24px rgba(13,148,136,.4); }
.cl-rss {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--accent); text-decoration: none; background: var(--accent-subtle);
  border: 1px solid var(--accent-glow); border-radius: var(--radius-full);
  padding: .5em .95em; font-size: var(--text-sm); font-weight: var(--weight-semibold);
  min-height: 44px;
  transition: border-color var(--motion-slow), background var(--motion-slow);
}
.cl-rss:hover { border-color: var(--accent); background: var(--accent-glow); color: var(--accent); }

/* ════════════════════════════════════════════════════════════════
 *  ЛЕНТА НА ГЛАВНОЙ (3 свежие версии)
 * ════════════════════════════════════════════════════════════════ */
.cl-feed-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; }

.cl-card {
  display: flex; flex-direction: column; height: 100%; text-decoration: none;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), var(--glass-specular);
  padding: 1.4rem 1.5rem;
  transition: box-shadow var(--motion-slow), transform var(--motion-slow), border-color var(--motion-slow);
}
[data-theme="dark"] .cl-card { background: var(--glass-bg-card); border-color: var(--glass-border); }
.cl-card:hover {
  box-shadow: var(--shadow-lg), var(--glass-specular);
  border-color: rgba(13,148,136,.30); transform: translateY(-3px);
}
.cl-card__top { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.cl-card__date { font-size: var(--text-xs); color: var(--muted); }
.cl-card__sections { list-style: none; padding: 0; margin: 0 0 1rem; flex: 1 1 auto; }
.cl-card__sections li {
  position: relative; padding: .34rem 0 .34rem 1rem;
  font-size: var(--text-sm); color: var(--body); line-height: 1.45;
  border-bottom: 1px solid var(--border);
}
.cl-card__sections li:last-child { border-bottom: none; }
.cl-card__sections li::before {
  content: ''; position: absolute; left: 0; top: .8em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.cl-card__more { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--accent); margin-top: auto; }
.cl-card:hover .cl-card__more { color: var(--accent-dark); }

/* ════════════════════════════════════════════════════════════════
 *  СТРАНИЦА /resources/changelog (таймлайн версий)
 * ════════════════════════════════════════════════════════════════ */
.cl-timeline { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; }
.cl-entry {
  position: relative; scroll-margin-top: 92px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), var(--glass-specular);
  padding: 1.5rem 1.75rem;
}
[data-theme="dark"] .cl-entry { background: var(--glass-bg-card); border-color: var(--glass-border); }
.cl-entry__head {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding-bottom: .9rem; margin-bottom: .4rem; border-bottom: 1px solid var(--border);
}
.cl-date { font-size: var(--text-sm); color: var(--muted); }
.cl-anchor {
  margin-left: auto; color: var(--muted); opacity: 0; text-decoration: none;
  font-size: 1.2rem; line-height: 1;
  transition: opacity var(--motion-slow), color var(--motion-slow);
}
.cl-entry:hover .cl-anchor { opacity: 1; }
.cl-anchor:hover { color: var(--accent); }

/* Рендер markdown-тела версии */
.cl-body h3 {
  font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--ink);
  margin: 1.3rem 0 .55rem; letter-spacing: -.2px;
}
.cl-body h3:first-child { margin-top: .55rem; }
.cl-body ul { list-style: none; padding: 0; margin: 0 0 .6rem; }
.cl-body li {
  position: relative; padding: .3rem 0 .3rem 1.15rem;
  font-size: var(--text-sm); color: var(--body); line-height: 1.55;
}
.cl-body li::before {
  content: ''; position: absolute; left: 0; top: .72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.cl-body p { margin: 0 0 .6rem; font-size: var(--text-sm); color: var(--body); line-height: 1.6; }
.cl-body strong { color: var(--ink); font-weight: var(--weight-semibold); }
.cl-body em { color: var(--muted); }
.cl-body a { color: var(--accent); }

@media (max-width: 575px) {
  .cl-entry { padding: 1.25rem 1.15rem; }
  .cl-anchor { opacity: 1; }  /* на тач-устройствах hover нет — показываем всегда */
}

@media (prefers-reduced-motion: reduce) {
  .cl-card, .cl-btn, .cl-rss, .cl-anchor { transition: none; }
  .cl-card:hover { transform: none; }
}