/* Checklist status accents: clear at-a-glance completion colors.
   Red = unfinished, green = every required target completed.
   Do not alter the accordion's grid or click targets. */

.checklistTable > .group.progressPending > summary {
  background: #fff1f3;
  box-shadow: inset 4px 0 0 #d83d52;
}
.checklistTable > .group.progressDone > summary {
  background: #eaf8f0;
  box-shadow: inset 4px 0 0 #1d9b68;
}
.checklistTable > .group.progressPending > summary .groupNum {
  background: #ffe0e6;
  color: #bb2944;
}
.checklistTable > .group.progressDone > summary .groupNum {
  background: #ccefdc;
  color: #137a51;
}
.checklistTable > .group.progressPending > summary .groupStats span:last-child b {
  color: #b82f45;
  font-weight: 800;
}
.checklistTable > .group.progressDone > summary .groupStats span:nth-child(2) b {
  color: #157d52;
  font-weight: 800;
}
.checklistTable > .group.progressPending > summary:after {
  border-top-color: #b84556;
}
.checklistTable > .group.progressDone > summary:after {
  border-top-color: #23875b;
}

.checklistTable .checkrow.progressPending > summary {
  background: #fff9f9;
  box-shadow: inset 3px 0 0 #e46b79;
}
.checklistTable .checkrow.progressDone > summary {
  background: #f0faf4;
  box-shadow: inset 3px 0 0 #36aa78;
}
.checklistTable .checkrow.progressPending > summary .itemno {
  color: #b63048;
  background: #ffe7ea;
  font-weight: 700;
}
.checklistTable .checkrow.progressDone > summary .itemno {
  color: #187d53;
  background: #d6f2e1;
  font-weight: 700;
}
.checklistTable .checkrow.progressPending > summary .rowResult .pill {
  background: #ffe7eb;
  border-color: #f4cbd2;
  color: #b52f46;
  font-weight: 700;
}
.checklistTable .checkrow.progressDone > summary .rowResult .pill {
  background: #dcf5e5;
  border-color: #c5ead6;
  color: #137c51;
  font-weight: 700;
}
.checklistTable .checkrow.progressPending > summary .rowExpand:after {
  border-top-color: #bb5261;
}
.checklistTable .checkrow.progressDone > summary .rowExpand:after {
  border-top-color: #278657;
}
.checklistTable .checkrow.progressPending > summary:hover {
  background: #ffeff1;
}
.checklistTable .checkrow.progressDone > summary:hover {
  background: #e5f6ec;
}

/* 2026-10-30: Visual hierarchy refinements.
   Parents form a strong status-colored header band; children stay almost white
   with a restrained colored status mark. */
.checklistTable > .group {
  border-top: 2px solid #f4f5f7;
}
.checklistTable > .group.progressPending > summary {
  background: #fbecef;
  box-shadow: inset 6px 0 0 #c83650;
  border-bottom: 1px solid #edc5cf;
}
.checklistTable > .group.progressDone > summary {
  background: #def3e6;
  box-shadow: inset 6px 0 0 #168b5b;
  border-bottom: 1px solid #bce6ce;
}
.checklistTable > .group > summary .groupName {
  color: #252c33;
  font-weight: 800;
  letter-spacing: -.1px;
}
.checklistTable > .group > summary .groupNum {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
}
.checklistTable > .group.progressPending > summary .groupNum {
  background: #f5bfc9;
  color: #97293f;
}
.checklistTable > .group.progressDone > summary .groupNum {
  background: #b6e8cb;
  color: #106e46;
}
.checklistTable > .group.progressPending > summary .groupStats span:last-child {
  color: #a92740;
}
.checklistTable > .group.progressDone > summary .groupStats span:nth-child(2) {
  color: #17794e;
}

.checklistTable .checkrow.progressPending > summary {
  background: #fffdfd;
  box-shadow: inset 2px 0 0 #dda0a9;
}
.checklistTable .checkrow.progressDone > summary {
  background: #fcfffd;
  box-shadow: inset 2px 0 0 #87c9a7;
}
.checklistTable .checkrow > summary {
  padding-left: 13px;
}
.checklistTable .checkrow > summary .itemtitle {
  color: #303842;
  font-weight: 600;
}
.checklistTable .checkrow.progressPending > summary .itemno {
  color: #ab4052;
  background: #fff0f2;
  font-weight: 650;
}
.checklistTable .checkrow.progressDone > summary .itemno {
  color: #19794e;
  background: #effaf3;
  font-weight: 650;
}
.checklistTable .checkrow.progressPending > summary:hover {
  background: #fff5f6;
}
.checklistTable .checkrow.progressDone > summary:hover {
  background: #f2fbf5;
}
@media (max-width: 640px) {
  .checklistTable > .group > summary {
    min-height: 54px;
  }
  .checklistTable > .group > summary .groupName {
    font-size: 11px;
    line-height: 1.25;
  }
  .checklistTable .checkrow > summary {
    padding-left: 12px;
  }
}