/* ─────────────────────────────────────────────────────────────────────────
   c-checklist — a walkable GTD review checklist (P5.3i, the last P5.2b
   component). PROMOTE + COMBINE (sources left intact, like c-stepper/c-table):
     • the engraved-groove seam from .site-method__step (08-pages/_landing.css)
       — a 1px shadow over a 1px highlight, read as a groove cut into the chassis;
     • the .c-table__row flex idiom (06-components/_table.css) — a leading control
       cell + a flex:1 text cell, divided by the same groove.
   The check chrome itself reuses the already-shipped .c-button--ghost ("Mark
   done") and a simple --done ✓ marker; the "auto" tag reuses .c-badge.
   Self-scoped: .c-checklist* selectors only. Existing tokens only; strict CSP
   (no inline style). No banned tokens (--warn / --font-mono / --fs-base).
   ───────────────────────────────────────────────────────────────────────── */

.c-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A phase section header (weekly review: Get Clear / Current / Creative). The
   engraved seam above it separates phases the way the landing method ledger does. */
.c-checklist__phase {
  position: relative;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  font-family: var(--font-data);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.c-checklist__phase::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(
    to bottom,
    var(--color-bezel-shadow) 0 1px,
    var(--color-bezel-light) 1px 2px
  );
}

/* First phase header sits flush — no leading gap above the very first group. */
.c-checklist__phase:first-child {
  margin-top: 0;
}

/* An item row: a leading control cell + a flex:1 text cell, divided by the
   engraved groove (the c-table__row idiom). */
.c-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding-block: var(--space-3);
  box-shadow:
    inset 0 -2px 0 0 var(--color-bezel-shadow),
    inset 0 -1px 0 0 var(--color-bezel-light);
}

.c-checklist__item:last-child {
  box-shadow: none;
}

/* The leading control cell (holds the "Mark done" button_to or the ✓ marker). */
.c-checklist__check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

/* The done marker — a lit ✓ in the OK signal colour. */
.c-checklist__check--done {
  color: var(--color-ok);
  font-size: var(--fs-sm);
  font-family: var(--font-data);
}

/* The step text takes the rest of the row; wraps long content. */
.c-checklist__text {
  flex: 1 1 auto;
  min-width: 0;
}