/*
The ticked list. A round marker with a check inside it and a line of text beside it — the design
uses it for what a treatment includes, and it is the first list of its kind on the site.

A component and not a rule inside the block that needed it first, which is the standing argument
the arrow, the rating and the pin already make: this list belongs to every service page and the
step, the marker and the type are one decision rather than one per block.

It knows nothing about where it stands. The block that uses it says how much room it takes and
what sits above it; nothing here refers to a block, and the entrance is a class the block hands
in rather than something this file arranges.

The circle is the marker element's own box — filled and rounded here — and only the check itself
is drawn in the SVG. So one path is correct at any marker size, and the stroke, being in viewBox
units, thins with the glyph instead of staying 2.1px on a smaller one. See salt_md_check_list()
in inc/helpers.php for where the geometry was measured.
*/
.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--check-list-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
The row is given a height rather than left to its contents. The design sets a row at 24.02 and a
step at 36.02 while the tallest thing in the row — the marker — is 22, so the two numbers only
come out right if the row states the height the design gives it and the gap carries the rest.
*/
.check-list__item {
  display: flex;
  align-items: center;
  gap: var(--check-list-text-gap);
  min-height: var(--check-list-row-h);
}

/*
flex: 0 0 auto so that a long line of text cannot squeeze the marker out of round — a flex item
gives up its width before it wraps, and a marker one pixel narrower than it is tall reads as a
mistake rather than as a tight fit.
*/
.check-list__mark {
  flex: 0 0 auto;
  width: var(--check-list-mark-size);
  height: var(--check-list-mark-size);
  border-radius: var(--radius-pill);
  background: var(--check-list-mark-bg);
  color: var(--check-list-mark-fg);
}

.check-list__tick {
  fill: none;
  stroke: currentcolor;
  stroke-width: var(--check-list-mark-stroke);

  /*
  Round, and the render is why: at the elbow the two arms meet at some 96 degrees and both tips
  are visibly domed rather than cut square.
  */
  stroke-linecap: round;
  stroke-linejoin: round;
}

.check-list__text {
  color: var(--check-list-text-color);
  font-size: var(--fs-check-list);
  font-weight: var(--fw-check-list);
  line-height: var(--lh-check-list);
}