/* to-do-list: styles only it uses, split out of site.css by scripts/split-css.mjs. */
.todo-tool, .habit-tool { display: flex; flex-direction: column; gap: 14px; }
.todo-add { display: flex; flex-wrap: wrap; gap: 8px; }
.todo-add input[type="text"] { flex: 1 1 240px; min-width: 0; }
.todo-add input[type="date"] { flex: 0 1 170px; }
.todo-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.todo-filters { display: flex; gap: 6px; }
.todo-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.todo-item { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.todo-item input[type="checkbox"] { flex: none; width: 20px; height: 20px; accent-color: var(--signal); cursor: pointer; }
.todo-text { flex: 1; min-width: 0; padding: 2px 4px; border-radius: 4px; overflow-wrap: anywhere; color: var(--ink); outline: none; }
.todo-text:focus { background: var(--mist); box-shadow: 0 0 0 2px var(--signal); }
.todo-item.is-done .todo-text { color: var(--slate-2); text-decoration: line-through; }
.todo-due { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--mist); color: var(--slate); font-size: 0.8rem; }
.todo-due.is-today { background: var(--signal-soft); color: var(--signal-ink); }
.todo-due.is-late { background: var(--bad-soft); color: var(--bad); }
.todo-tools { display: flex; gap: 2px; }
.todo-tools button { width: 30px; height: 30px; border: 0; border-radius: 6px; background: none; color: var(--slate); cursor: pointer; font-size: 1rem; }
.todo-tools button:hover { background: var(--mist); color: var(--ink); }
.todo-empty { margin: 10px 0; color: var(--slate); text-align: center; }
.todo-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; color: var(--slate); font-size: 0.9rem; }