/* ============================================================
   Checklist — the container owns the layout and the gap; the lines carry no
   margin. Ported from the mockup's .uselist / .checklist (styles/product.css,
   styles/components.css): "a checklist, not pills — clearly informational, so
   it never reads as buttons or links".
   ============================================================ */
.vt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: flex-start;
}
.vt-list__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--vt-list-size, 15px);
  line-height: 1.45;
  color: var(--vt-fg, var(--color-text));
}

/* The check is a BACKGROUND on ::before, with content: "" — so unlike CSS text
   content it is not exposed to screen readers, and no extra element is needed.
   The <li> is the semantics; this is only the marker. */
.vt-list__item::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--color-light-purple-20)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f4a8b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}

/* On a dark section the lavender badge disappears and the dark-purple check
   with it, so both are restated for that surface. `.vt-section.is-dark`
   out-specifies the base rule whatever order the sheets load in. */
.vt-section.is-dark .vt-list__item::before {
  background: color-mix(in srgb, #ffffff 14%, transparent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}

.vt-list__item a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.vt-list__item a:hover { color: var(--vt-fg, var(--color-link-hover)); }

/* ---- Tag row (2026-08-25) — the mockup's .disciplines/.discipline
   (styles/lithography.css): the same informational lines, wrapped as pill
   chips. Still deliberately non-interactive: the original "not pills" note
   guarded against check LINES reading as buttons; a chip row is its own,
   plainly decorative shape. ---- */
.vt-list--tags {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
}
.vt-list--tags .vt-list__item {
  font-size: 14px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  line-height: var(--lh-snug);
  color: var(--color-dark-purple);
  padding: 11px 20px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}
.vt-list--tags .vt-list__item::before {
  content: none;
}
/* a white chip on a dark band is a sticker; the dark surface gets the frosty
   treatment every other chip-shaped thing on dark wears */
.vt-section.is-dark .vt-list--tags .vt-list__item {
  color: var(--vt-fg, #ffffff);
  border-color: color-mix(in srgb, #ffffff 25%, transparent);
  background: color-mix(in srgb, #ffffff 5%, transparent);
}