/*
  Adapted from /preview/assets/css/components/checklist.css.

  The static build wrapped each item's icon in its own <span><svg></span>
  next to the text. Checklist items are now core/list-item blocks (real
  editable rich text, per "use core blocks wherever practical" /
  "don't hard-code ordinary content"), and embedding an inline <svg>
  inside that rich text carries the same risk buttons.css already
  documented — WordPress can flag it as unexpected content on save. So
  the red circle + check mark is drawn entirely with ::before/::after
  on the <li> itself (background-color circle + a currentColor mask for
  the check), the same technique used for button/card-link arrows.
  Reset rules use the doubled `.checklist.wp-block-list` /
  `.checklist__item` selectors defensively — core/list's own block
  styles are class-based (like the is-layout-* rules that broke the
  header nav) and a bare `ul{list-style:none}` from base.css may not
  reliably out-specificity them.
*/

.checklist.wp-block-list {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  list-style: none;
  margin: 0;
  padding: 0;
}

.checklist__item {
  position: relative;
  margin: 0;
  padding-left: 2.25rem;
  min-height: 1.5rem;
  display: block;
  font-weight: 600;
  color: var(--wp--preset--color--near-black);
  line-height: 1.4;
}

/* the red-tinted circle */
.checklist__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgba(214, 20, 15, 0.1);
}

/* the check mark, masked so it stays the accessible red regardless of
   where this pattern is reused */
.checklist__item::after {
  content: "";
  position: absolute;
  left: 0.325rem;
  top: calc(0.1em + 0.325rem);
  width: 0.85rem;
  height: 0.85rem;
  background-color: var(--c-red-solid);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 13 9.5 18.5 20 6'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 13 9.5 18.5 20 6'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
}