/* Checklist Builder — generated rows and progress are unique to this tool. */
.checklist-builder-page {
  --checklist-progress: 0%;
}

.checklist-builder-page .canvas-bench {
  align-content: start;
}

.checklist-builder-page .canvas-bench .tool-actions {
  align-items: center;
}

.checklist-builder-page .checklist-progress {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: var(--control-border-width) solid var(--panel-soft-border);
  border-radius: var(--radius-lg);
  background: var(--note-surface);
  box-shadow: var(--shadow-note);
}

.checklist-builder-page .checklist-progress__copy {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--text-body);
  font-family: var(--font-plain);
  font-size: var(--step--1);
}

.checklist-builder-page .checklist-progress__copy strong {
  color: var(--text-brand);
}

.checklist-builder-page .checklist-progress__track {
  height: .65rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--inset-surface);
  box-shadow: var(--inset-control-shadow);
}

.checklist-builder-page .checklist-progress__track span {
  display: block;
  width: var(--checklist-progress);
  height: 100%;
  border-radius: inherit;
  background: var(--button-bg);
  transition: width var(--speed) var(--ease-calm);
}

.checklist-builder-page .checklist-items {
  display: grid;
  gap: var(--space-2);
  min-height: 9rem;
  align-content: start;
}

.checklist-builder-page .checklist-empty {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-plain);
  font-size: var(--step-0);
  font-weight: var(--body-weight);
}

.checklist-builder-page .checklist-row {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3);
  border: var(--control-border-width) solid var(--panel-soft-border);
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
  box-shadow: var(--inset-highlight);
  color: var(--text-body);
  cursor: pointer;
  font-family: var(--font-plain);
  font-size: var(--step-0);
  font-weight: var(--body-weight);
  transition:
    border-color var(--speed-fast) var(--ease-calm),
    background var(--speed-fast) var(--ease-calm);
}

.checklist-builder-page .checklist-row:hover {
  border-color: var(--input-focus);
}

.checklist-builder-page .checklist-row input {
  flex: 0 0 auto;
  margin-top: .18rem;
  accent-color: var(--accent);
}

.checklist-builder-page .checklist-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.checklist-builder-page .checklist-row.is-done {
  color: var(--text-muted);
  background: var(--inset-surface);
}

.checklist-builder-page .checklist-row.is-done span {
  text-decoration: line-through;
}