#task-list{align-items:start;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}
article.card[data-task]{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;background:#fff;padding:22px;box-shadow:0 1px 3px rgba(37,59,115,0.03);scroll-margin-top:24px;transition:border-color .15s,box-shadow .15s}
article.card[data-task]:hover{border-color:#b9ccf8;box-shadow:0 6px 18px rgba(37,59,115,0.06)}
article.card[data-task] h2{font-size:18px!important;line-height:1.55!important;margin:12px 0 6px!important;color:var(--ink)}
article.card[data-task] h3{font-size:13px!important;font-weight:700!important;color:var(--muted);margin:14px 0 4px!important}
article.card[data-task]>p{font-size:13.5px;line-height:1.8;color:var(--ink);margin:0 0 10px}
.task-project-links{list-style:none;padding:0!important;margin:8px 0 14px;display:flex;flex-direction:column;gap:8px}
.task-project-links li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid #edf2f7;border-radius:8px;background:#fafbfc;margin:0}
.task-project-links .task-project-title{font-size:13px;line-height:1.6;text-decoration:none;min-width:0;color:var(--ink)}
.task-project-title bdi{font-family:Arial,sans-serif;font-size:12px;font-weight:700;color:var(--brand);margin-inline-end:4px}
.task-project-links .task-action{font-size:11.5px;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;min-height:30px;padding:3px 10px;border:1px solid #c9daff;border-radius:6px;background:#edf3ff;color:var(--link);text-decoration:none;transition:all .15s}
.task-project-links .task-action:hover{background:var(--brand);color:#fff;border-color:var(--brand);text-decoration:none}
.task-project-links a.task-project-title:hover{color:var(--link);text-decoration:underline}
article.card[data-task] details{border:1px solid var(--line-subtle,#eef2f6)!important;border-radius:8px!important;background:#fafbfc!important;margin-top:auto!important;padding:8px 12px!important}
article.card[data-task] details summary{font-size:12px!important;color:var(--muted)!important;cursor:pointer;min-height:28px!important;padding:2px 0!important}
article.card[data-task] details p{font-size:12px!important;line-height:1.75!important;color:var(--muted);margin:6px 0 0!important}
@media(max-width:768px){#task-list{grid-template-columns:1fr}.task-project-links li{grid-template-columns:1fr;gap:6px}.task-project-links .task-action{justify-self:start;min-height:34px}}