/* Samen → Taken: the shared to-do list. Zondag tokens only (app.css); rows like the grocery list, an avatar per
   person on the right (Tim mint, Willemijn lila, both for samen), the room's pastel as a small blob. */
.tasks-scope { display: inline-flex; margin: var(--s-1) 0 0; }
.tasks .add-row { margin-bottom: var(--s-2); }
.tasks-quick { display: grid; gap: var(--s-2); margin: 0 0 var(--s-4); }

.tasks-list li { padding-right: var(--s-3); }
.tasks-open { flex: 1; min-width: 0; min-height: var(--tap); display: grid; align-content: center; gap: 0.1rem; padding: var(--s-1) 0; border: 0;
              background: none; text-align: left; }
.tasks-open .name { font-weight: 500; overflow-wrap: anywhere; }
.tasks-meta { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); color: var(--muted); font-size: var(--t-s); }
.tasks-place { display: inline-flex; align-items: center; gap: 0.3rem; }
.tasks-place i { width: 0.625rem; height: 0.625rem; border-radius: 50%; flex: none; }
.tasks-note { font-style: italic; }

.tasks-who .who-avatar { width: 1.75rem; height: 1.75rem; font-size: 0.8125rem; box-shadow: 0 0 0 2px var(--surface); }
.tasks-who .who-avatar + .who-avatar { margin-left: -0.45rem; }
.tasks-who .who-avatar.w { background: var(--lila); }

/* done: collapsed under "Gedaan", like the event log on Thuis */
.tasks-done { margin-top: var(--s-5); background: var(--surface); border-radius: var(--r-xl); padding: 0 var(--s-3); }
.tasks-done summary { display: flex; align-items: center; gap: var(--s-2); min-height: 3.5rem; padding: 0 var(--s-1); cursor: pointer; font-weight: 600; list-style: none; }
.tasks-done summary::-webkit-details-marker { display: none; }
.tasks-done summary::after { content: "▾"; margin-left: auto; color: var(--muted); }
.tasks-done[open] summary::after { content: "▴"; }
.tasks-done[open] { padding-bottom: var(--s-3); }
.tasks-done .list.done li { min-height: 3rem; padding-right: var(--s-3); }
.tasks-done .list.done .meta { white-space: nowrap; }

/* the edit sheet */
.tasks-sheet form { display: grid; gap: var(--s-2); }
.tasks-sheet .label { margin: var(--s-3) 0 0; }
.tasks-sheet input, .tasks-sheet select, .tasks-sheet textarea { width: 100%; box-sizing: border-box; background: var(--bg); }
.tasks-sheet .tasks-title { font-family: var(--display); font-size: var(--t-l); font-weight: 700; }
.tasks-sheet textarea { min-height: 5.5rem; padding: var(--s-3) var(--s-4); border-radius: var(--r-m); resize: vertical; }
.tasks-select { position: relative; display: block; }
.tasks-select select { -webkit-appearance: none; appearance: none; padding-right: var(--s-6); }
.tasks-select::after { content: "▾"; position: absolute; right: var(--s-4); top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.tasks-sheet .tasks-date { justify-self: start; width: auto; }
.tasks-made { margin: var(--s-3) 0 0; text-align: center; }
.tasks-sheet-foot { display: flex; justify-content: center; gap: var(--s-2); margin-top: var(--s-2); }

/* Thuis: "Vandaag te doen" */
.today-tasks { margin-top: var(--s-3); background: var(--surface); border-radius: var(--r-xl); padding: var(--s-2) var(--s-3) var(--s-3); }
.today-tasks .list li { background: var(--bg); }
.today-tasks .more { display: inline-flex; align-items: center; min-height: var(--tap); margin: var(--s-1) var(--s-2) 0; }
.today-tasks h2 { margin: var(--s-2) var(--s-1) var(--s-2); }

/* labels: a pastel per label (RoomColours, like rooms), ink on top */
.tasks-labels { flex-wrap: nowrap; overflow-x: auto; margin: var(--s-3) calc(-1 * var(--s-4)) 0; padding: 0 var(--s-4) 2px; scrollbar-width: none; }
.tasks-labels::-webkit-scrollbar { display: none; }
.tasks-label-chip i { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--c); flex: none; }
.tasks-label-chip.sel { background: var(--c); color: var(--room-ink); }
.tasks-label-chip.sel i { background: var(--room-ink); }
.tasks-label { display: inline-flex; align-items: center; min-height: 1.25rem; padding: 0 var(--s-2); border-radius: var(--r-pill); background: var(--c); color: var(--room-ink);
               font-size: var(--t-xs); font-weight: 600; }
.tasks-hint { margin: 0; }
.tasks-new-label { margin: var(--s-1) 0 0; }
.tasks-sheet .tasks-new-label input { width: auto; }

/* group counts and the folded backlog */
.tasks-count { margin-left: var(--s-1); font-weight: 500; }
.tasks-more { margin-top: var(--s-2); }

/* reorder: a grip on Vandaag and Ooit rows (js/reorder.js); the row lifts while dragged */
.tasks-grip { display: grid; place-items: center; width: 2.25rem; height: var(--tap); flex: none; margin-right: calc(-1 * var(--s-2)); border: 0; border-radius: var(--r-m);
              background: none; color: var(--muted); cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.tasks-grip svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; }
.reorderable li.dragging { cursor: grabbing; } /* lift, shadow and settle: css/motion.css */
.tasks-order { margin-top: var(--s-2); }