/* To-do lists. Colours come from the app's tokens so light and dark themes both work. */
.todo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px;align-items:start}
.todo-card{--c:var(--teal);padding:0;overflow:visible;border-top:4px solid var(--c)}
.todo-card[data-color=violet]{--c:#7362d8}.todo-card[data-color=coral]{--c:#ec3155}.todo-card[data-color=amber]{--c:#d99100}
.todo-card[data-color=blue]{--c:#2f7de1}.todo-card[data-color=green]{--c:#2e9d5b}.todo-card[data-color=pink]{--c:#d6409f}.todo-card[data-color=slate]{--c:#62737b}
.todo-card.archived{opacity:.72}
.todo-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 14px 4px}
.todo-title{min-width:0}.todo-title h3{margin:0 0 4px}
.todo-sub{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.todo-progress{height:6px;margin:8px 14px 0;border-radius:99px;background:var(--surface-3);overflow:hidden}
.todo-progress i{display:block;height:100%;background:var(--c);border-radius:99px;transition:width .25s}
.todo-count{margin:6px 14px 4px}
.todo-items{list-style:none;margin:0;padding:4px 8px 6px}
.todo-item{display:flex;align-items:flex-start;gap:10px;padding:9px 6px;border-radius:10px;position:relative}
.todo-item+.todo-item{border-top:1px solid var(--line);border-radius:0}
.todo-item:hover{background:var(--surface-2)}
.todo-check{margin-top:3px}
.todo-body{flex:1;min-width:0}
.todo-text{overflow-wrap:anywhere;font-size:var(--text-control)}
.todo-item.done .todo-text{text-decoration:line-through;color:var(--muted)}
.todo-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;font-size:var(--text-xs)}
.todo-meta:empty{display:none}
.todo-who{display:inline-flex;align-items:center;gap:5px;color:var(--muted)}
.todo-who.me{color:var(--teal-2);font-weight:700}
.todo-due{padding:1px 7px;border-radius:99px;background:var(--surface-3);color:var(--muted)}
.todo-due.overdue{background:var(--coral-soft);color:var(--coral-text)}
body.dark .todo-due.overdue{background:rgba(236,49,85,.18)}
.todo-edit{opacity:0;flex:none}
.todo-item:hover .todo-edit,.todo-edit:focus-visible{opacity:1}
@media(hover:none){.todo-edit{opacity:1}}
.todo-empty{padding:14px 6px;text-align:center}
.todo-clear{margin:2px 14px 0}
.avatar-xs{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--teal-soft);color:var(--teal-2);font-size:10px;font-style:normal;font-weight:700;flex:none}
body.dark .avatar-xs{background:rgba(28,168,167,.22)}
.mention{display:inline;padding:0 5px;border-radius:6px;background:var(--violet-soft);color:#5646b8;font-weight:600;white-space:nowrap}
.mention.me{background:var(--teal-soft);color:var(--teal-2)}
body.dark .mention{background:rgba(115,98,216,.28);color:#c9c1ff}
body.dark .mention.me{background:rgba(28,168,167,.28);color:#9be8e4}
.todo-add{padding:10px 14px 14px;border-top:1px solid var(--line);margin-top:6px;display:grid;gap:8px}
.todo-add-row{display:flex;gap:8px;flex-wrap:wrap}
.todo-add-row select{flex:1 1 120px;min-width:0}
.todo-add-row input[type=date]{flex:1 1 130px;min-width:0}
.mention-wrap{position:relative}
.mention-wrap>input{width:100%}
.mention-pop{position:absolute;inset-inline:0;top:calc(100% + 4px);z-index:60;list-style:none;margin:0;padding:5px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.mention-pop li{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;cursor:pointer;font-size:var(--text-control)}
.mention-pop li small{margin-inline-start:auto;color:var(--muted);font-size:var(--text-xs)}
.mention-pop li.on,.mention-pop li:hover{background:var(--teal-soft)}
body.dark .mention-pop li.on,body.dark .mention-pop li:hover{background:rgba(28,168,167,.22)}
[aria-pressed=true].ghost.sm{background:var(--teal-soft);border-color:var(--teal);color:var(--teal-2)}
@media(max-width:600px){.todo-grid{grid-template-columns:1fr}}