/* checklist.css -- checklist widget */

/* ── Checklist widget ──────────────────────────────────────────────────── */
.checklist-handle { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0.5rem 0.4rem 0.75rem; cursor: grab; flex-shrink: 0; user-select: none; position: relative; }
.checklist-handle:active { cursor: grabbing; }
.checklist-handle.has-title { border-bottom: 1px solid var(--border-sub); }
.checklist-title { flex: 0 1 auto; min-width: 0; font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
.checklist-title:hover { color: var(--text-primary); }
/* Header-context override: rename input matches the .checklist-title span
   footprint exactly so entering edit mode doesn't shift the title or chrome. */
.checklist-handle .checklist-edit-input { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); border-bottom: none; padding: 0; }
.checklist-handle .checklist-edit-input:focus { border-bottom: none; }
.checklist-menu-btn { background: none; border: none; cursor: pointer; color: var(--text-faint); padding: 0.15rem 0.35rem; border-radius: var(--rm); font-size: 1rem; line-height: 1; transition: color 0.15s, background 0.15s; }
.checklist-menu-btn:hover { color: var(--text-primary); background: var(--bg-elevated); }
.checklist-body { flex: 1; min-height: 0; padding: 0.5rem 0.75rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.125rem; }
.checklist-body.seamless { padding-top: 0.25rem; }
.checklist-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.25rem; border-radius: var(--rm); transition: background 0.1s; }
.checklist-item:hover { background: rgba(255,255,255,0.03); }
body.light .checklist-item:hover { background: rgba(0,0,0,0.03); }
.checklist-item input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 1rem; height: 1rem; flex-shrink: 0; cursor: pointer; margin: 0; border: 1.5px solid var(--text-faint); border-radius: 0.2rem; background: transparent; position: relative; transition: border-color 0.15s, background 0.15s; }
.checklist-item input[type="checkbox"]:checked { background: var(--green); border-color: var(--green); }
.checklist-item input[type="checkbox"]:checked::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 9px; border: solid var(--bg-surface); border-width: 0 2.5px 2.5px 0; transform: translate(-50%, -60%) rotate(45deg); }
.checklist-item label { font-size: 0.9375rem; color: var(--text-secondary); cursor: pointer; flex: 1; line-height: 1.35; }
.checklist-item.checked label { text-decoration: line-through; color: var(--text-faint); }
.checklist-dropdown { position: absolute; top: 100%; right: 0.5rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r); padding: 0.35rem 0; min-width: 10rem; z-index: 20; box-shadow: var(--shadow-md); }
.checklist-dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--text-secondary); cursor: pointer; transition: background 0.1s; white-space: nowrap; border: none; background: none; width: 100%; text-align: left; }
.checklist-dropdown-item:hover { background: var(--bg-surface); }
.checklist-dropdown-item.danger { color: var(--red); }
.checklist-dropdown-item.danger:hover { background: var(--red-bg); }
.checklist-dropdown-time-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.75rem; font-size: 0.8125rem; color: var(--text-muted); }
.checklist-time-picker { display: flex; align-items: center; gap: 0.2rem; }
.checklist-time-native { background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--rm); color: var(--text-primary); font-size: 0.8125rem; padding: 0.15rem 0.3rem; font-family: inherit; outline: none; color-scheme: dark; cursor: pointer; }
.checklist-time-native::-webkit-calendar-picker-indicator { display: none; }
.checklist-edit-input { background: transparent; border: none; border-bottom: 1px solid var(--border); color: var(--text-secondary); font-size: 0.9375rem; padding: 0.2rem 0; outline: none; flex: 1; }
.checklist-edit-input:focus { border-color: var(--green); }
.cl-drawer-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-sub); }
.cl-drawer-row span { flex: 1; color: var(--text-secondary); font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-drawer-delete { background: none; border: none; cursor: pointer; color: var(--text-faint); padding: 0.2rem; transition: color 0.15s; }
.cl-drawer-delete:hover { color: var(--red); }
.cl-create-form { display: none; flex-direction: column; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-sub); }
.cl-create-form.open { display: flex; }
.cl-template-btn { padding: 0.4rem 0.65rem; font-size: 0.8125rem; border-radius: var(--r); border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-secondary); cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.cl-template-btn.selected { border-color: var(--green); color: var(--green); }
.cl-template-btn:hover { border-color: var(--text-faint); }

/* ── Item drag-to-reorder ──────────────────────────────────────────── */
.checklist-item { cursor: grab; }
.checklist-item:active { cursor: grabbing; }
.cl-item-dragging { opacity: 0.4; }
.cl-item-drag-over-top { border-top: 2px solid var(--green); }
.cl-item-drag-over-bottom { border-bottom: 2px solid var(--green); }

/* ── Tracked-item indicator ─────────────────────────────────────────
   The checkbox border swaps to green to mark a tracked item. When checked,
   the box is already green-filled (rule above), so the indicator converges
   with the "done" state. The cue is most diagnostic on the unchecked state
   -- the open to-do that feeds the activity heatmap. Zero layout shift. */
.checklist-item[data-tracked="1"] input[type="checkbox"] {
  border-color: var(--green);
}