/*
 * Minimal shared shadow-root reset, prepended once to the bundled
 * `ds.css` every component links to (see `scripts/build-ds-css.mjs` in
 * src). The design-system skill requires a single global reset
 * (`global.css`), but that is light-DOM only and cannot reach into a
 * shadow root. This is the shadow-DOM equivalent: box-sizing plus a
 * token-driven focus ring.
 *
 * Focus-ring color on inverse surfaces is not handled with `:host-context`
 * here: `ds-section[data-surface="inverse"]` re-points the
 * `--elvaio-color-focus` custom property for its whole subtree, and every
 * component (light or shadow DOM) that reads that token for its focus ring
 * inherits the override automatically, because custom properties inherit
 * through shadow boundaries.
 */
:host {
  box-sizing: border-box;
}

:host *,
:host *::before,
:host *::after {
  box-sizing: border-box;
}

:host(:focus-visible) {
  outline: var(--elvaio-focus-width) solid var(--elvaio-color-focus);
  outline-offset: 2px;
  border-radius: var(--elvaio-radius-field);
}


:host {
  display: block;
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--elvaio-space-03);
  margin: 0;
  padding: 0;
}

/* Reference uses a real icon element as the first cell of a two-column
   grid (24px icon, text column), not a native list marker — so only the
   icon takes the accent color, never the item text. */
::slotted(li) {
  list-style: none;
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--elvaio-space-03);
  align-items: start;
  font-weight: var(--elvaio-font-weight-semibold);
  /* No explicit color: inherit the ambient text color from wherever this
     list is placed (ink on a light card, cream inside an inverse
     ds-callout, ...) rather than forcing light-mode ink everywhere. */
}

::slotted(li)::before {
  margin-top: 0.1875rem;
  font-size: 0.9em;
  line-height: 1;
}

:host([marker='check']) ::slotted(li)::before {
  content: '\2713';
  color: var(--elvaio-color-accent-text);
}

:host([marker='cross']) ::slotted(li)::before {
  content: '\2715';
  color: var(--elvaio-color-tone-danger);
}

/* `divided`: a rule above every item (including the first), e.g. the
   AI-teaser aside list — a visually distinct row style from the plain
   gap-only spacing the "wat wij doen/nooit" cards use. */
:host([divided]) .checklist {
  gap: 0;
}

:host([divided]) ::slotted(li) {
  padding: var(--elvaio-space-04) 0;
  /* `currentColor` at low opacity (not the light-mode-only
     `--elvaio-color-border-decorative` token) so the rule reads correctly
     against both this list's light-card and inverse-card placements. */
  border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

:host([row]) .checklist {
  flex-direction: row;
  flex-wrap: wrap;
  /* Column gap is off-scale (36px, between --elvaio-space-07 and -08). */
  gap: var(--elvaio-space-03) 2.25rem;
}