/* checklist.css — page-specific styles for the Development Checklist page.
   Design tokens, topnav, sidebar shell, progress bar, and section-count/sec-progress
   badges are all defined once in assets/css/site.css. */

/* ══════════════════════════════
   CHECKLIST ITEMS (clickable rows)
══════════════════════════════ */
ul.check-list.click-list { list-style: none; display: flex; flex-direction: column; gap: .3rem; }

ul.check-list.click-list li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--ink-mid);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: .55rem .9rem;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  user-select: none;
}

ul.check-list.click-list li:hover { border-color: var(--green); }
ul.check-list.click-list li.checked { background: var(--green-pale); border-color: var(--green); color: var(--ink-soft); }
ul.check-list.click-list li.checked .item-text { text-decoration: line-through; opacity: .7; }

.cb {
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid var(--border);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: .18rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  color: transparent;
  background: var(--surface);
  transition: all .12s;
}

ul.check-list.click-list li.checked .cb { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.item-text { flex: 1; }

/* ══════════════════════════════
   VARIANT GROUPS
══════════════════════════════ */
.variant-group { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: .5rem; overflow: hidden; }
.variant-label { font-size: .78rem; font-weight: 600; color: var(--ink); background: var(--bg); padding: .5rem .9rem; border-bottom: 1px solid var(--border); }
.variant-group .check-list.click-list { padding: .4rem .5rem .5rem; gap: .25rem; }
.variant-group .check-list.click-list li { border-radius: 5px; font-size: .82rem; }