/* ═══ 11. TO-DO PREVIEW + LIST ═══════════════════════════════════════ */

.todo-preview {
  list-style: none; flex: 1; overflow-y: auto; min-height: 0;
  scrollbar-width: none; -ms-overflow-style: none;
}
.todo-preview::-webkit-scrollbar { display: none; }
.todo-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  padding: 7px 2px;
  border-bottom: 1px solid var(--line);
}
.status-wrap { position: relative; flex: none; display: flex; }
.status-dot {
  flex: none;
  width: 24px; height: 24px;       /* hit target around the 10px dot */
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  padding: 0; border: none; background: transparent;
}
.status-dot::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--hairline);
  background: transparent;
  transition: transform var(--dur-fast);
}
.status-dot:hover::before { transform: scale(1.3); }
.status-dot.st-in_progress::before { background: var(--warn); border-color: var(--warn); }
.status-dot.st-done::before { background: var(--ok); border-color: var(--ok); }
/* Overdue always wins over the status color (never shown once status=done) */
.status-dot.overdue::before { background: var(--bad); border-color: var(--bad); }

/* Status picker popover: centered on the dot, expanding symmetrically up and
   down from that point — not a dropdown, so it never leans toward one edge.
   Lives in #statusMenuLayer (an artboard-level overlay, see doc-13 stacking)
   so a dot near a scrollable panel's edge is never clipped by that panel's
   own overflow:hidden. JS sets left/top per-open; layer sits above modals too. */
.status-menu-layer { position: absolute; inset: 0; pointer-events: none; z-index: 55; }
.status-menu {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  display: flex; flex-direction: column;
  background: var(--popover-bg);
  -webkit-backdrop-filter: var(--popover-blur);
  backdrop-filter: var(--popover-blur);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 3px;
  min-width: 128px;
  /* Own keyframe (not the shared menu-pop-in) because this menu already
     carries a static centering transform — the entrance offset has to
     compose with that instead of replacing it for the animation's first frame. */
  animation: status-menu-pop-in var(--dur-fast) ease-out;
}
@keyframes status-menu-pop-in {
  from { opacity: 0; transform: translate(-50%, -50%) translateY(4px); }
}
.status-menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  text-align: left; white-space: nowrap;
  color: var(--ink);
}
.status-menu-item:hover { background: var(--hover-bg); }
.status-menu-item.active { background: var(--fg); color: var(--bg); }
.status-menu-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--hairline); background: transparent;
}
.status-menu-item.st-in_progress .status-menu-dot { background: var(--warn); border-color: var(--warn); }
.status-menu-item.st-done .status-menu-dot { background: var(--ok); border-color: var(--ok); }

.todo-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Secondary to the title: smaller + fainter than even .todo-due, and capped
   so a long project name can't crowd out the due-days text next to it. */
.todo-scope {
  flex: none; max-width: 96px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--text-xs); color: var(--ink-faint);
}
.todo-due { flex: none; font-size: var(--text-sm); color: var(--ink-soft); }
.todo-due.overdue { color: var(--bad-text); font-weight: 500; }
.todo-row.done { opacity: .5; }
.todo-row.done .todo-title { text-decoration: line-through; }

/* Mobile "N more" row — the preview panel is already a single click target
   (see .pn-todo in panels.css), so this rides that same click-through and
   needs no listener of its own. */
.todo-more { padding-top: 4px; }
.todo-more-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 0; font-size: var(--text-sm); color: var(--ink-soft);
}
.todo-more-btn .chev {
  width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* list modal */
.tdl-body { overflow-y: auto; }
.tdl-group { margin-bottom: 18px; }
.tdl-group-head {
  font-size: var(--text-sm); color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .08em;
  padding-bottom: 6px; border-bottom: 1px solid var(--line-strong);
  margin-bottom: 4px;
}
.tdl-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 2px; border-bottom: 1px solid var(--line);
}
.tdl-main { flex: 1; min-width: 0; text-align: left; padding: 2px; border-radius: var(--radius-md); }
.tdl-main:hover { background: var(--hover-bg); }
.tdl-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdl-sub { font-size: var(--text-sm); color: var(--ink-soft); margin-top: 1px; }
.tdl-sub .overdue { color: var(--bad-text); font-weight: 500; }
.tdl-row.done { opacity: .5; }
.tdl-row.done .tdl-title { text-decoration: line-through; }
.tdl-del { flex: none; }
.tdl-sort { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--ink-soft); }
.tdl-sort select { height: var(--control-h-sm); }


/* ── big tasks + subtasks (docs/feature-todo.md §big tasks) ──────────────
   One level of nesting only. The chevron is the sole fold control; the row
   body still opens the editor, so unfolding can't cause an accidental edit. */
.tdl-chev {
  flex: none; width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: none; background: transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-faint);
}
.tdl-chev:hover { background: var(--hover-bg); color: var(--ink); }
.tdl-chev::before {
  content: ""; width: 5px; height: 5px; margin-left: -2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur-fast);
}
.tdl-chev.open::before { transform: rotate(45deg); margin: -2px 0 0 0; }
/* A non-folding row reserves the chevron's width so every title in a group
   still starts on the same vertical line. */
.tdl-row:not(.tdl-big):not(.tdl-sub-row) { padding-left: 20px; }
.tdl-add-sub { flex: none; }

/* Subtasks are inset and hairline-tethered to their parent, so the nesting
   reads at a glance without a second background colour. */
.tdl-kids {
  margin: 0 0 4px 27px;
  padding-left: 10px;
  border-left: 1px solid var(--line-strong);
}
.tdl-sub-row { padding-left: 0; }
.tdl-sub-empty { padding: 6px 2px; }

/* "2/5" — how much of a big task is done, without unfolding it. */
.todo-count, .tdl-title .todo-count {
  flex: none; margin-left: 6px;
  font-size: var(--text-xs); color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.todo-count.empty { color: var(--ink-faint); font-style: italic; }

/* Read-only stand-ins in the item modal (parent name, derived-dates note). */
.tdf-parent { font-size: var(--text-sm); color: var(--ink); }
.tdf-derived { font-size: var(--text-sm); color: var(--ink-faint); }

/* Construction-issue marker (docs/feature-construction.md). Open issues are
   rendered into this panel as virtual rows — they are not stored to-dos — so
   they carry a chip that says where they actually live. */
.todo-chip, .tdl-chip {
  flex: none;
  font-size: var(--text-xs); color: var(--warn-text);
  border: 1px solid var(--warn); border-radius: var(--radius-sm);
  padding: 0 5px; white-space: nowrap;
}
.tdl-chip { margin-left: 6px; }