/* <task-row>: tick, title, delete on one line; the note under them. Values only from tokens. */
task-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
}
task-row form {
  flex: 1;
}
task-row input[type="checkbox"] {
  width: var(--space-3);
  height: var(--space-3);
}
task-row input[type="text"] {
  border-color: transparent;
  width: 100%;
}
task-row input[type="text"]:focus {
  border-color: var(--surface-2);
}
task-row[done] input[type="text"] {
  color: var(--text-muted);
  text-decoration: line-through;
}
task-row .ghost {
  background: none;
  color: var(--text-muted);
}
task-row [role="status"],
task-row .presence {
  flex-basis: 100%;
  margin: 0;
}
task-row [role="status"]:empty,
task-row .presence:empty {
  display: none;
}
task-row .presence {
  font-style: italic;
}