.checklist-progress {
  margin: 1em 0 1.5em;
}

.checklist-progress-bar-bg {
  width: 100%;
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-background-secondary, #eee);
  border: 1px solid var(--color-background-border, #ccc);
}

.checklist-progress-bar-fill {
  width: 0%;
  height: 100%;
  background: #4caf50;
  transition: width 0.2s ease;
}

#checklist-progress-text {
  display: inline-block;
  margin-top: 0.4em;
  font-size: 0.9em;
  opacity: 0.85;
}

ul.checklist {
  list-style: none;
  padding-left: 1.2em;
}

ul.checklist.sublist {
  margin-top: 0.4em;
  padding-left: 1.6em;
}

ul.checklist li {
  margin: 0.35em 0;
}

ul.checklist label {
  cursor: pointer;
}

/* Checkboxes that expand into their own sub-checklist are denoted
   with a highlighted outline, distinguishing them from plain items. */
.cl-parent-item {
  outline: 2px solid #4caf50;
  outline-offset: 2px;
  border-radius: 2px;
}