.checklist-jump, .checklist-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.checklist-jump { margin-top: 1.5rem; }
.checklist-actions { margin-top: 1.25rem; }
.checklist-section { scroll-margin-top: 8rem; }
.checklist-remember { display: flex; align-items: flex-start; gap: .75rem; font-weight: 700; }
.checklist-remember input, .interactive-checklist input { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; margin: .2rem 0 0; accent-color: var(--accent); }
.checklist-preferences p, .checklist-section p { color: var(--muted-strong); line-height: 1.65; }
.checklist-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.25rem 0; }
.checklist-progress progress { width: min(100%, 20rem); height: .9rem; accent-color: var(--accent); }
.checklist-progress p { margin: 0; }
.interactive-checklist { margin: 1.5rem 0; padding-left: 1.7rem; }
.interactive-checklist li { padding: .85rem .4rem; border-bottom: 1px solid var(--line); }
.interactive-checklist label { display: flex; align-items: flex-start; gap: .85rem; cursor: pointer; line-height: 1.65; }
.interactive-checklist input:checked + span { color: var(--muted-strong); text-decoration: line-through; text-decoration-thickness: 1px; }
.checklist-preferences button, .checklist-section button { cursor: pointer; font: inherit; }
.checklist-preferences :focus-visible, .checklist-section :focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
[data-checklist-controls][hidden] { display: none; }
@media (max-width: 650px) { .checklist-jump .button { width: 100%; } .checklist-actions .button { flex: 1 1 12rem; } }