/* Staff task list. */

.task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.task-row { flex-direction: row; align-items: flex-start; gap: 14px; padding: 13px 15px; }
.task-row.done .task-title { color: var(--muted); text-decoration: line-through; }
.task-title { font-size: 14.5px; transition: color var(--t); }
.check {
    flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 8px; cursor: pointer;
    border: 2px solid var(--border-strong); background: transparent; color: #fff; font-weight: 800;
    display: grid; place-items: center;
    transition: background var(--t) var(--ease-out), border-color var(--t), transform var(--t) var(--ease-spring);
}
.check:hover { border-color: var(--ok); transform: scale(1.08); }
.check.on { background: var(--ok); border-color: var(--ok); color: #0b0b1d; animation: pop-in var(--t) var(--ease-spring); }
@media (max-width: 760px) { .task-row { flex-wrap: wrap; } }
.clickable-row { cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.clickable-row:hover .task-title { color: var(--accent); }
.road-card-top .row { gap: 6px; flex-wrap: nowrap; }