/* qa-tools — /checks: список проверок с отметками.
   Обычный tool.css не знает про чекбоксы — своя разметка только под них. */

.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}

.checklist__item{border-radius:var(--radius-md);
  border:1px solid var(--border-hairline);background:var(--surface-app);
  transition:background-color var(--dur-theme) var(--ease-theme),
             border-color var(--dur-theme) var(--ease-theme)}

/* Шрифт задан явно: в этой дизайн-системе он живёт на компонентах, а не
   на body, и блок без font: молча наследует Times New Roman. Именно это и
   случилось с пунктами чек-листа — поймано 2026-09-02 замером в DOM. */
.checklist__item label{display:flex;align-items:flex-start;gap:var(--space-5);
  padding:var(--space-4) var(--space-5);cursor:pointer;
  font:var(--fw-regular) var(--text-body-sm)/1.5 var(--font-ui);color:var(--text-body)}

/* Чекбокс рисуем сами, а не отдаём его движку браузера.
   Причина — вспышка при смене темы. Нативный чекбокс красится движком по
   color-scheme, а он переключается мгновенно, в один кадр: белая коробка
   выскакивала на фоне панели, который в этот момент ещё ехал свои 340ms
   от тёмного значения. accent-color тем же кадром прыгал к новому цвету —
   браузеры его не интерполируют. Общее правило theme-anim (base.css)
   перечисляет свойства поимённо и до нативной отрисовки не достаёт в
   принципе. Своя коробка — обычные background-color и border-color,
   поэтому она уезжает синхронно со всей страницей. */
.checklist__item input{flex:0 0 auto;position:relative;
  width:17px;height:17px;margin-top:3px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
  background:var(--surface-input)}

.checklist__item input:checked{background:var(--accent-fill);border-color:var(--accent-fill)}

/* Галочка — две стороны рамки, повёрнутые на 45°: рисовать её так дешевле,
   чем тащить картинку, и цвет остаётся токеном, а не зашит в файл. */
.checklist__item input:checked::after{content:"";position:absolute;
  left:4px;top:.5px;width:5px;height:9px;
  border:solid var(--on-accent);border-width:0 2px 2px 0;
  transform:rotate(45deg)}

/* Нативный ободок фокуса уходит вместе с appearance — возвращаем свой,
   иначе с клавиатуры не видно, на каком пункте стоишь. */
.checklist__item input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.checklist__item span{font:var(--fw-regular) var(--text-body-sm)/1.5 var(--font-ui);
  color:var(--text-body);cursor:pointer}

/* Отмеченный пункт гаснет, а не исчезает: список проверок нужен целиком
   до конца тестирования, вычёркивание — это прогресс, а не фильтр. */
.checklist__item.is-done span{color:var(--text-ghost);text-decoration:line-through}