/* Чек-лист проверки: пункты по порядку и итог под ними. */
@layer theme.components {

.checklist { display: grid; margin: 24px 0 0; padding: 0; gap: 22px; list-style: none; }
.checklist__item {
  display: grid;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--color-border);
  gap: 6px 0;
  grid-template-columns: 44px minmax(0, 1fr);
}
.checklist__num {
  grid-row: span 2;
  color: var(--color-accent);
  font-size: var(--font-size-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.checklist__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.checklist__title { font-weight: 600; }
.checklist__tag {
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--color-bg-section-alt);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  font-weight: 600;
}
.checklist__tag--accent { background: var(--color-bg-accent-soft); color: var(--color-accent-text); }
.checklist__text { max-inline-size: var(--width-text); color: var(--color-text-body); }

.checklist-result {
  margin-block-start: 32px;
  padding: 24px;
  border: 1px solid var(--color-accent-line);
  border-radius: var(--radius-md);
  background: var(--color-bg-accent-soft);
}
.checklist-result__title { margin-block-end: 12px; }
.checklist-result__list { display: grid; margin: 0; padding-inline-start: 20px; gap: 6px; color: var(--color-text-body); }
.checklist-result__note { margin-block-start: 12px; color: var(--color-text-muted); font-size: var(--font-size-caption); }

@media (max-width: 860px) {
  .checklist__item { grid-template-columns: minmax(0, 1fr); }
  .checklist__num { grid-row: auto; }
}

}