/* todos/module.css: the To Do tab, on top of core.css. */

.task-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line);}
.task-row:last-child{border-bottom:none;}
.task-title{font-size:13px;font-weight:500;}
.task-meta{font-size:11px;color:var(--ink-soft);margin-top:1px;}
.task-meta.overdue{color:var(--brick);}

/* ---------- multi-step to dos ---------- */

.td-multi-toggle{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;margin:2px 0 10px;}
.td-multi-toggle input{width:16px;height:16px;}

.td-steps{display:flex;flex-direction:column;gap:6px;}
.td-step{display:flex;align-items:center;gap:6px;}
.td-step input[type=text]{flex:1;min-width:0;}
/* A completed step is a record of something that happened, so it cannot be
   renamed, moved or removed from the form. The server refuses all three; the
   disabled controls mean the refusal is never reached. */
.td-step.done input[type=text]{color:var(--text-muted);text-decoration:line-through;}
.td-step-n{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);width:14px;flex:0 0 auto;text-align:right;}
.td-step .btn.small{flex:0 0 auto;padding:6px 8px;line-height:1;}

/* ONE fixed slot for whichever marker a row carries. The ring is 32px and a
   checkbox 17px, so without a shared slot a multi-step row's title sat 15px
   right of a single-step one and the list read as ragged. The same
   fixed-width-column lesson the Inventory and Manage Users grids already
   carry: measure the left edge per row, do not eyeball it. */
.td-mark{flex:0 0 auto;width:32px;margin-right:10px;display:inline-flex;
  align-items:center;justify-content:center;}
.td-mark input[type=checkbox]{width:17px;height:17px;margin:0;}
.task-row .td-mark{cursor:pointer;}
.todo-ring{display:block;}

/* The track in the progress dialog: what is done, what is next, what is left. */
.td-step-track{display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;margin-top:12px;}
.td-track-row{display:flex;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:13px;}
.td-track-row:last-child{border-bottom:none;}
.td-track-row.current{background:var(--sage-soft);}
.td-track-row.done .td-track-body > span:first-child{color:var(--text-muted);text-decoration:line-through;}
.td-track-mark{flex:0 0 auto;color:var(--text-muted);line-height:1.4;}
.td-track-row.done .td-track-mark{color:var(--sage);}
.td-track-row.current .td-track-mark{color:var(--mustard);}
.td-track-body{display:flex;flex-direction:column;gap:1px;min-width:0;}

/* The calendar tint for this layer (the calendar module draws the grid). */
.cal-todos{background:var(--yellow-dot);color:#3A2E08;}