/*
 * Checklist component -- production styles.
 *
 * Per Product Design System §5.9: "Full-width list, checkbox + label,
 * consistent regardless of breakpoint" -- there is NO @media rule in
 * this file, matching the approved "no responsive variation" behaviour
 * (only spacing/row-height matters, which is breakpoint-independent).
 *
 * Structural spacing references only the resolved Stage 2 spacing
 * tokens. Colour is NOT resolved yet (pending-design-signoff) -- no
 * colour value is set below.
 */

@import url("../../config/tokens/tokens.generated.css");

.sr-checklist {
  width: 100%;
  box-sizing: border-box;
}

.sr-checklist__counter {
  margin: 0 0 var(--space-m) 0;
  font-weight: 600;
}

.sr-checklist__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.sr-checklist__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-s) 0;
  /* Enough row height/separation that adjacent items never look merged,
     per §5.9 -- achieved via padding + the list's own gap, not a border
     colour (unresolved). */
}

.sr-checklist__label-wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  cursor: pointer;
}

.sr-checklist__checkbox {
  /* Minimum 44px touch target on mobile, per §5.9 -- achieved via
     padding on the wrapper/checkbox box model rather than a fixed pixel
     size that would look identical (and oversized) on desktop too. */
  width: 20px;
  height: 20px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  flex-shrink: 0;
  box-sizing: content-box;
  padding: 12px; /* expands the tappable area beyond the visible box, a
                    standard technique, without inventing a new colour
                    or border value */
}

.sr-checklist__label-text {
  word-break: break-word;
}

.sr-checklist__note {
  /* Secondary, muted, BELOW the label text (not beside it), per §5.9
     hierarchy rule -- achieved by DOM order + block display, not by
     colour (unresolved). */
  display: block;
  margin-left: calc(44px + var(--space-s)); /* aligns under the label text, past the checkbox */
  font-size: 0.9em;
  word-break: break-word;
}