/* Checklists. Builds on /home/home.css, /shared/css/col.css and /guides/guides.css. */
.cl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 18px; margin: 4px 0 8px; }
.cl-progress { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; }
.cl-count { font-weight: 750; color: var(--ink); }
.cl-bar { height: 10px; border-radius: 999px; background: var(--ground); border: 1px solid var(--line); overflow: hidden; }
.cl-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.25s; }
.cl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-actions button { min-height: 44px; padding: 0 16px; border-radius: var(--radius); border: 1px solid var(--field-line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.cl-actions button:hover { border-color: var(--accent); }
.cl-note { font-size: 13px; color: var(--muted); margin: 0; flex-basis: 100%; }

.cl-phase .block-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cl-phase-count { font-size: 14px; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.cl-phase-count.done { color: var(--ok); }
.cl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 860px; }
.cl-list li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.cl-list label { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; cursor: pointer; }
.cl-list input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.cl-text { display: flex; flex-direction: column; gap: 3px; }
.cl-text strong { color: var(--ink); font-weight: 700; }
.cl-why { font-size: 14px; color: var(--ink-2); }
.cl-list li.done { background: var(--ground); }
.cl-list li.done strong { color: var(--muted); text-decoration: line-through; }
.cl-list li.done .cl-why { color: var(--muted); }

@media (min-width: 641px) { .cl-toolbar { position: sticky; top: 0; z-index: 5; } }

@media print {
  .topbar, .home-foot, .cl-actions, .cl-note, .col-cta, .crumbs, .skip, #theme-slot { display: none !important; }
  .cl-toolbar { position: static; border: 0; padding: 0; }
  body { background: #fff; }
  .cl-list li { break-inside: avoid; border-color: #999; }
  .cl-phase { break-inside: auto; }
}