/* ================= THE ONE TASK CHECKLIST, `.tcl-*` =================

   One component serving both hosts — sys_design-system.md §11a. Selectors here are
   UNPREFIXED (no `#panel`, no `.alt-app #taskModal`), so one rule set resolves on
   every host; tokens are the classic names (`--panel`, `--border-soft`, …), which
   resolve everywhere including the unframed page's absent `--a-*` scale.

   Loads after CSS/drag-list.css, before CSS/alt/alt-embed-task.css on the task page,
   and does not redeclare anything drag-list.css owns (`.a-dragging`, `.a-dragover`,
   `.a-drop-line`, `body.a-dragging-on`).

   The notes checklist (`.a-ncl-*`, CSS/alt/alt-notes.css) is this component's sizing
   reference — 30px row, 19x19 round tick, reveal-on-hover actions — not something it
   shares markup or a store with: three checklists, three category sets, three stores
   (`JS/services/task-checklist.js` here, `JS/features/note-checklist.js` for notes),
   kept apart because this component's items live inside folding categories with their
   own drag zones, while the notes list is flatter. */

/* ================= THE SECTION AROUND IT ================= */

.tsec-head .tcl-n{
  flex:0 0 auto; font-size:11px; font-weight:600; color:var(--text-faint);
  background:var(--panel-2); border:1px solid var(--border-soft);
  border-radius:999px; padding:1px 8px; letter-spacing:0; text-transform:none;
}
.tcl-note,
.tcl-hint{ margin:0; font-size:12px; line-height:1.5; color:var(--text-faint); }
.tcl-empty{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.tcl-empty .tcl-hint{ flex:1 1 220px; min-width:0; }

/* The categories, stacked, with a quiet rule between them rather than three boxes — this
   already sits inside a panel or a dialog with its own frame. */
.tcl{
  display:flex; flex-direction:column; gap:4px;
  border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  background:var(--panel-2); padding:8px;
}
.tcl-cat + .tcl-cat{ border-top:1px solid var(--border-soft); padding-top:4px; }

.tcl-cat-h{
  display:flex; align-items:center; gap:8px; width:100%;
  min-height:24px; padding:4px; background:none; border:0; cursor:pointer;
  color:var(--text-dim); font-family:inherit; text-align:left; border-radius:6px;
}
.tcl-cat-h:hover{ color:var(--accent-text); background:var(--panel); }
.tcl-cat-h b{
  flex:0 0 auto; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.tcl-cat-h .n{ flex:0 0 auto; font-size:11px; font-weight:600; color:var(--text-faint); }
/* The one chevron clock, CSS/components.css §C — sys_design-system.md §2b. Only the
   rotation state belongs here; no transition of its own. */
.tcl-cat-h .cv{
  flex:0 0 auto; display:inline-flex; align-items:center; color:var(--text-faint);
}
.tcl-cat-h .cv svg{ width:14px; height:14px; }
.tcl-cat-h[aria-expanded="false"] .cv{ transform:rotate(-90deg); }

/* 6px on every side, 4px between rows — no left indent under the category header. */
.tcl-cat-b{
  display:flex; flex-direction:column; gap:4px; padding:6px;
}
/* The drop target, in the shared drag engine's own class name — one visual answer to "this is
   where it lands," everywhere this list is drawn. Owned by CSS/drag-list.css; not restated here. */

/* ================= THE ROW =================

   A grid, not a flex line: `minmax(0,1fr)` is the one column allowed to shrink, so
   the text never pushes the others off a narrow panel. Reordering within a category
   is the grip's drag or Alt+Up/Alt+Down on `.tcl-t`, never a second button pair. */
.tcl-item{
  display:grid; grid-template-columns:auto auto minmax(0,1fr) auto;
  align-items:center; gap:8px; padding:3px 4px; border-radius:6px;
}
.tcl-item:hover{ background:var(--panel); }

/* Decorative — the whole row is the drag surface, armed by JS/components/drag-list.js.
   aria-hidden because the row's text carries the announced move; visible at every
   width, since it is the only visible promise of the drag on the row. */
.tcl-grab{
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; color:var(--text-faint); cursor:grab;
}
.tcl-grab svg{ width:12px; height:12px; }

/* 19x19, round — matched to the notes checklist's own tick, `.a-check` (sys_design-system.md §11a). */
.tcl-tick{
  width:19px; height:19px; flex:0 0 auto; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--border-strong);
  border-radius:50%; color:var(--text-dim); cursor:pointer;
}
.tcl-tick:hover:not(:disabled){ border-color:var(--accent); color:var(--accent-text); }
.tcl-tick.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-text); }
.tcl-tick:disabled{ cursor:default; opacity:.6; }
.tcl-tick svg{ width:12px; height:12px; }

.tcl-t{
  min-width:0; font-size:13px; line-height:1.45; color:var(--text);
  overflow-wrap:anywhere; cursor:text;
}
/* A completed item reads as completed wherever it sits, and it survives a printer and a
   colour-blind reader because it is not colour alone. */
.tcl-item.done .tcl-t{ text-decoration:line-through; color:var(--text-faint); }

/* One cell for both remaining controls, revealed rather than always drawn — the same
   pattern CSS/alt/alt-notes.css's `.a-ncl-a` uses: an occasional control should not
   compete with the text for width on every row. */
.tcl-a{ display:flex; align-items:center; gap:4px; opacity:0; }
.tcl-item:hover .tcl-a,
.tcl-item:focus-within .tcl-a{ opacity:1; }
/* An un-sized native `<select>` defeats a bare class against a host's own id — the
   pattern sys_design-system.md's "Opting a control OUT of the base rule" section
   documents from CSS/alt/alt-rich-text.css's `.a-fmt-s`; this is its cross-reference,
   not a second derivation. `!important` names the rule it is beating and why. */
.tcl-move{
  flex:0 0 auto; width:auto; min-width:0; max-width:120px;
  height:24px !important; padding:0 6px !important; font-size:12px;
}
.tcl-del{ flex:0 0 auto; width:24px; height:24px; min-width:24px; min-height:24px; }

/* Quick entry, indented so the field reads as part of the category, not the next one. */
.tcl-add{ display:flex; align-items:center; gap:8px; margin-top:4px; }
.tcl-add-input{ flex:1 1 auto; min-width:0; font-size:12px; }
.tcl-add .btn{ flex:0 0 auto; min-width:28px; }

/* The whole row becomes the editor: the text cell alone is too narrow for a long item.
   `grid-column:1 / -1` gives it the row's full width without changing the grid. */
.tcl-item.editing{ background:var(--panel); }
.tcl-edit{
  grid-column:1 / -1; display:flex; flex-direction:column; gap:8px; padding:4px 0;
}
.tcl-ta{
  width:100%; min-height:34px; max-height:240px; resize:none; font-size:13px; line-height:1.45;
}
.tcl-edit-a{
  display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap;
}
.tcl-edit-a .tcl-hint{ flex:1 1 auto; min-width:0; }

.tcl-foot{ display:flex; justify-content:flex-end; margin-top:8px; }
/* The neutral and error colours are already shared; "saved" is scoped to this list only. */
.tcl-status.ok{ color:var(--green-text); }

/* Kept in the DOM for the live region — announced more reliably than one that
   appears on display:none being lifted — but collapsed to zero while empty. */
.tcl-status:empty{ min-height:0; margin-top:0; }

/* `.tcl-a` stays visible with no hover to reveal it — a touch reader has none — the
   same reasoning CSS/alt/alt-responsive.css applies to `.a-check`, generalised to
   `hover:none` so it also covers a touch-capable laptop at a wide viewport. */
@media (hover:none){
  .tcl-a{ opacity:1; }
}
/* The row becomes two at ≤640px, deliberately, not a regression to "fix" back to one:
   `.tcl-a` is forced visible here (no hover to reveal it with), and its category
   select plus ✕ would otherwise compete with the text on a narrow modal. The height
   here is NOT 30px on purpose — two rows need more than the one-row desktop layout,
   and forcing 30px back would wrap the text or crush `.tcl-a`'s controls under the
   24px pointer-target floor §18 sets. */
@media (max-width:640px){
  .tcl-item{ grid-template-columns:auto auto minmax(0,1fr); }
  .tcl-a{ opacity:1; grid-column:1 / -1; }
}