/* Checklist - grouped native checkboxes (whole row is the label), a
   progress bar, actions and a "saved on this device" line. */
.cl-heading { margin: 0 0 10px; font-size: 1.05em; font-weight: 750; letter-spacing: -.01em; overflow-wrap: anywhere; }
.cl-progress { display: grid; gap: 6px; margin: 0 0 6px; }
.cl-count { margin: 0; font-size: .86em; font-weight: 700; color: var(--e-ink-2); font-variant-numeric: tabular-nums; }
.cl-bar { height: 8px; border-radius: 999px; background: var(--e-surface-2); overflow: hidden; }
.cl-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--e-accent), var(--e-accent-2)); }
html.e-custom-accent .cl-fill { background: var(--e-accent); }
.cl-complete .cl-count { color: var(--e-ok); }
.cl-section { margin-top: 12px; }
.cl-sub {
    margin: 0 0 2px; font-size: .76em; font-weight: 750; letter-spacing: .07em; text-transform: uppercase;
    color: var(--e-accent-fg); overflow-wrap: anywhere;
}
.cl-items { list-style: none; margin: 0; padding: 0; }
.cl-item { display: flex; align-items: flex-start; gap: 10px; border-bottom: 1px solid var(--e-line); }
.cl-item:last-child { border-bottom: 0; }
.cl-box {
    flex: none; width: 20px; height: 20px; margin: 10px 0 0 2px; accent-color: var(--e-accent); cursor: pointer;
}
.cl-box:focus-visible { outline: 2px solid var(--e-focus); outline-offset: 2px; }
.cl-label { flex: 1; min-width: 0; display: grid; gap: 1px; padding: 9px 0; min-height: 40px; cursor: pointer; }
.cl-text { font-size: .95em; color: var(--e-ink); overflow-wrap: anywhere; }
.cl-note { font-size: .82em; color: var(--e-ink-3); overflow-wrap: anywhere; }
.cl-box:checked + .cl-label .cl-text { color: var(--e-ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.cl-item:hover .cl-text { color: var(--e-accent-fg); }
.cl-box:checked + .cl-label:hover .cl-text { color: var(--e-ink-2); }
.cl-actions { margin-top: 12px; }
.cl-actions .e-btn { min-height: 36px; }
.cl-saved { display: flex; align-items: center; gap: 7px; margin: 8px 0 0; font-size: .78em; color: var(--e-ink-3); }
.cl-saved-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--e-ok); }
html[data-compact="1"] .cl-label { padding: 6px 0; min-height: 34px; }
html[data-compact="1"] .cl-box { margin-top: 7px; }

@media print {
    .cl-actions, .cl-saved { display: none; }
    .cl-bar { border: 1px solid #999; }
    .cl-item { break-inside: avoid; }
}