/**
 * Checklist columns.
 *
 * Ported from `_mockups/process.html` (`.p-docs`, `.p-doc`, `.p-doc--dep`,
 * `.p-docs__foot`, `.p-docs__callout`), prefixed per inventory §2.2. That
 * prefix is not tidiness here: `partners.html` defines `.p-docs` as a navy
 * two-column grid at container width, and this one is a light two-card grid at
 * container-narrow. Shared unprefixed, they would fight on whichever page used
 * both.
 *
 * `pages.css` owns `.alt-band` and `.callout`; the cards are close to `.card`
 * but not the same object – a wider inline padding, no lift, no hover, and a
 * ruled checklist inside – so they are written out rather than forced into a
 * kit class that would then need three overrides.
 *
 * The gold marker on the second column comes from `:nth-child(even)`, not from
 * a field. In the approved design column one is what everybody needs and column
 * two is what only some people need, and that is positional information the
 * author already supplies by ordering the repeater.
 *
 * Breakpoints are literal px because `var()` is invalid inside a media query.
 */

.checklist-columns {
  scroll-margin-block-start: var(--sticky-offset);
}

.checklist-columns__head {
  max-width: var(--container-narrow);
  margin-inline: auto;
  margin-block-end: var(--s-5);
}

.checklist-columns__grid {
  max-width: var(--container-narrow);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}

.checklist-columns__col {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s-4) var(--s-5);
}

.checklist-columns__col h3 { font-size: var(--text-base); }

.checklist-columns__list { margin-block-start: var(--s-3); }

.checklist-columns__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.8em;
  padding-block: 0.65rem;
  border-block-start: 1px solid var(--line-soft);
  font-size: var(--text-s);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* An empty checkbox, drawn rather than imaged. It is a prompt to tick things
   off on paper, so it is deliberately not a tick. */
.checklist-columns__list li::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: none;
  margin-block-start: 0.1em;
  border: 2px solid var(--blue-tint-20);
  border-radius: calc(var(--r-s) / 2);
  background: var(--blue-tint-05);
}

/* Column two is the conditional list, so its markers go gold. */
.checklist-columns__col:nth-child(even) .checklist-columns__list li::before {
  border-color: var(--gold-line);
  background: var(--gold-tint-15);
}

.checklist-columns__foot {
  max-width: var(--container-narrow);
  margin-inline: auto;
  margin-block-start: var(--s-3);
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

.checklist-columns__callout {
  max-width: var(--container-narrow);
  margin-inline: auto;
  margin-block-start: var(--s-4);
}

@media (max-width: 760px) {
  .checklist-columns__grid { grid-template-columns: 1fr; }
}