/* Checklist, ported from NI26 styles/module-page.css (.mp-checklist,
   .mp-checklist-item: the module-page explainer checklist) and site.css
   (.ni-featrow-copy li). Chips mode uses the shared .ni-chip--trust pills
   (css/_components.css). The band background comes from the section. */

.ni-checklist__title { margin: 0 0 var(--space-5); }

/* ---------- Checklist rows ---------- */
.ni-checklist__list {
  display: grid;
  gap: var(--space-4);
  max-width: 720px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ni-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ni-ink-700);
}

.ni-checklist__item .ni-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: var(--space-0-5);
  color: var(--ni-blue);
}

.ni-checklist__item > span { flex: 1; min-width: 0; }

.ni-checklist--cols-2 .ni-checklist__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-10);
  max-width: none;
}

/* ---------- Chips ---------- */
/* Long labels wrap inside the pill instead of running off a phone screen. */
.ni-checklist__chips .ni-chip { max-width: 100%; white-space: normal; }

/* ---------- Centered ---------- */
.ni-checklist--center .ni-checklist__title { text-align: center; }

/* The list block centers; its rows stay left-aligned so the checks line up. */
.ni-checklist--center .ni-checklist__list {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.ni-checklist--center .ni-checklist__chips { justify-content: center; }

/* ---------- Navy band ---------- */
.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-checklist__item { color: var(--fg-on-dark); }
.ni-main .dnd-section:has([data-ni-bg="dark"]) .ni-checklist__item .ni-icon { color: var(--ni-blue-300); }

/* Browsers without :has() paint the band on the module itself (_layout.css). */
@supports not selector(:has(a)) {
  .ni-checklist[data-ni-bg="dark"] .ni-checklist__item { color: var(--fg-on-dark); }
  .ni-checklist[data-ni-bg="dark"] .ni-checklist__item .ni-icon { color: var(--ni-blue-300); }
  .ni-checklist[data-ni-bg="dark"] .ni-chip--trust { background: var(--on-dark-fill); border-color: var(--on-dark-fill-strong); color: var(--fg-on-dark); }
}

/* ---------- Breakpoints ---------- */
@media (max-width: 760px) {
  .ni-checklist--cols-2 .ni-checklist__list { grid-template-columns: minmax(0, 1fr); }
}