/* Checklist widget (widgets/checklist/checklist.js): three columns of hand-marked boxes. */
.cl__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.cl__col { display: flex; flex-direction: column; gap: 10px; }
.cl__h { display: flex; align-items: baseline; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--wk-copper); font-family: var(--wk-display); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cl__h b { font-size: 24px; line-height: 1; color: var(--wk-copper); letter-spacing: 0; }
.cl__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cl__i { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 13px; line-height: 1.38; }
.cl__i svg { width: 20px; height: 20px; margin-top: -1px; }
.cl__box { fill: none; stroke: var(--ink); stroke-width: 1.3; }
.cl__tick { fill: none; stroke: var(--wk-copper); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cl__half { fill: var(--ink); opacity: .75; }
.cl__i.is-done > span:first-of-type { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--wk-copper) 70%, transparent); }
@media (max-width: 600px) { .cl__cols { grid-template-columns: minmax(0, 1fr); } }